CSS3を使ってリストなどをゼブラ柄してしまおうというテクニックをエントリーします。
名付けて『CSS3 ZEBRA STRIPING』。まんまですね…
まずはデモページを用意しましたのでご覧になってください。
ゼブラ柄リストの作り方
ボディー内に以下のコードを書き込みます。いたってシンプルな普通のリストです。
[html]
<ul>
<li>リスト1項目</li>
<li>リスト2項目</li>
<li>リスト3項目</li>
<li>リスト4項目</li>
<li>リスト5項目</li>
<li>リスト6項目</li>
<li>リスト7項目</li>
<li>リスト8項目</li>
<li>リスト9項目</li>
<li>リスト10項目</li>
</ul>
[/html]
次は、このシンプルなリストの奇数番のリストタグ（<li>）に対してCSSでスタイリングします。
[css]
li:nth-child(2n+1) {
background: #FFF;
}
[/css]
なんとこれだけ！
このテクニックだと、何百項目もの長いリストがある場合や、リストの項目数が動的に変化するサイトにも対応できます。
この便利な『nth-child』は今回使ったリストタグ（<li>）だけでなく、その他のHTMLタグや、適用するクラスの内容（スタイル）も背景色以外のものに変えることによって、いろいろと汎用性はあるのでアイデア次第でいろいろ出来ると思います。
nth-child(10n+1)で10個おきとか、nth-child(7n+1)はカレンダーとかに使えそう。デモページではコメント欄に応用しています。
それにしても、デモページのコメント欄は、偶数番目のスタイルを変えてるからほんとは『nth-child(2n)』じゃないといけないんだけど、何でか『nth-child(2n+1)』で偶数番目のスタイルが変わるって言うのは秘密の話。
コメントを残す