リストの数が可変の場合に対応したCSSで作る2列のリストサンプル

プログラムで表示されるテンプレートの場合など、リスト「li」の数が決まってい場合があります。
そのような場合でも、きれいにCSSだけで2列のリストを表示させることができるCSSのサンプルを作ってみました。

なお、nth-last-of-type(その種類の最後からn番目の要素に適応)など、ie8以下に適応されないスタイルを利用していますので、見た目もそうですが、スマートフォンでの利用を意識して作成したサンプルです。

完成形のCSSリスト

完成形はこのような形で、奇数の場合でもきれいに表示できます。

リスト1つの場合

list1

リスト2つの場合

list2

リスト3つの場合

list3

リスト4つの場合

list4

リスト5つの場合

list5

リスト6つの場合

list6
と、きれいに表示できています。

可変を意識しながらリストを作るありがちな失敗例

数が増えた時に、borderが重なってしまったり、

list11

奇数の時にborderが切れてたりします。

list13

ポイントはliのborderの使い方です。

サンプルのCSSに簡単に説明を入れてみます。

特に最後から2つめの下が奇数の場合はborderをつける部分がポイントです。

実際のソースはこちら

HTML


CSS

スマートフォンでの地域選択など、いわゆるカテゴリーを選択するsectionでの利用になどに適していそうなリスト表示です。

注意するのは、テキストが2行になる場合は、高さがずれてしまうので、どうしても2行になる場合は、高さを合わせるCSSを指定するか、heightLine.jsのような、JSでliの高さを揃える処理を入れる必要があります。

CSSで作る可変リストのサンプルでした。

スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)

価格:¥ 2,940

最後に今欲しい本の紹介。
レスポンシブWebデザイン、デバイスの特性や機能の判定、ビューポートの設定、高解像度デバイスへの対応などを解説している本のようで、スマートフォン制作が多くなってきたら購入して読まなきゃーと思っています。
ネットでも知識は得られますが、体系的にまとめてくれている書籍は短い時間で知識を増やせるのがいいですね。