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"」のような属性で作成されたフォーム要素の表示問題に対処することができます。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート