【CSS】表(table)の行の背景色を規則的につける方法(コピペOK)

はじめに

記事中に表を作るとき、行ごとに背景色をつけたい場合がありますよね。

例えば、次の画像のように、偶数行をオレンジ色にしたり……

偶数行をオレンジ色にした表

次の画像のように、奇数行を水色にしたり……

奇数行を水色にした表

次の画像のように、偶数行をオレンジ色にして奇数行を水色にしたり……ですよね。

奇数行を水色に、偶数行をオレンジ色にした表

そこで、この記事では、CSSを使ってtableの行の背景色を規則的につける方法を説明します。

前半部分はコード(例)を掲載し、後半部分はコード中の規則性の考え方を説明します。コードはもちろんコピペOKです。あなたの記事の表のデザインに役立ててください。

tableの行の背景色を規則的につけるCSSの例

表の標準の背景色は「白色(#ffffff)」として説明します。

お手数をおかけしますが、色については「HTMLカラーコード」などで検索してください。

偶数行に色をつけるCSS

/*2n-1は1行め、3行め、5行め……。*/
table tr:nth-child(2n-1) td
{
  background-color:#ffffff;
}

/*2nは2行め、4行め、6行め……。*/
table tr:nth-child(2n) td
{
  background-color:#faac58;
}

#ffffffは白色で、#faac58はオレンジ色なので、表の背景色は次のようになります。

偶数行をオレンジ色にした表

偶数行(2n)がオレンジ色になっていることがわかります!

コピペのあとは、カラーコード(#~)の部分を好きなように変更してください。

奇数行の色をつけるCSS

/*2n-1は1行め、3行め、5行め……。*/
table tr:nth-child(2n-1) td
{
  background-color:#58acfa;
}

/*2nは2行め、4行め、6行め……。*/
table tr:nth-child(2n) td
{
  background-color:#ffffff;
}

#58acfaは水色で、#ffffffは白色なので、表の背景色は次のようになります。

奇数行を水色にした表

奇数行(2n-1)が水色になっていることがわかります!

コピペのあとは、カラーコード(#~)の部分を好きなように変更してください。

偶数行にも奇数行にも色をつけるCSS

/*2n-1は1行め、3行め、5行め……。*/
table tr:nth-child(2n-1) td
{
  background-color:#58acfa;
}

/*2nは2行め、4行め、6行め……。*/
table tr:nth-child(2n) td
{
  background-color:#faac58;
}

#58acfaは水色で、#faac58はオレンジ色なので、表の背景色は次のようになります。

偶数行をオレンジ色に、奇数行を水色にした表

奇数行が水色に、偶数行がオレンジ色になっていることがわかります!

コピペのあとは、カラーコード(#~)の部分を好きなように変更してください。

3行のローテーションで色をつけるCSS

/*3n-2は1行め、4行め、7行め……。*/
table tr:nth-child(3n-2) td
{
  background-color:#58acfa;
}

/*3n-1は2行め、5行め、8行め……。*/
table tr:nth-child(3n-1) td
{
  background-color:#faac58;
}

/*3nは3行め、6行め、9行め……。*/
table tr:nth-child(3n) td
{
  background-color:#58fa58;
}

#58acfaは水色で、#faac58はオレンジ色で、#58fa58は黄緑色なので、表の背景色は次のようになります。

水色、オレンジ色、黄緑色のローテーションにした表

水色 → オレンジ色 → 黄緑色 の繰り返しになっていることがわかります!

コピペのあとは、カラーコード(#~)の部分を好きなように変更してください。

次の項目からはやや難しい話になります。興味のある方はぜひご覧ください。

tableの行に関する規則性の考え方

すべてに共通して言えることですが、nというのは1以上の整数全部だと考えてください。つまり、1、2、3、4、5……ということですね。

2行のローテーションを表す式

2行のローテーション

上の画像のような、2行のローテーションを表す式を考えましょう。

まず、偶数行をnで表す方法を考えます。nは1、2、3……ですね。

偶数行は2の倍数行です。2の倍数は、2×1、2×2、2×3……なので、「2×n」でOKだとわかります。

しかし、掛け算の記号は省略しなければならないので、2nが正解です。

次に、奇数行をnで表す方法を考えます。nは1、2、3……ですね。

奇数は、1、3、5……ですが、これをどうやってnで表せば良いのでしょうか。それは、次のとおりです。

  • 1 = 2 – 1 = 2×1 – 1
  • 3 = 4 – 1 = 2×2 – 1
  • 5 = 6 – 1 = 2×3 – 1

つまり、2×n – 1の掛け算記号を省略した、2n – 1が正解です。

したがって、答えは次の画像のとおりです。かっこの中は、「~の場合」という意味です。

2行ローテーションの表

3行のローテーションを表す式

3行のローテーション

上の画像のような、3行のローテーションを表す式を考えましょう。

まず、3行め、6行め、9行め……の表し方から考えます。nは1、2、3……ですね。

答えを書くと、

  • 3 = 3×1 = 3n
  • 6 = 3×2 = 3n
  • 9 = 3×3 = 3n

と表すことができます。

よって、3nが正解です。

次に、2行め、5行め、8行め……の表し方を考えます。nは1、2、3……ですね。

答えを書くと、

  • 2 = 3 – 1 = 3×1 – 1 = 3n – 1
  • 5 = 6 – 1 = 3×2 – 1 = 3n – 1
  • 8 = 9 – 1 = 3×3 – 1 = 3n – 1

と表すことができます。

よって、3n – 1が正解です。

最後に、1行め、4行め、7行め……の表し方を考えます。nは1、2、3……ですね。

答えを書くと、

  • 1 = 3 – 2 = 3×1 – 2 = 3n – 2
  • 4 = 6 – 2 = 3×2 – 2 = 3n – 2
  • 7 = 9 – 2 = 3×3 – 2 = 3n – 2

と表すことができます。

よって、3n – 2が正解です。

したがって、答えは次の画像のとおりです。かっこの中は、「~の場合」という意味です。

3行ローテーションの表

3行のローテーションが式で表現できたら、4行のローテーションも5行のローテーションも表現できるはずです。ぜひ挑戦してみてください。

今回はここまでです。お疲れさまでした。


 

みなためじゃんけん

 

このコーナーは、私と擬似的にじゃんけんできるコーナーです。

みなためじゃんけん、じゃんけんぽん!

 

私が出したのは……





 

グーでした! パーの勝利です!



この記事をSNSでシェアする

プログラミングカテゴリーの最新記事(5件)

最新記事(10件)

管理人のTwitter

内部リンク集