リストの数が可変の場合に対応したCSSで作る２列のリストサンプル
よく読まれている記事
プログラムで表示されるテンプレートの場合など、リスト「li」の数が決まってい場合があります。
そのような場合でも、きれいにCSSだけで２列のリストを表示させることができるCSSのサンプルを作ってみました。
なお、nth-last-of-type（その種類の最後からn番目の要素に適応）など、ie8以下に適応されないスタイルを利用していますので、見た目もそうですが、スマートフォンでの利用を意識して作成したサンプルです。
完成形のCSSリスト
完成形はこのような形で、奇数の場合でもきれいに表示できます。リスト1つの場合
リスト2つの場合
リスト3つの場合
リスト4つの場合
リスト5つの場合
リスト6つの場合
と、きれいに表示できています。
可変を意識しながらリストを作るありがちな失敗例
数が増えた時に、borderが重なってしまったり、
奇数の時にborderが切れてたりします。
ポイントはliのborderの使い方です。
サンプルのCSSに簡単に説明を入れてみます。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
li { //リストの頭を消す list-style: none; //並べる float: left; //幅を半分にする width: 50%; min-width: 130px; //高さがズレないように決め打ち、テキストを真ん中にする height: 45px; line-height: 45px; //右border、下border border-right: 1px solid #999; border-bottom: 1px solid #999; //borderを幅に含める -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } //奇数の右borderを消す li:nth-child(even) { border-right: none; } //最後の下border、最後から２つ目の下borderを消す li:nth-last-child(1), li:nth-last-of-type(2) { border-bottom: none; } //最後から２つめの下が奇数の場合はborderをつける li:nth-last-of-type(2):nth-child(even) { border-bottom: 1px solid #999; } //リンクにスタイルをつける li a { display: block; padding-left: 15px; height: 45px; color: #333; font-weight: bold; font-size: 14px; } |
特に最後から２つめの下が奇数の場合はborderをつける部分がポイントです。
実際のソースはこちら
HTML|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="lite.css" type="text/css" /> </head> <body> <ul> <li><a href="#">ほげほげ</a></li> <li><a href="#">ほげほげ</a></li> <li><a href="#">ほげほげ</a></li> <li><a href="#">ほげほげ</a></li> <li><a href="#">ほげほげ</a></li> <li><a href="#">ほげほげ</a></li> </ul> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
/*Reset Style*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, textarea, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; font-size: 100%; } /*base*/ body { line-height: 1.231; color: #333; font-family: sans-serif; font-family: 'MS PGothic', arial, sans-serif\0/; font-size: 13px; } a:link, a:visited, a:hover, a:active, a:focus { color: #333; text-decoration: none; } /*list*/ ul { margin: 10px ; border: 1px solid #999; border-radius: 10px; } ul:after { content: ""; display: block; clear: both; } li { list-style: none; float: left; width: 50%; min-width: 130px; height: 45px; line-height: 45px; border-right: 1px solid #999; border-bottom: 1px solid #999; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } li:nth-child(even) { border-right: none; } li:nth-last-child(1), li:nth-last-of-type(2) { border-bottom: none; } li:nth-last-of-type(2):nth-child(even) { border-bottom: 1px solid #999; } li a { display: block; padding-left: 15px; height: 45px; color: #333; font-weight: bold; font-size: 14px; } |
注意するのは、テキストが２行になる場合は、高さがずれてしまうので、どうしても２行になる場合は、高さを合わせるCSSを指定するか、heightLine.jsのような、JSでliの高さを揃える処理を入れる必要があります。
CSSで作る可変リストのサンプルでした。
スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)
価格：￥ 2,940
最後に今欲しい本の紹介。
レスポンシブWebデザイン、デバイスの特性や機能の判定、ビューポートの設定、高解像度デバイスへの対応などを解説している本のようで、スマートフォン制作が多くなってきたら購入して読まなきゃーと思っています。
ネットでも知識は得られますが、体系的にまとめてくれている書籍は短い時間で知識を増やせるのがいいですね。