CSSのnth-childでテーブルの背景色を交互に変える！初心者向け縞模様の作り方完全ガイド

行の背景色を交互に変える方法（nth-childの活用）

先生と生徒の会話形式で理解しよう

生徒

「ホームページの表やリストを見やすくするために、行の背景色を白と薄いグレーで交互に変えたいのですが、どうすればいいですか？」

先生

「CSSのnth-childという便利な機能を使うと、プログラムの知識がなくても簡単に交互に色を変えることができますよ。」

生徒

「nth-childというのは初めて聞きました。具体的にはどのように使うんですか？」

先生

「それでは、基本的な使い方から順番に見ていきましょう！」

1. CSSのnth-childとは何か

nth-childとは、CSSで特定の順番にある要素をピンポイントで選ぶための命令です。例えば、表のリストが何十行とあった場合、一つずつ手作業で色を変えるのは大変ですよね。nth-childを使うと、ブラウザが自動的に「奇数番目の行」や「偶数番目の行」を判断して、デザインを適用してくれます。これがわかると、ウェブサイトのデザインが格段にきれいに、かつ見やすくなります。プログラミングの難しい知識がなくても、CSSのルールさえ覚えてしまえば誰でも使いこなせます。

2. 表の行を交互に色分けする基本コード

まずは、テーブルタグを使った表の背景色を交互に変える方法です。CSSの記述で「奇数番目の要素（odd）」と「偶数番目の要素（even）」という指定を使います。これによって、見やすいストライプ模様が完成します。


<style>
    tr:nth-child(odd) {
        background-color: #f2f2f2;
    }
    tr:nth-child(even) {
        background-color: #ffffff;
    }
</style>

<table>
    <tr><td>1行目（奇数）</td></tr>
    <tr><td>2行目（偶数）</td></tr>
    <tr><td>3行目（奇数）</td></tr>
</table>

ブラウザ表示

3. リストタグでも活用できる便利な仕組み

表だけでなく、ulやliといったリストタグの表示にもnth-childは非常に役立ちます。例えば、ニュース一覧や商品のメニューなどで背景色を交互にすることで、ユーザーが視覚的に情報を整理しやすくなります。書き方は表の時と同じで、liタグに対してnth-childを指定するだけです。


<style>
    li:nth-child(even) {
        background-color: #e0f7fa;
    }
</style>

<ul>
    <li>メニュー項目1</li>
    <li>メニュー項目2（背景色あり）</li>
    <li>メニュー項目3</li>
    <li>メニュー項目4（背景色あり）</li>
</ul>

ブラウザ表示

4. 数式を使って指定する応用テクニック

nth-childは「odd」や「even」だけでなく、数式を使うことでさらに細かく指定が可能です。例えば「3つおきに色を変えたい」といった指定もできます。「3n」という式を書くことで、3の倍数番目の要素だけを色付けできるのです。これを知っていると、デザインの幅が大きく広がります。


<style>
    li:nth-child(3n) {
        background-color: #ffe0b2;
    }
</style>

<ol>
    <li>1番目</li>
    <li>2番目</li>
    <li>3番目（色付け）</li>
    <li>4番目</li>
    <li>5番目</li>
    <li>6番目（色付け）</li>
</ol>

ブラウザ表示

5. なぜこの技術がSEOに役立つのか

検索エンジンは、ユーザーがウェブサイトで情報をいかに快適に読めるかを評価の一つとしています。もし情報の羅列が真っ白なままだと、ユーザーはどこまで読んだか迷ってしまい、すぐにサイトから離れてしまうかもしれません。交互に色分けをするという小さな工夫が、結果としてサイト滞在時間を延ばし、SEOの効果を高めることにつながるのです。読みやすさはユーザー体験、いわゆるUXの基本です。

6. 初心者が注意すべきポイント

最後に、nth-childを使う際に注意しておきたい点をお伝えします。それは「背景色の濃さ」です。あまりに濃い色を使ってしまうと、文字が読みづらくなってしまいます。薄いグレーやパステルカラーなど、目に優しい色を選ぶのがデザインのコツです。また、ブラウザによっては古いバージョンで対応していないことも稀にありますが、現在主流のブラウザであれば問題なく動作しますので、安心して活用してください。


<style>
    .table-custom tr:nth-child(odd) {
        background-color: #f8f9fa;
        color: #333;
    }
</style>

<div class="table-custom">
    <p>読みやすい行間と背景色のバランスが大切です。</p>
</div>

ブラウザ表示

7. パソコン初心者でも簡単にできる理由

パソコンを触ったことがない方でも、メモ帳などのテキストエディタにこのコードを貼り付けて保存し、ブラウザで開くだけで変化を確認できます。CSSは「こう見せたい」という命令を直接書く言語なので、試行錯誤がとても楽しいのが特徴です。nth-childという命令一つで、あなたのサイトはプロが作ったような洗練された印象に変わります。今日学んだことをきっかけに、いろいろなデザインを試してみてください。

2026年最新スキルアップ・実践セミナー