レスポンシブにはtableではなく、dlを使おう

以前、tableをレスポンシブ化する方法を報告した。ただ、これは縦横を(行列を)入れ替えるといった形であまりよくないので、tableと同様な形が作れるdl環境でやってみた。

そもそもdlとは

dlタグは、定義・説明リストを表す際に使用します。 dl~/dlの中に、 dtタグで定義・説明される言葉を、 ddタグでそれに対応する説明を配置してリストを作成します。 例えば、用語の定義リストを作成したり、何かの手順を箇条書きで説明する場合などに使用します。(クイックリファレンスから)
たとえば

HTMLソース

ブラウザ上の表示
作者

ジョン
ポール
ジョージ
リンゴ

しかもhtml5からは一つのdtに複数のddを付与できます。

要するにdlはデータリスト環境だということです。

(このdlの使い方についてはかつて「小技集」25で紹介しました。)

table表をdlに変更する

実は具体的な要求があります。さくらサーバーで提供されている問い合わせフォームをレスポンシブ化したいという要求です。以下がそのhtml部分です。

このtableをdlに、thをdtにtdをddに変えます。trは不要です。

cssに変更を加えます。表のような形にするわけです。

ポイントは
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を書きます。

これをデフォルトにして、メディアクエリーでPC用を書けば良いということになります。
完成形

ここではiPad縦置き以下から表示が変わるようになります。

実際に運用する場合はhtmlのheadに以下を書きます。

実例は以下をご覧ください。
実例
以上

 

1件のコメント

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です