第36回 CSSでリストをグリッド状に並べるテーブルレイアウトを卒業しよう

CSSでリストをグリッド状に並べる

画像などのボックスをCSSでグリッド(格子)状に並べる方法です。table要素は使わず、CSSのみで実現します。

完成品はこんな感じ。

CSSでリストをグリッド状に並べる(完成品)

これは、CSSを適用する前はこうなっています。

CSSでリストをグリッド状に並べる(CSS適用前)

XHTMLはこんな感じ。

<div id="grid">
<ul>
<li><img src="box.jpg" width="80" height="80" /></li>
<li><img src="box.jpg" width="80" height="80" /></li>
<li><img src="box.jpg" width="80" height="80" /></li>
<li><img src="box.jpg" width="80" height="80" /></li>
....
</ul>
</div>

「一覧表示」という意味では、やはりリストでマークアップするのがしっくりきます。

以前、「CSSでリストを横並びのメニューにする」という記事で、リストを単純に横に並べるテクニックを紹介しました。

この記事ではdisplayプロパティを使ってliの表示をインライン要素に変えています。

今回もそれが使えそうですが、「インライン要素には上下のmarginが設定できない」ため、配置をこまかく調整しようとした際に不便です。

そこで、今回はfloatプロパティを使ってli要素を横並びに表示します。

ポイントは「親要素の幅を固定して、1行あたりに表示されるli要素の個数を決める」です。

3mincss27_grid_list.png

* {
margin: 0;
padding: 0;
}

#grid {
width: 450px;
}
li {
margin: 5px;
float: left;
list-style: none;
}

今回はdiv要素を用意して幅を固定しましたが、ul要素で幅を固定してもOKです。

親要素の幅と、li要素の幅+marginを割り算して、1行あたりにli要素をいくつ表示するかを計算します。

グリッド状に表示する写真ギャラリーのようなものも簡単に作ることができますね!

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
IE6よさらば
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読