第36回 CSSでリストをグリッド状に並べるテーブルレイアウトを卒業しよう
CSSでリストをグリッド状に並べる
画像などのボックスをCSSでグリッド（格子）状に並べる方法です。table要素は使わず、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要素の個数を決める」です。
* {
margin: 0;
padding: 0;
}
#grid {
width: 450px;
}
li {
margin: 5px;
float: left;
list-style: none;
}
今回はdiv要素を用意して幅を固定しましたが、ul要素で幅を固定してもOKです。
親要素の幅と、li要素の幅+marginを割り算して、1行あたりにli要素をいくつ表示するかを計算します。
グリッド状に表示する写真ギャラリーのようなものも簡単に作ることができますね！
では次回もお楽しみに。（こう
）
お問い合わせ
メルマガ