「高さを揃えるCSSを利用した横並びリスト」の夏がやってくる
タイトルはホッテントリメーカーで生成。
「リストを横並びにし、背景を付け、高さを揃える」こんなデザインが有ったり無かったりする訳ですが、リスト（ul+li）で実装しようとすると結構面倒だったり。
というわけで、高さの異なるカラムを揃えるスタイルシートを利用して上の条件を満たしたリストを考えてみたいと思います。
背景色のみ
背景色（画像）のみであれば比較的簡単に実装できると思います。
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
コード
<ul class="example-01">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
<ul class="example-01">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
.example-01 {
padding: 0;
list-style: none;
overflow: hidden;
}
.example-01 li {
float: left;
width: 200px;
margin: 0 20px -32768px 0;
padding: 0 0 32768px;
background: #CEDBEA;
}
問題点
列ごとに包含要素を分けるため、本来同じグループに属するはずのリストが途中で別のリストになってしまう（問題点かどうかは微妙）。
ボーダー付き
背景色のみをベースにボーダーを付ける。実装にはかなり制限があります。
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
コード
<ul class="example-02">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
<ul class="example-02">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
.example-02 {
width: 600px; /* 200px * 3 */
padding: 0;
border-bottom: 1px solid #00F;
border-left: 1px solid #00F;
list-style: none;
overflow: hidden;
zoom: 1; /* Clearfix for IE */
}
.example-02 li {
float: left;
width: 199px; /* ボーダーと合わせて200px */
margin: 0 0 -32768px;
padding: 0 0 32768px;
border-top: 1px solid #00F;
border-right: 1px solid #00F;
background: #CEDBEA;
}
問題点
- liにマージンを指定すると下のボーダーが気まずい雰囲気。
- 個別で幅を指定しないと、横並びの数が違う時にボーダーがはみ出る。
3. ボーダー付き（ulをdivで括るver）
ボーダー付き でのliにマージンが指定出来ない問題を、下のボーダーを画像にする事でクリアしたパターンです。
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
コード
<div class="example-03">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</div>
<div class="example-03">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
</div>
.example-03 {
width: 660px;
margin: 0 0 20px;
padding: 0 0 1px;
background: url('files/css_fix_height_list/border.gif') 0 100% no-repeat;
}
.example-03 ul {
margin: 0;
padding: 0;
overflow: hidden;
zoom: 1; /* Clearfix for IE */
}
.example-03 li {
float: left;
width: 198px; /* ボーダーと合わせて200px */
margin: 0 20px -32768px 0;
padding: 0 0 32768px;
list-style: none;
border: 1px solid #00F;
background: #CEDBEA;
}
デモではリスト3つ分の画像にしていますが、ボーダーとマージンを合わせた1つ分の画像を横方向も繰り返す感じでも行けます。
問題点
- 幅が変わったらイチイチ画像を作らないといけない。
- 個別で幅を指定しないと、横並びの数が違う時に画像がはみ出る(デモ参照)
まとめ
何だか色々考えてる内に微妙な感じになってきました。
全てのパターンを通して、レイアウト目的でのマークアップになるので、どうしても実装しなくてはいけない時のみに使うのが良さそうです。
IE6とIE7がdisplay:table-cell;に対応していればもっと楽に出来るんですけどね。