目次
こんにちは、後藤です。
今回はホームページのお問い合わせフォームを見栄え良く組む方法を紹介します。
今回紹介する方法で組む事によって、コードも見やすくなりますし、スタイルも適用しやすくなります。
tableで組む
まずは、tableタグを使用して組む方法を紹介します。
例えば、このように組みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form action="#" method="post"> <table> <tr> <th><label for="name">名前</label></th> <td><input type="text" name="name" id="name"></td> </tr> <tr> <th><label for="mail">メールアドレス</label></th> <td><input type="email" name="mail" id="mail"></td> </tr> <tr> <th><label for="contact">お問い合わせ内容</label></th> <td><textarea name="contact" id="contact"></textarea></td> </tr> </table> <button type="submit">送信する</button> </form> |
注意するところは、<table>タグよりも前に<form>タグを持ってくることです。
また、<button>タグは</table>と</form>の間に持ってきます。
スマートフォンに対応する
このままだと、項目と入力フィールドが横並びになっているため、画面の横幅が小さいスマートフォンでは見づらいです。
そこで、スマートフォンのみthとtdのdisplayをblockにすることで縦並びにします。
以下のように記述します。
|
1 2 3 4 5 |
@media only screen and (max-width: 768px) { table th, table td { display: block; } } |
dl,dt,ddで組む
次に、dl,dt,ddで組む方法を紹介します。
例えば、このように組みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form action="#" method="post"> <dl> <dt><label for="name">名前</label></dt> <dd><input type="text" name="name" id="name"></dd> </dl> <dl> <dt><label for="mail">メールアドレス</label></dt> <dd><input type="text" name="mail" id="mail"></dd> </dl> <dl> <dt><label for="conatct">お問い合わせ内容</label></dt> <dd><textarea name="contact" id="contact"></textarea></dd> </dl> <button type="submit">送信する</button> </form> |
PCのみ横並びにする
このままだと項目と入力フィールドが縦並びで表示されるので、横並びにしたい場合は以下のように設定します。
スマートフォンは縦並びの方が見栄えが良いので、PCのみ適応させます。
|
1 2 3 4 5 6 7 8 9 |
@media print,screen and (min-width: 769px) { dl { display: table; } dl dt, dl dd { display: table-cell; } } |
他にも「float」や「inline-block」などで横並びにする方法がありますが、項目と入力フィールドの縦の位置を揃えるのに手間がかかったり、「background-color」が項目や入力フィールドの全体にかからなかったりします。
「table-cell」だと縦の位置を揃えるのに「vertical-align」が効きますし、「background-color」も全体にかかるのでおすすめです。
まとめ
今回はフォームを見栄え良く組む方法を紹介しました。
tableで組む方法もdl,dt,ddで組む方法もどちらもよく使われますが、dl,dt,ddの方が柔軟性があるので個人的にはdl,dt,ddを使用しています。
