レスポンシブデザイン・コーデイングTIPS(3)tableを使わない表組み

レスポンシブデザインのサイトをコーディングする際のポイントをご紹介していきます。
第3回は、同一のソースで、PCではテーブル状に、スマートフォンではリスト状に表示するテクニックです。

例えば、同一のソースで、スマートフォンでは上図のように、PCでは下図のように表示させたい場合。

PCのデザインだけ見ると、ついついtableを使いたくなりますが、tableを使ってしまうとスマートフォンで縦組みにすることができません。
そのため、dl要素などを使って、疑似的にテーブルを作ることになります。

1.display:table-cell

最も安直な方法ですが、IEで使えないので却下です。

2.positionを使う

<dl>
<dt>サイト形式</dt>
<dd>ブログ</dd>
</dl>
<dl>
<dt>サイト名</dt>
<dd>スマートフォンサイト制作ブログ</dd>
</dl>
<dl>
<dt>サイトURL</dt>
<dd>http://www.html-five.jp</dd>
</dl>
<dl>
<dt>著者</dt>
<dd>株式会社ミスターフュージョン関西支社<br />スマートフォンサイト制作チーム</dd>
</dl>

.list03 {position:relative; padding-left:100px;}
.list03 dt {position:absolute; top:0; left:0; width:100px;}
.list03 dd {min-height:30px;}

dtをposition:absoluteで固定し、ddの位置をdlの左paddingで調整する方法です。
罫線などは主にdlにかけます。
ddの高さがdtを下回ると崩れるので、必要に応じてddにmin-heightをかけます(IE注意)。

3.ネガティブマージン(負のmargin)を使う

<dl>
<dt>サイト形式</dt>
<dd>ブログ</dd>
<dt>サイト名</dt>
<dd>スマートフォンサイト制作ブログ</dd>
<dt>サイトURL</dt>
<dd>http://www.html-five.jp</dd>
<dt>著者</dt>
<dd>株式会社ミスターフュージョン関西支社<br />スマートフォンサイト制作チーム</dd>
</dl>

#list02 {}
#list02 dt {width:100px; height:30px;}
#list02 dd {min-height:30px; margin-top:-30px; padding-left:100px; }

ddをdtの高さの分だけマイナスのmarginで上に動かして重ね、横位置は左paddingで調整します。
罫線などは主にddにかけます。
dtの高さを固定する必要があり、またddの高さがこれを下回らないようにmin-heightをかけます(やはりIE注意)。
マークアップがシンプルになる反面、dtとddの高さが全て同じでない限り、セルの間の縦罫線を引くことができないという問題があります。

4.floatを使う

これは説明不要でしょうか。最も無難な方法です。
ひとつひとつclearfixをかけなければいけないので、コードはあまり美しくないですね。

余談

本当に余談です。

dl = 定義リストというHTMLの本旨に則れば、
dl要素の中には、定義語(difinition term)と説明(definition description)の組が複数並ぶことが想定されているはずです。

つまり、

<dl>
<dt>AAA</dt>
<dd>あああああああああ</dd>
</dl>
<dl>
<dt>BBB</dt>
<dd>いいいいいいいいい</dd>
</dl>
<dl>
<dt>CCC</dt>
<dd>うううううううううううう</dd>
</dl>

というような、dtとddの組をひとつずつdlで区切るような使い方は、仮にinvalidでないとしても、「HTML的に美しくない」ように私は感じます。

私だけでしょうか。

きっと私だけですね。

私だけでいいです。

だから、個人的には3の手法を好みます。
どうしても2や4を使う場合は、dl / dt / dd 以外のマークアップを使います。

コメントを残す

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