2011/07/25これまで、リストを装飾するために「li」タグにクラスを指定していました。リストのマークを画像にする、下線をつける、一つ置きに背景を変えるなど、リストはデザインバリエーションの高い要素です。これら細かい要望を実現するために、これまではクラスを指定して実装していました。繰り返し要素に条件に応じてクラスを指定するという事は、CMSなど動的に組み込むために一手間必要という点で、めんどくささがありました。そこで、今回はクラスを指定せずにCSS3のみで実装してみます。ちなみにIEなどCSS3に対応していないブラウザでは利用できません。以下はベースとなるサンプルリストのソースです。装飾のために、特別なクラスは指定しません。<ul><li>サンプル1</li><li>サンプル2</li><li>サンプル3</li><li>サンプル4</li><li>サンプル5</li></ul>サンプル1サンプル2サンプル3サンプル4サンプル5最初の要素または最後の要素を装飾する一番上、または、一番下の要素を装飾する場合は「:first-child」と「:last-child」を使用します。以下のようにスタイルに記述すると、最初の要素のみフォントを大きくして、最後の要素のみに背景色を指定することができます。#ffaaaa;}サンプル1サンプル2サンプル3サンプル4サンプル5liタグを下線処理した時に、最後の要素だけ下線なし、といった場面に多く出会いますが、そのときに重宝しそうですね。偶数・奇数行目の要素を装飾する偶数行目、または、奇数行目の背景色を変えてゼブラ調にし、リストを見やすくする手法がよく使われますが、セレクタ「:nth-child」を使うことで簡単に実現できます。1番目、3番目、5番目というように奇数行目の背景色のみ変えたい場合には、以下のようにします。#aaaaaa;}サンプル1サンプル2サンプル3サンプル4サンプル5CSS3をうまく活用すれば、HTMLタグに無駄にclassを指定する必要がなくなるので、ソースがすっきりします。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。