dlタグを使ったフォーム(form)レイアウト
dlタグを使ったフォームのレイアウトを作成します。
（項目名をdt要素、入力欄をdd要素を使い記述する）
– HTML –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<form> <dl> <dt><span>お名前</span></dt> <dd> <input type="text" name="name" class="name" required> </dd> <dt><span>メールアドレス</span></dt> <dd> <input type="email" name="email" class="email" required> </dd> <dt>お電話番号</dt> <dd> <input type="tel" name="tel" class="tel"> </dd> <dt>ご連絡方法</dt> <dd> <input type="radio" name="contact" value="Eメール"> Eメール <input type="radio" name="contact" value="お電話"> お電話 </dd> <dt>メッセージ</dt> <dd> <textarea name="message" class="message"></textarea> </dd> </dl> <button type="submit">送信</button> </form> |
デフォルトのレイアウト
上記に対してスタイルを設定していきます。
– CSS –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
/*form-style*/ /*①*/ .form { background-color: #eaeaea; padding: 30px 60px; } /*②*/ .form dl dt { width: 165px; padding: 10px 0; float: left; clear: both; } /*③*/ #contact .form dl dd { padding: 10px 0; } /*④*/ .form .name { width: 240px; height: 20px; } .form .email { width: 300px; height: 20px; } .form .tel { width: 240px; height: 20px; } .form .message { width: 360px; height: 150px; } .form button { background-color: #333333; color: #ffffff; font-size: 20px; width: 120px; display: block; text-align: center; line-height: 50px; border-radius: 5px; margin-left: 165px; } .form button:hover { cursor: pointer; opacity: 0.8; } |
① 背景色と余白を調整する。
② floatプロパティを使用して項目と入力欄を横並びにする。
clear:bothとして項目ごとに都度回り込みを解除する。
widthで幅を持たせて項目と入力欄の間隔を統一する。
③ ddタグのpaddingをdtタグと同じ値にする。（項目と入力欄の高さを揃える）
④ inputタグの幅と高さを調整する。（各inputタグにあらかじめクラスを設定している）高さを統一し、入力項目に合わせて適正な幅を指定している。
完成図
Follow me!
