今と昔のテーブルを行ごとに色変えするパターン

はじめに

社内向けの管理システムなどでtableを使ってデータを一覧表示させる時、見やすくなるように「行ごとに色変えをする」という事が多いと思います。今時を知っていればtableの行ごとの色変えはCSSで書きますが、知らなければ昔ながらの書き方をしてしまいます。今と昔の行の色変えの書き方を比較してみたいと思います。
※コードはPHPを例にしています。

昔ながらの色変え

<table>
<?php
for ($i=1; $i<10; $i++) {
  $bgcolor = "ffffff";
  if ( $i % 2 === 0) {
    $bgcolor = "c0c0e0";
  }
?>
<tr style="background-color: <?php echo $bgcolor; ?>;">
 <td>hoge</td>
 <td>fuga</td>
</tr>
<?php
}
?>
</table>

2,4,6...と、2の倍数の行の時に色を変える昔ながらのコードです。
定数やクラスなどの設計によっては、どんな値が入ってくるのか想像できなくなってしまったり、管理画面などの場合は多くの条件分岐が入って見通しの悪いコードになってしまいます。

今時の色変え

<style>
/* 3行目から2行ごとに色を当てる */
tr:nth-child(2n+3) {
  background-color: #88a2fb;
}
</style>
<table>
<?php
for ($i=1; $i<10; $i++) {
?>
<tr>
  <td>hoge</td>
  <td>fuga</td>
</tr>
<?php
}
?>
</table>

コードによる色変えではなく、CSSの「nth-child」を使用します。
もちろん、管理画面によくある「この値の時だけは赤色にする・・・」というような例外は発生すると思いますが、CSSは適用される優先順位が決まってますので応用を効かせる事は可能と思います。なにより1つでも条件分岐や変数が減らせる事にメリットがあると思います。

CSS nth-child について

「nth-child」は「疑似クラス」と言いいます。全てにCSSを適用するのではなく適用する要素を引数で指定して選択する事ができます。（2つ目、4つ目...など。引数は「1」からはじまる。）
※「疑似クラス」は「nth-child」以外にも複数存在します。

「nth-child」の構文

tr:nth-child( [引数] ){
  ...
}

[引数]は数字以外に定数や計算式を入れる事ができます。

◆定数（キーワード値）
odd 奇数（1,3,5...）
even 偶数（2,4,6...）
◆計算式
An Aは刻み値（2nであれば偶数と同じく「2,4,6...」3nであれば「3,6,9...」となります）
An+B Bは加算値（2n+3 3番目から開始する）
※2n+1とすると1,3,5...行目と 開始位置B から A間隔 となります。

最後に

私は「行の色変えはコードで切り替える」というのが当たり前の時代を生きてきたので、改めて確認すると html/css/js の進化に追いついていけていない部分を感じました。行の色変えにしても今でも新規に昔ながらのコードは使われており「動けば正義」みたいな事を言う人も多く居ます。しかし、そのようなコードはすぐにレガシーと呼ばれる事になりますので、少しでも良いコードを書けるように精進したいと思います。

参考

MDN Web Docs :nth-child()
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child)