THE HAM MEDIA BLOG

綺麗に並んでいるリストのマークアップ方法は?

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
HTML
タグ:
XHTML
CSS
マークアップ

綺麗に並ぶデザインのマークアップ?

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

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

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

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

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

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

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

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

サンプル1、2

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

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

■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のプレビュー

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

サンプル2

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

サンプル3

<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>

サンプル3のプレビュー

サンプル4

<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>

サンプル4のプレビュー

サンプル5

<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>

サンプル5のプレビュー

他のマークアップ

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

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

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

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

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

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

この記事へのコメント
勉強になります。
以前この種のレイアウトのマークアップに頭をひねったことがあるもので…↓
http://d.hatena.ne.jp/cyokodog/20080704/1215020961

ちなみに
* html .box ul.samp01 li{height:1%;}
としてるのは、liに子要素の高さを与えるためのIE向け処置かと思いますが、
zoom:1
とした場合と何か違いっていうのはあるのでしょうか?

あと1つ前のエントリでも書かれてますが、float要素をinline化してる事にはどんな意味があるのでしょうか?
Posted by cyokodog at 2008年11月12日
>cyokodogさん
リンク先のエントリーを読みました。
clearfixとかを使うよりもoverflowの方が楽ですね。
ちょうどCSS HappyLifeでエントリーされていたので、
ここでもちょっぴり使っちゃおうってことで使いました。
http://css-happylife.com/log/css-template/000730.shtml

ちなみに、zoom:1とheight:1%の違いですが、特にありません。
有名なhasLayoutをtrueにしていることにどちらも違いありませんので。
zoomでも問題ないのですが、Validatorでエラーになるので、
個人的に使っていないだけです。
hasLayoutについてはcolissさんのところでまとまっていましたのでご紹介
http://coliss.com/articles/build-websites/operation/css/143.html

そしてfloat要素をinline化についてですが、IEのmargin倍化対策として、習慣として入れているだけです。
今回のサンプルでは特に意味をなしていないのですが、
これを利用して他のサイトに組み込むような場合の時のためにあらかじめ入れておいているのです。
Posted by ハム at 2008年11月12日
>そしてfloat要素をinline化についてですが、IEの>margin倍化対策として、習慣として入れているだけです。
なるほどー。
inlineにすると倍化されないってことですね!知りませんでした。
IEはほんとやっかいですね。
丁寧なご説明ありがとうございます。
Posted by cyokodog at 2008年11月12日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/109523918
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。