AboutデジタルIT・インターネットホームページ作成CSS3とはCSSのnth-childで偶数/奇数行などn番目を装飾する方法ホームページ作成/CSS3とはCSSのnth-childで偶数/奇数行などn番目を装飾する方法リストやテーブル(表組み)など多数の項目が連続する要素は、1行おきに装飾を分けると見やすくなります。CSSのnth-child疑似クラスを使えば、偶数行(=2の倍数番目)だけの装飾、奇数行(=2の倍数+1番目)だけの装飾などを簡単に指定できます。表なら「n番目の列」のように列単位で色分けするのも簡単です。そのほか、先頭だけ、先頭から5つだけ、3個おき(=3の倍数)、最後から2番目だけ、最後だけ......など柔軟に指定できて便利です。数番目だけに適用するスタイル奇数番目だけに適用するスタイルなどのように、任意の規則で一部分だけに異なる装飾を施す方法がCSSには用意されています。それが、nth-child疑似クラスです。図のように短い記述で実現できる便利なCSSです。■1行おきに異なる背景色を加えるCSS例えば下図のように、行数の多い表や項目数の多いリストでは、1行ごとに色分け表示すると見やすくなります。このような装飾は、昔ならHTML側で各行にclass属性を付加しなければ実現できませんでした。CSS3で追加されたnth-child疑似クラスを使えば、HTMLソース側に何も書き加えることなく、CSSソース側の記述だけでこのような装飾が作れます。表やリストの装飾を、偶数行と奇数行とで1行おきに変化させると見やすくなる■倍数や指定箇所など、装飾対象の位置を柔軟に指定可能このnth-child疑似クラスを使って実現できるのは、交互に装飾を切り替えるだけではありません。「3つおき」・「4つおき」のように任意の倍数を指定したり、「最初のみ」・「先頭から3つ」・「最後から4つ」・「5番目のみ」などのように任意の場所を指定することもできます。上図は、後述のサンプルページを表示した例です。先頭行と最終行だけを個別に装飾......となっています。これらの装飾はすべて、HTML側にclass属性などを加えることなく、CSS3のnth-child疑似クラスを使うだけで実現しています。奇数番目では「四角枠」に偶数番目では「丸枠」になっていました(下図参照)。このように、装飾対象はリスト項目や表などに限りません。div要素やp要素などで作るブロックも、順序に応じて装飾を変えられます。1行おき」や「先頭から3つだけ」などのような一定の規則で簡単に装飾できます。今回は、このnth-child疑似クラスの簡単な書き方を、表示例と共にご紹介いたします。それでは次のページから、nth-child疑似クラスの具体的な記述方法を見てみましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。