「高さを揃えるCSSを利用した横並びリスト」の夏がやってくる

基本事項

今回考えるのは、背景色のみ指定する形を基本にした以下の3パターン。

1. 背景色のみ(基本形)
2. ボーダー付き
3. ボーダー付き (ulをdivで括るver)

この記事では、各パターンの実装方法と問題点を中心に説明していきます。実際の表示とソースコードはデモページを参照して下さい。

デモページ

1. 背景色のみ

背景色(画像)のみであれば比較的簡単に実装できると思います。

実装方法

• 高さの異なるカラムを揃えるCSSを指定
• 列ごとにliの包含要素(ulやol)を分ける
• liをfloatして背景色(画像)を付ける

問題点

列ごとに包含要素を分けるため、本来同じグループに属するはずのリストが途中で別のリストになってしまう(問題点かどうかは微妙)。

デモ:1.背景色のみ

2. ボーダー付き

背景色のみをベースにボーダーを付ける。実装にはかなり制限があります。

実装方法

• [1.背景色のみ]をベースにする
• 包含要素(ulやol)の上と左にボーダー(とIE用にzoom:1;)を指定
• liのマージンを無くし、上と右にボーダーを指定

問題点

• liにマージンを指定すると下のボーダーが気まずい雰囲気。
• 個別で幅を指定しないと、横並びの数が違う時にボーダーがはみ出る(デモ参照)

デモ:2.ボーダー付き

3. ボーダー付き (ulをdivで括るver)

[2.ボーダー付き]でのliにマージンが指定出来ない問題を、下のボーダーを画像にする事でクリアしたパターンです。

実装方法

• [1.背景色のみ]をベースにする
• 直接の包含要素(ulやol)にIE用のzoom:1;を指定
• liにボーダー(と幅を空ける場合はマージン)を指定
• liで指定したボーダーやマージンと合うように画像を作る

画像の説明が難しいので、デモページ及びborder.gifを直接参照して下さい。

※デモではリスト3つ分の画像にしていますが、ボーダーとマージンを合わせた1つ分の画像を横方向も繰り返す感じでも行けます。

問題点

• 幅が変わったらイチイチ画像を作らないといけない。
• 個別で幅を指定しないと、横並びの数が違う時に画像がはみ出る(デモ参照)

3.ボーダー付き (ulをdivで括るver)

まとめ

何だか色々考えてる内に微妙な感じになってきました。

全てのパターンを通して、レイアウト目的でのマークアップになるので、どうしても実装しなくてはいけない時のみに使うのが良さそうです。

IE6とIE7が display:table-cell; に対応していればもっと楽に出来るんですけどね。

タイトルについて

ホッテントリメーカーが面白かったので早速使ってみました。なので、この記事のタイトルが若干いつもと違うのは仕様です。