テキストボックスやテキストエリアのサイズがブラウザによって異なる

WordPress個別サポート

WordPressに限りませんがHTMLフォームを作成するときにテキストボックスやテキストエリアの幅を「cols="40"」や「size="40"」のHTML属性で指定することがあります。

この方法ではブラウザによって幅が異なる場合があるので注意が必要です。

具体的には

  • Internet ExplorerとFireFoxでフォームの見た目が異なる
  • Internet Explorerでテキストボックスがサイドバーに重なる

のような問題の原因になります。

同じサイズ指定でも見た目の幅が異なる
同じサイズを指定しても見た目の幅が異なる

原因はブラウザによって1文字・1桁の幅が異なることです。対処するにはCSSで「width:160px;」などのように幅を指定する方法があります。

すでに「cols="40"」や「size="40"」という属性付きで記述済みのHTMLを編集せずに対処するには、これらの属性を条件にしてCSSを記述する方法があります。

たとえば、単純にformタグの子要素であるtextareaに対してサイズを指定するCSSは次のようになります。

#content form textarea {
    width:310px;
}
「#content」はWordPressのテーマBizVektorで使うときのセレクタです。

上記のCSSではすべてのテキストエリアのサイズが「width:310px;」になってしまうので実用的ではありません。

より実用的に「cols="40"」のテキストエリアだけ対処したいような場合は、次のように属性セレクタを追加する方法があります。

#content form textarea[cols="40"] {
    width:310px;
}

FireFoxでもInternet Explorerでも同じ幅になります。

Internet ExplorerでもFireFoxでも同じ幅になる
Internet ExplorerでもFireFoxでも同じ幅になる

テキストボックスも同じです。「size="40"」という属性が指定されたテキストボックスのサイズをCSSで指定する例を以下に紹介します。

#content form input[type="text"][size="40"] {
    width:290px;
}

Internet ExplorerでもFireFoxでも同じ幅のテキストボックスになります。

Internet ExplorerでもFireFoxでも同じ幅になる
Internet ExplorerでもFireFoxでも同じ幅になる

その他、HTMLタグの属性やフォーム要素が違っても考え方は同じです。属性セレクタを使うことで、ブラウザごとに異なる「size="40"」のような属性で作成されたフォーム要素の表示問題に対処することができます。

WordPressトラブル