以前、tableをレスポンシブ化する方法を報告した。ただ、これは縦横を（行列を）入れ替えるといった形であまりよくないので、tableと同様な形が作れるdl環境でやってみた。
そもそもdlとは
dlタグは、定義・説明リストを表す際に使用します。 dl～/dlの中に、 dtタグで定義・説明される言葉を、 ddタグでそれに対応する説明を配置してリストを作成します。 例えば、用語の定義リストを作成したり、何かの手順を箇条書きで説明する場合などに使用します。（クイックリファレンスから）
たとえば
HTMLソース
|
1 2 3 4 5 6 7 |
<dl> <dt>作者</dt> <dd>ジョン</dd> <dd>ポール</dd> <dd>ジョージ</dd> <dd>リンゴ</dd> </dl> |
ブラウザ上の表示
作者
ジョン
ポール
ジョージ
リンゴ
しかもhtml5からは一つのdtに複数のddを付与できます。
要するにdlはデータリスト環境だということです。
（このdlの使い方についてはかつて「小技集」25で紹介しました。）
table表をdlに変更する
実は具体的な要求があります。さくらサーバーで提供されている問い合わせフォームをレスポンシブ化したいという要求です。以下がその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 28 29 30 31 32 33 34 |
<table class="form" summary="問合せフォーム"> <tbody> <tr> <th>お名前</th> <td><input name="name" size="35" type="text" /></td> </tr> <tr> <th>メールアドレス</th> <td><input name="email" size="35" type="text" /> <input name="email2" size="35" type="text" />（再度入力）</td> </tr> <tr> <th>問合せ種別</th> <td><input name="問合せ種別" type="radio" value="ご質問" />ご質問 <input name="問合せ種別" type="radio" value="ご意見" />ご意見 <input name="問合せ種別" type="radio" value="入隊希望" />入隊希望 <input name="問合せ種別" type="radio" value="体験希望" />体験希望 <input name="問合せ種別" type="radio" value="その他" />その他</td> </tr> <tr> <th>お子様の年齢・学年</th> <td><input name="name" size="35" type="text" /></td> </tr> <tr> <th>お子様の性別</th> <td><input name="問合せ種別" type="radio" value="男" />男 <input name="問合せ種別" type="radio" value="女" />女</td> </tr> <tr> <th>問合せ内容</th> <td><textarea cols="48" name="メッセージ" rows="7"></textarea></td> </tr> </tbody> </table> |
このtableをdlに、thをdtにtdをddに変えます。trは不要です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<dl class="form"> <dt>お名前</dt> <dd><input name="name" size="35" type="text" /></dd> <dt>メールアドレス</dt> <dd><input name="email" size="35" type="text" /> <input name="email2" size="35" type="text" />（再度入力）</dd> <dt>問合せ種別</dt> <dd>< input name="問合せ種別" type="radio" value="ご質問" />ご質問 <input name="問合せ種別" type="radio" value="ご意見" />ご意見 <input name="問合せ種別" type="radio" value="入隊希望" />入隊希望 <input name="問合せ種別" type="radio" value="体験希望" />体験希望 <input name="問合せ種別" type="radio" value="その他" />その他 </dd> <dt>お子様の年齢・学年</dt> <dd><input name="name" size="35" type="text" /></dd> <dt>お子様の性別</dt> <dd><input name="問合せ種別" type="radio" value="男" />男 <input name="問合せ種別" type="radio" value="女" />女 </dd> <dt>問合せ内容</dt> <dd><textarea cols="48" name="メッセージ" rows="7"></textarea></dd> </dl> |
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 |
dl.form dl,dt,dd { margin: 0; padding: 0; } dl.form{ background: #cccce6; border: 1px solid #7777bb; border-top: none; width: 80%; } dl.form dt,dd { padding: 6px; } dl.form dt { border-top: 1px solid #7777bb; clear: left; float: left; width: 26%; } dl.form dd { background: #f0f0f0; border-left: 1px solid #7777bb; border-top: 1px solid #7777bb; margin-left: 27%; } |
ポイントは
dtの clear: left;
float: left;
width: 26%;
と
ddの margin-left: 27%;
です。dtをfloatさせて、幅を決め、その幅と同じ長さをddで左マージンを取るわけです。（ただし1%多く取るときれいに表示できる）こうすると横に並びます。
後は罫線部分です。dlでトップ以外を引き、dtでトップを、ddで左とトップを引きます。
これでほぼ表と同様な形ができます。
（なお、htmlの改行タグbrを使っている部分も複数のddに変更します。）
スマホデフォルトのcss
実は表の形はPC用ですから、スマホでは最初のcssに変更を加えない形がむしろいいということになります。
ただ、このまま（postmail01.html）ではそっけないのでcssを書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
dl.form dl,dt,dd { margin: 0; padding: 0; } dl.form{ background: #cccce6; border: 1px solid #7777bb; width: 100%; } dl.form dt,dd { padding: 6px; } dl.form dd { background: #f0f0f0; } input{ max-width:99%; } textarea{ max-width:99%; } |
これをデフォルトにして、メディアクエリーでPC用を書けば良いということになります。
完成形
|
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 |
dl.form dl,dt,dd { margin: 0; padding: 0; } dl.form{ background: #cccce6; border: 1px solid #7777bb; width: 100%; } dl.form dt,dd { padding: 6px; } dl.form dd { background: #f0f0f0; } input{ max-width:99%; } textarea{ max-width:99%; } @media only screen and (min-width:768px){ blockquote { width:50%; margin:0 auto; } dl.form{ border-top: none; width: 90%; } dl.form dt { border-top: 1px solid #7777bb; clear: left; float: left; width: 26%; } dl.form dd { border-left: 1px solid #7777bb; border-top: 1px solid #7777bb; margin-left: 27%; } |
ここではiPad縦置き以下から表示が変わるようになります。
実際に運用する場合はhtmlのheadに以下を書きます。
|
1 |
<meta name="viewport" content="width=device-width,initial-scale=1"> |
実例は以下をご覧ください。
実例
以上
