【CSS3】nth-childを使ってtableを装飾する


【CSS3】nth-childを使ってtableを装飾する


イレギュラーなケース

CSS3で追加された疑似クラスnth-childによって複雑な装飾をシンプルにまとめる事が可能になりました。
今回はnth-childを使ってテーブルを装飾してみます。

スポンサーリンク

【CSS3】nth-childを使ってコードをすっきりさせることができる

サンプル1:奇数行は赤、偶数行は青…と交互にセルを着色する。

赤・青と交互に行を着色したい時は、シンプルな記述でOK。
【CSS3】nth-child:行を交互に着色する
一行目のthは、グレーを指定しています。
よってnth-childが反映されているのは2行目の青からとなっています。

[html]tableを作る

[CSS]tableの基本スタイルを指定

まず、テーブルに以下のようなスタイルを適用しておきます。テーブルの基本スタイルとし、これにnth-childで装飾を加えます。

[CSS]nth-childで装飾

nthの前に「tr:」と付ける事で、trへのスタイルであることを明示しています。2n+1は奇数、2nは偶数行のスタイルです。
【CSS3】nth-child:偶数行と奇数行の記述

サンプル2:1列目はグレー、項目Aは青、項目Bは赤に着色

列ごとに色を変える

項目Aは青、項目Bは赤に着色します。
sample01は「行」へのスタイルでしたが、今度は「行と列」になります。

table及びtableの基本スタイルはsample01と同じなので省略します。nth-childのスタイルは以下の通り。

[CSS]nth-childで装飾

td:nth-child(1){ background:#f1f1f1;}で1列目をグレーに指定。td:を付ける事によりtdへのクラスを指定。()内の数値は列番号です。
項目A、Bへの着色はサンプル1で指定したtrのスタイルと組み合わせています。

サンプル3:途中から法則性が変わる場合

1~5行目までと6行目以降で法則が変わる場合。
途中からパターンが変わる場合

1 列目はずっと背景色グレーなので「td:nth-child(1)」で指定。
1~5列目までの2列目は青なので「tr:nth-child(-2n+4) td:nth-child(2){ ~」で指定。
3列目は「tr:nth-child(-2n+5) td:nth-child(3){~ 」で赤を指定。
6行目以降は列の配色が逆になるので、新たにスタイルを指定しています。
「tr:nth-child(2n+6) 」で6行目以降、「tr:nth-child(2n+7)」で7行目以降になります。

サンプル4:一部だけイレギュラーな色にする

サンプル3のテーブルに更に装飾を加えて、一部だけ黄緑にします。
イレギュラーなケース

記述方法はこれまでと同じ。「tr:nth-child(4)」でtrの4行目を指定。「td:nth-child(2)」でtdの2列目になります。

和風デザイン勉強会


Be the first to comment

Leave a Reply

Your email address will not be published.


*


CAPTCHA