JavaScriptで動的にスタイル変更！さらに自由度の高いデザインを実現
HTML、CSS、CSSセレクタを用いた偶数・奇数要素のスタイリング方法
HTML、CSS、CSSセレクタを駆使することで、Webページ上の要素を偶数・奇数ごとに異なるスタイルで装飾することができます。これは、表やリストなどのデザインに役立つテクニックです。
方法
以下の2つの方法が主に用いられます。
nth-child 疑似クラスは、要素の子要素のうち、特定の位置にあるものを選択することができます。偶数・奇数要素のスタイリングには、以下の書き方が便利です。
/* 偶数番目の要素 */
li:nth-child(even) {
background-color: #f0f0f0;
}
/* 奇数番目の要素 */
li:nth-child(odd) {
background-color: #fff;
}
この例では、li 要素（リスト項目）の偶数番目を薄い灰色、奇数番目を白色で背景色を変更しています。
nth-of-type 疑似クラスは、特定の種類の要素のうち、特定の位置にあるものを選択することができます。こちらは、同じ種類の要素が混在するような場合に有効です。
/* 表の偶数行 */
tr:nth-of-type(even) {
background-color: #f0f0f0;
}
/* 表の奇数行 */
tr:nth-of-type(odd) {
background-color: #fff;
}
補足
- 上記の例では
liやtr要素を例としていますが、他の要素にも同様に適用できます。
応用例
- 表の交互縞模様
- リストの行の背景色を交互に変化
- 2カラムレイアウトにおける左右の列のスタイルを区別
これらの方法を習得することで、Webページのデザインに幅広いバリエーションを持たせることができます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>偶数・奇数要素のスタイリング</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>表の交互縞模様</h1>
<table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>Taro</td>
<td>30</td>
</tr>
<tr>
<td>Hanako</td>
<td>25</td>
</tr>
<tr>
<td>Jiro</td>
<td>40</td>
</tr>
</table>
<h1>リストの行の背景色を交互に変化</h1>
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
<li>アイテム4</li>
<li>アイテム5</li>
</ul>
<h1>2カラムレイアウトにおける左右の列のスタイルを区別</h1>
<div class="container">
<div class="left-column">
<h2>左側のコンテンツ</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac quam vitae ligula hendrerit varius.</p>
</div>
<div class="right-column">
<h2>右側のコンテンツ</h2>
<p>Donec nec justo eget quam semper tincidunt. Morbi quis enim at lectus faucibus tincidunt id eget lectus.</p>
</div>
</div>
</body>
</html>
CSS
/* 表の偶数行 */
tr:nth-of-type(even) {
background-color: #f0f0f0;
}
/* 表の奇数行 */
tr:nth-of-type(odd) {
background-color: #fff;
}
/* リストの偶数番目の要素 */
li:nth-child(even) {
background-color: #f0f0f0;
}
/* リストの奇数番目の要素 */
li:nth-child(odd) {
background-color: #fff;
}
/* 2カラムレイアウトの左列 */
.left-column {
float: left;
width: 48%;
background-color: #f0f0f0;
padding: 10px;
}
/* 2カラムレイアウトの右列 */
.right-column {
float: right;
width: 48%;
background-color: #fff;
padding: 10px;
}
このコードを実行すると、以下のようになります。
- 2カラムレイアウトの左列が薄い灰色、右列が白色で背景色を変更され、左右の列が区別されます。
上記はあくまでも一例であり、状況に合わせてスタイルを調整することができます。
偶数・奇数要素のスタイリング：その他の方法
JavaScriptによる動的なスタイル変更
JavaScriptを用いて、要素のインデックス情報などを取得し、偶数・奇数判定に基づいて動的にスタイルを変更する方法です。柔軟性がありますが、JavaScriptの知識が必要となります。
<script>
const listItems = document.querySelectorAll('li');
for (let i = 0; i < listItems.length; i++) {
if (i % 2 === 0) {
listItems[i].style.backgroundColor = '#f0f0f0';
} else {
listItems[i].style.backgroundColor = '#fff';
}
}
</script>
属性セレクタの利用
data-* 属性のようなカスタム属性に、偶数・奇数情報を付与し、属性セレクタを用いてスタイルを適用する方法です。シンプルな構造の場合に有効ですが、HTMLに余計な属性を追加する必要があります。
<ul>
<li data-parity="even">アイテム1</li>
<li data-parity="odd">アイテム2</li>
<li data-parity="even">アイテム3</li>
<li data-parity="odd">アイテム4</li>
<li data-parity="even">アイテム5</li>
</ul>
li[data-parity="even"] {
background-color: #f0f0f0;
}
li[data-parity="odd"] {
background-color: #fff;
}
CSSフレームワークの利用
BootstrapなどのCSSフレームワークには、偶数・奇数要素を簡単にスタイリングできるユーティリティクラスが用意されている場合があります。フレームワークを導入している場合は、これらのクラスを活用するのも有効です。
例：Bootstrap
<ul class="list-group">
<li class="list-group-item even">アイテム1</li>
<li class="list-group-item odd">アイテム2</li>
<li class="list-group-item even">アイテム3</li>
<li class="list-group-item odd">アイテム4</li>
<li class="list-group-item even">アイテム5</li>
</ul>
偶数・奇数要素の間に共通の兄弟要素が存在する場合、兄弟要素セレクタを用いてスタイルを適用する方法です。隣接する要素のみを対象とすることができ、複雑な構造には向いていません。
li:nth-child(odd) + li {
background-color: #f0f0f0;
}
上記の方法はいずれも、状況に応じて使い分けることができます。それぞれのメリットとデメリットを理解し、最適な方法を選択してください。
html css css-selectors
