WordPress個別サポート

inputタグやtextareaタグを使ってフォームを作成するときにsize属性やcols属性を使ってサイズ調整をすると、うまくいかない場合があります。たとえば、次のようなタグでフォームを作成したとします。

<form>
 <table>
  <tr>
   <th>お名前</td>
   <td><input type="text" name="uname" size="20"></td>
  </tr>
  <tr>
   <th>メールアドレス</td>
   <td><input type="text" name="from" size="30"></td>
  </tr>
  <tr>
   <th>タイトル</td>
   <td><input type="text" name="title" size="40"></td>
  </tr>
  <tr>
   <th>メッセージ</td>
   <td><textarea rows="5" cols="40" name="naiyou"></textarea></td>
  </tr>
  <tr>
   <td colspan="2"><input type="submit" value="内容を確認"></td>
  </tr>
 </table>
</form>

作成したフォームをGoogle Chromeで表示してみると問題ありません。

Google Chromeでは問題なく表示される

Google Chromeでは問題なく表示される

ところが、FireFoxで表示すると次のようにテキストボックスやテキストエリアがサイドバーに重なってしまいます。

FireFoxで見るとフォーム要素がサイドバーに重なってしまう

FireFoxで見るとフォーム要素がサイドバーに重なってしまう

ちなみにInternet Explorerでもうまく表示できません。

Internet Explorerでも表示がおかしい

Internet Explorerでも表示がおかしい

原因はブラウザによって「size="40"」や「cols="40"」の幅が異なることです。

対処は簡単で、inputタグやtextareaタグで幅のサイズ調整はsize属性やcols属性を使わずにCSSで制御することです。

「すでにsize属性やcols属性を使ってデザインを完成してしまいましたが?!」という場合でも大丈夫です。HTMLの属性よりCSSの方が優先度が高くなるので、これから記述してもCSSが優先されるはずです。

size属性やcols属性を使ったHTMLタグは修正しなくても大丈夫です。

以下は、テキストボックスとテキストエリアの幅を画面いっぱい(width: 100%;)に調整する例です。

input[type="text"],
textarea {
    width: 100%;
}

表示結果は次のようになります。FireFoxでも問題なく表示されます。

FireFoxでもフォームが問題なく表示される

FireFoxでもフォームが問題なく表示される

すべてのフォーム要素を同じ幅にしたくない場合は次のようにサイズごとにスタイルを適用することもできます。

input[type="text"][size="20"] {
    width: 170px;
}

input[type="text"][size="30"] {
    width: 250px;
}

input[type="text"][size="40"] {
    width: 300px;
}

サイズごとに別々のサイズに調整されます。

テキストボックスのサイズごとに別々の幅に調整する

テキストボックスのサイズごとに別々の幅に調整する

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

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

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

WordPressプラグイン

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