見やすく・おしゃれなリスト作成！HTMLとCSSで交互に背景色を設定するテクニック

2024-04-09

HTMLとCSSでリスト項目に交互に背景色を設定する方法

HTML

まず、HTMLでリストを作成します。例として、番号付きリスト（ol要素）と箇条書きリスト（ul要素）のそれぞれで説明します。

番号付きリスト

<ol>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ol>

箇条書きリスト

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

CSS

次に、CSSでリスト項目に交互に背景色を設定します。以下は、奇数番目のリスト項目に薄い灰色 (#f0f0f0)、偶数番目のリスト項目に白 (#fff) を設定する例です。

ol li:nth-child(odd) {
  background-color: #f0f0f0;
}

ol li:nth-child(even) {
  background-color: #fff;
}

ul li:nth-child(odd) {
  background-color: #f0f0f0;
}

ul li:nth-child(even) {
  background-color: #fff;
}

このCSSでは、nth-child(odd) と nth-child(even) という擬似クラスを使用しています。これらの擬似クラスは、要素の子要素の中から特定の番目の要素を選択するものです。 nth-child(odd) は奇数番目の要素、nth-child(even) は偶数番目の要素を選択します。

上記以外にも、様々な方法でリスト項目に交互に背景色を設定することができます。例えば、以下のように、特定のクラスを持つリスト項目のみを対象にすることもできます。

.alternate-bg li:nth-child(odd) {
  background-color: #f0f0f0;
}

.alternate-bg li:nth-child(even) {
  background-color: #fff;
}

このCSSでは、.alternate-bg というクラスを持つリストのみを対象にしています。リストにクラスを追加するには、HTMLの li 要素に class 属性を設定します。

<ol class="alternate-bg">
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ol>

注意点

上記の例では、奇数番目の要素から背景色を設定していますが、:nth-child(1) を使用して最初の要素から設定することもできます。
背景色は、ご自身の好みに合わせて変更してください。
複数のリストを同じページに表示する場合は、それぞれのリストに異なるクラスを設定する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>交互に背景色を設定するリスト</title>
  <style>
    ol li:nth-child(odd) {
      background-color: #f0f0f0;
    }

    ol li:nth-child(even) {
      background-color: #fff;
    }

    ul li:nth-child(odd) {
      background-color: #f0f0f0;
    }

    ul li:nth-child(even) {
      background-color: #fff;
    }
  </style>
</head>
<body>
  <h1>番号付きリスト</h1>
  <ol>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
  </ol>

  <h1>箇条書きリスト</h1>
  <ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
  </ul>
</body>
</html>

このコードを実行すると、以下のような表示になります。

リスト項目1 (薄い灰色)

説明

上記のコードは、HTML5とCSS3に対応しています。
ol 要素と ul 要素の両方に対して、リスト項目に交互に背景色を設定するスタイルを定義しています。
奇数番目のリスト項目には薄い灰色 (#f0f0f0)、偶数番目のリスト項目には白 (#fff) が設定されています。

HTMLとCSSでリスト項目に交互に背景色を設定するその他の方法

方法1：属性セレクタを使用する

属性セレクタを使用して、リスト項目の index 属性に基づいて背景色を設定することができます。例は以下の通りです。

ol li[index="0"] {
  background-color: #f0f0f0;
}

ol li[index="1"] {
  background-color: #fff;
}

/* 以降省略 */

ul li[index="0"] {
  background-color: #f0f0f0;
}

ul li[index="1"] {
  background-color: #fff;
}

/* 以降省略 */

この方法では、各リスト項目の index 属性を確認する必要があり、やや煩雑になる可能性があります。

方法2： JavaScriptを使用する

JavaScriptを使用して、リスト項目ごとに動的に背景色を設定することができます。例は以下の通りです。

<ol id="list1">
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ol>

<ul id="list2">
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

<script>
const list1 = document.getElementById('list1');
const list2 = document.getElementById('list2');

const setAlternateBackground = (list) => {
  for (let i = 0; i < list.childNodes.length; i++) {
    const listItem = list.childNodes[i];
    if (listItem.nodeType === 1) {
      listItem.style.backgroundColor = i % 2 === 0 ? '#f0f0f0' : '#fff';
    }
  }
};

setAlternateBackground(list1);
setAlternateBackground(list2);
</script>

この方法では、JavaScriptを使用してリスト項目をループ処理し、それぞれに背景色を設定する必要があります。

方法3： Sass/SCSSを使用する

$base-color: #f0f0f0;

ol li {
  background-color: $base-color;

  &:nth-child(even) {
    background-color: #fff;
  }
}

ul li {
  background-color: $base-color;

  &:nth-child(even) {
    background-color: #fff;
  }
}