THE HAM MEDIA BLOG

上の画像のようなリストで、
リストの中を縦の列でそろえたいような場合、
どのようなマークアップをするのがいいだろうか？

昔にも考えたことがあっだのですが、
再度考えてみようかなって思ってエントリーします。

※追記(2008/11/13 22:28)
サンプル５を追加して、最後の文も少し変えました。

シンプルか構造にそってか・・・

一行だけの構造を考えると、左から見出し、中身、リンクとなるので、
dlタグで囲って、dt、ddでまとめるのがいいのかなんて、
そんなマークアップが考えられます。

全体をみるとリスト化になっているので、
一行をliで囲って、dlで中身をマークアップすることも考えられます。
シンプルなのでいくと、dlだけでまとめるのもいいですし、
厳密にマークアップして、liで囲った中にdlを入れたり・・・
いったいどのようにマークアップするのが最善なのかなと
いつもマークアップするときに迷ったりします。

他のマークアップも考えられると思うのですが、
皆さんならどのようにマークアップするでしょうか？

僕がこのようなデザインをマークアップするならというのを、
いくつか考えて載せておこうと思います。

サンプル１、２

まずはliで一行をまとめて、その中をdlでマークアップしたものです。

２行目と３行目は複数行になっても表示されるかのチェックのために
わざと複数行にしてみています。

■HTML

<ul class="samp01">
  <li>
    <dl>
      <dt>タイトル</dt>
      <dd class="cap">内容</dd>
      <dd class="detail"><a href="#">詳細</a></dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>タイトル</dt>
      <dd class="cap">内容<br />複数行</dd>
      <dd class="detail"><a href="#">詳細</a></dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>タイトル<br />複数行</dt>
      <dd class="cap">内容</dd>
      <dd class="detail"><a href="#">詳細</a></dd>
    </dl>
  </li>
</ul>

■サンプルCSS

今回のサンプル全部では同じようなCSSを使っています。
マークアップが変わっても同じように適応されるようにしています。

.box ul.samp01{
    margin:30px;
    width:400px;
}

.box ul.samp01 li{
    clear:left;
    padding: 10px 0;
    overflow: hidden;
    border-bottom:1px solid #333;
}

* html .box ul.samp01 li{  
    height: 1%;  
} 

.box ul.samp01 li dl dt,
.box ul.samp01 li dl dd.cap{
    float:left;
    display:inline;
}

.box ul.samp01 li dl dt{
    background: url(.gif) no-repeat left 2px;
    padding: 0 0 0 15px;
    width:100px;
}

.box ul.samp01 li dl dd.cap{
    color:#ff3333;
    width:240px;
}

.box ul.samp01 li dl dd.detail{
    background: url(.gif) no-repeat left 2px;
    float:right;
    display:inline;
    width:30px;
    padding: 0 0 0 15px;
}

■サンプル1のプレビュー

サンプル１のCSSがどのように適応されているのか背景色をつけたもの

■サンプル2

float時の高さ確保、今回はclearではなくoverflowを使っています。
上記のCSSでどのブラウザでも問題なく同じように表示されます。

サンプル３

<ul class="samp03">
  <li>
    <span class="title">タイトル</span>
    <span class="cap">内容</span>
    <span class="detail"><a href="#">詳細</a></span>
  </li>
  <li>
    <span class="title">タイトル</span>
    <span class="cap">内容<br />複数行</span>
    <span class="detail"><a href="#">詳細</a></span>
  </li>
  <li>
    <span class="title">タイトル<br />複数行</span>
    <span class="cap">内容</span>
    <span class="detail"><a href="#">詳細</a></span>
  </li>
</ul>

■サンプル３のプレビュー

サンプル４

<dl class="samp04 first-child">
  <dt>タイトル</dt>
  <dd class="cap">内容</dd>
  <dd class="detail"><a href="#">詳細</a></dd>
</dl>
<dl class="samp04">
  <dt>タイトル</dt>
  <dd class="cap">内容<br />複数行</dd>
  <dd class="detail"><a href="#">詳細</a></dd>
</dl>
<dl class="samp04 last-child">
  <dt>タイトル<br />複数行</dt>
  <dd class="cap">内容</dd>
  <dd class="detail"><a href="#">詳細</a></dd>
</dl>

■サンプル４のプレビュー

サンプル５

<table class="samp05">
  <tr>
    <th>タイトル</th>
    <td class="cap">内容<br /></td>
    <td class="detail"><a href="#">詳細</a></td>
  </tr>
  <tr>
    <th>タイトル</th>
    <td class="cap">内容</td>
    <td class="detail"><a href="#">詳細</a></td>
  </tr>
  <tr>
    <th>タイトル</th>
    <td class="cap">内容</td>
    <td class="detail"><a href="#">詳細</a></td>
  </tr>
</table>

■サンプル５のプレビュー

他のマークアップ

上に４種類ほど書きましたけど、
３はちょっとspanでまとめた構造無視なつくりになりますが、
構造を考えたら１か４だと思います。

あとは５のようなテーブルでの作りも考えられます。
ただ、５のようなマークアップの場合、
そのCSS設定がうまくいかなくて、複数行になったときとか
上揃えにすることができませんでした。
まだまだ未熟です。

というより、構造の意味合いを考えると
テーブルじゃないよなーなんて思う。
ただ、３のspanよりはましだろうとも思う。

他にもいろいろ考えられると思うのですが、
みなさんならどのようにマークアップしますか？

また、マークアップするときは、
みなさんならシンプルにマークアップしますか？
それともよりシンプルに作れるより、
構造きっちりにマークアップしますか？

自分以外の人のマークアップの仕方とかも聞きたいです。