CSSスキル - 第8章 Lesson5

nth-child擬似クラスを使って見やすいテーブルを作ろう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

nth-child擬似クラスを使って、見やすいテーブルを作ってみましょう。
ここでは奇数行目のテーブルに背景の色を設定し、見やすいテーブルへと改善していきます。



この動画で学べること

・擬似クラスを使ってテーブルを作成する方法



擬似クラスを使ってテーブルを作成する方法

今まで学んだ擬似クラスを使って、見やすいテーブルを作ってみましょう。
まずはテーブルのタイトル部分、<th>タグにスタイルをかけていきます。
文字色、太さ、背景色の設定をしていきましょう。


th {
color: #526A36;
font-weight: bold;
text-align: center;
padding: 5px;
background-color: #CFE7B3;
}



次に、表を囲んでいる<td>タグにスタイルをかけていきましょう。
内側の余白をとり、下と右に1pxずつの境界線を作ります。



td {
padding: 5px;
border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
}



保存してブラウザで見てみましょう。
表に近づいてきていますね。
本来であれば、隣の要素の境界線同士が重なってしまい太くなるのですが、すでにCSSに書いてあるtableタグのborder-collapse: collapse;というもののおかげで、境界線の重なりがなくなっています。



最後に<tr>タグの「Chrome」と「Safari」の部分の背景色をnth-child(n)を使って 変えてみます。
「Chrome」は<tr>タグの子要素の3番目なのでnth-child(3)、「Safari」は<tr>タグの子要素の5番目なのでnth-child(5)と指定します。



table tr:nth-child(3) {
background-color: #F0F9E4;
}


table tr:nth-child(5) {
background-color: #F0F9E4;
}



保存してブラウザで見てみましょう。
上手くいっていますが、行が増えていくたびに一つ一つCSSを増やしていくのは大変なので、変更するパターンを決めてあげましょう。
例えばこのように書くと、奇数番目の要素を指定してスタイルをかけることができます。




table tr:nth-child(2n+1) {
background-color: #F0F9E4;
}



また、他の指定方法には以下のようなものもあります。
ぜひマスターして、使い分けられるようになってください。