ウェブサイトを制作していると表のデザインに悩むことってないでしょうか？
表をどんなデザインをしたらいいのか、他のウェブサイトを見たりして参考にしている方も多いことと思います。
ウェブサイト制作の初心者の方であれば、そんな疑問を日々持ちながら、スキルアップを目指し、頑張って勉強していることと思います。
そこで、今回はよく見かける1行おきに背景の色が違う表に焦点を当ててみたいと思います。
1行おきに背景の色を変えると表はグッと見やすくなります。
また、配色をキレイにすれば、ガラッと印象を変えるインパクトのある表を作成できるでしょう。
この1行おきに背景の色を変えるには、CSSの「疑似クラス」っていうのを使います。
1行おきに背景の色を変えるスタイルを適用してもよいでしょうが、「疑似クラス」を使えば、効率的にCSSを書くことができます。
最後まで、どうぞお付き合いください。
疑似クラスとは
まず、疑似クラスとはいったい何でしょうか？
疑似クラスとは、CSSのセレクタに付加するキーワードのことを言います。
セレクタの後ろにコロン（:）を付け、さらにその後ろにキーワードを書くことで疑似クラスを使っていきます。
じゃあ、疑似クラスというキーワードを使うと何ができるのでしょうか？
疑似クラスを使うと、対象の要素が特定の状態におけるスタイルを指定することができるようになるのです。
では、「対象の要素が特定の状態におけるスタイルを指定する」とはどういうことでしょうか？
セレクタの後ろに「:hover」と書かれたスタイルを見たことありませんか？
この「:hover」、主にリンクを張るためのアンカータグ（aタグ）に使われます。
「:hover」は、対象の要素の上にマウスポインタを置いた時（特定の状態）のスタイルを指定することができます。
下にわかりやすい例を挙げてみましたのでご覧ください。
まずはHTML。
<a href="#">サンプルリンク</a>次にこんなCSSです。
a:hover {
color: #0000FF;
}上の例では、「サンプルリンク」という文字（対象の要素）の上にマウスポインタを置く（特定の状態）と、文字の色が「青」（指定したスタイル）に変わります。
「対象の要素が特定の状態におけるスタイルを指定する」とはこういうことです。
疑似クラスの働きと効果がおわかりいただけたでしょうか？
さまざまな疑似クラスがありますが、これらを使いこなすことで、デザインの幅が一気に広がります。
そんな疑似クラスの中で、今回、詳しく解説するのは「:nth-child()」という疑似クラスです。
その他疑似クラスの種類についての説明は割愛しますが、余裕があれば、どんどん覚えていくことをおすすめします。
疑似クラス「:nth-child()」について
疑似クラス「:nth-child()」は同じ階層で連続して同じタグが並んでいるときに使います。
例えば、テーブルのtdタグやtrタグ、リストのliタグなどで使います。
簡単な例を挙げてみます。
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>ul li:nth-child(3){
color: #0000FF;
font-weight: bold;
}下はその結果のリストです。
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
この例では、疑似クラス「:nth-child()」のカッコ内に値「3」を指定しています。
こうすることで、3番目の要素にのみ、スタイルを適用することができるのです。
上の例では3番目のli要素「リスト3」だけ、太字で文字色を「青」に変えています。
疑似クラス「:nth-child()」を使えば、対象の子要素のうちカッコ内の値で指定する要素にスタイルを適用することができます。
それでは、カッコ内にはどんな値を指定できるのでしょうか？
主な値の例を以下に挙げておきます。
| :nth-child(1) | 1番目、つまり最初の要素を表します。「:first-child」という疑似クラスと同じ意味になります。 |
| :nth-child(5) | 5番目の要素を表します。 |
| :nth-child(5n) | 5の倍数番目（5番目、10番目、15番目…）の要素を表します。 |
| :nth-child(n+5) | 5番目以降すべての要素を表します。 |
| :nth-child(odd) | 奇数番目の要素を表します。:nth-child(2n+1)と書いても同じ意味になります。 |
| :nth-child(even) | 偶数番目の要素を表します。:nth-child(2n)と書いても同じ意味になります。 |
「n」というのは、「n番目」に該当する要素を表しています。
「n」という任意の値を使うことで、さまざまな値を表現できるようになっています。
中学校で習った数式に通じるものですよね。
こういった場面でも中学校で習った数学は役に立っているんですね。
見やすい表を作成する
それでは、今回の記事の本来の目的でもある「1行おきに背景を変えた見やすい表」を疑似クラスを使って作成してみましょう。
<table class="sample">
<tr>
<td>No1</td>
<td>サンプル1</td>
</tr>
<tr>
<td>No2</td>
<td>サンプル2</td>
</tr>
<tr>
<td>No3</td>
<td>サンプル3</td>
</tr>
<tr>
<td>No4</td>
<td>サンプル4</td>
</tr>
<tr>
<td>No5</td>
<td>サンプル5</td>
</tr>
<tr>
<td>No6</td>
<td>サンプル6</td>
</tr>
</table>上のような6行ある表のHTMLがあったとします。
この表に対し、CSSの疑似クラスを使って偶数行のみ背景色を変えてみます。
.sample tr:nth-child(even) {
background-color: #888888;
}あるいは
.sample tr:nth-child(2n) {
background-color: #888888;
}結果、下の表のようになります。
| No1 | サンプル1 |
| No2 | サンプル2 |
| No3 | サンプル3 |
| No4 | サンプル4 |
| No5 | サンプル5 |
| No6 | サンプル6 |
2行目、4行目、6行目の背景がグレーになっています。
また、CSSの疑似クラスを使って奇数行のみ背景色を変える場合は、下のようにすればよいのです。
.sample tr:nth-child(odd) {
background-color: #888888;
}あるいは
.sample tr:nth-child(2n+1) {
background-color: #888888;
}もちろん、1行ずつスタイルを適用して背景色を変えていくのもありでしょう。
ただ、その場合はスタイルを適用させるすべてのtrタグにクラス名を書かなければなりません。
子要素全てを対象にできる疑似クラス「:nth-child()」を使えば、そんな手間をかけずに、効率よくCSSを書くことができます。
まとめ
疑似クラス「:nth-child()」の使えば、効率よくCSSを書くことができ、それでいて幅広いデザインに対応できるようになるでしょう。
今回は表を見やすくすることに絞って、解説してきましたが、余裕があれば、他の疑似クラスもマスターして使っちゃいましょう。
こんな偉そうなことを言っている私もまだまだ、勉強しなければならないことはたくさんあります。
お互い、さらなるスキルアップ目指して頑張っていきましょう。
最後まで読んでいただき、ありがとうございました。
