CSSを使いこなしてワンランク上のWebデザインへ：クラスとIDを駆使するテクニックガイド

2024-05-16

CSSセレクタでクラスとIDを組み合わせる方法

クラス:
- 同じスタイルを共有したい複数の要素に適用する
- 複数のクラスを1つの要素に付与可能
- セレクタには.(ピリオド) followed by クラス名を使用する
- 例: .example-class
ID:
- 1つの要素にのみ適用されるユニークな識別子
- 1つのページ内でIDは1回のみ使用可能
- 例: #unique-element

組み合わせ方

クラスとIDを組み合わせるには、以下の2つの方法があります。

階層セレクタ:
- 例: #header, .button

注意点

組み合わせるセレクタの特異度を考慮する必要があります。特異度が高いセレクタほど優先的に適用されます。
必要なスタイルのみを記述し、過剰なセレクタの組み合わせは避けるようにしましょう。コードが読みづらくなり、メンテナンスが困難になります。

例

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  background-color: #f0f0f0;
  padding: 20px;
}

#container .example-class {
  font-weight: bold;
  text-decoration: underline;
}

#header, .button {
  color: blue;
  cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
  <p class="example-class">This is an example paragraph.</p>
</div>

<h1 id="header">This is a heading</h1>
<button class="button">Click me</button>
</body>
</html>

この例では、#container 要素には灰色背景と余白が設定され、#container 内の .example-class 要素には太字と下線が付与されます。また、#header 要素と .button 要素には青色とポインタカーソルが設定されます。

CSSセレクタでクラスとIDを組み合わせることで、HTML要素に対してより詳細なスタイリングを適用することができます。それぞれの特性と組み合わせ方、注意点などを理解し、状況に応じて適切な方法を選択するようにしましょう。

<!DOCTYPE html>
<html>
<head>
<style>
/* 全体的なスタイル */
body {
  font-family: sans-serif;
  margin: 20px;
}

/* コンテナ */
#container {
  background-color: #f0f0f0;
  padding: 20px;
}

/* コンテナ内の見出し */
#container h2 {
  color: blue;
  margin-top: 0;
}

/* コンテナ内の段落 */
#container p {
  margin-top: 10px;
}

/* ボタン */
.button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
}

/* ホバー時のボタン */
.button:hover {
  background-color: #3e8e41;
}

/* 特定のクラスを持つボタン */
.special-button {
  background-color: #ff9800;
}
</style>
</head>
<body>

<div id="container">

  <h2>見出し</h2>

  <p>これは段落です。</p>

  <button class="button">ボタン</button>

  <button class="button special-button">特別なボタン</button>

</div>

</body>
</html>

このコードでは、以下のスタイルが適用されます。

すべてのボディ要素には、サンセリフフォントと20pxのマージンが設定されます。
#container 要素には、灰色背景と20pxのパディングが設定されます。
#container 内の h2 要素には、青色とマージンなしのトップマージンが設定されます。
.button 要素には、緑色の背景、白いテキスト、10px 20pxのパディング、中央揃えのテキスト、テキスト装飾なし、インラインブロック表示、5pxの角丸が設定されます。
.button 要素にカーソルを合わせた場合、背景色は濃い緑色になります。
.special-button クラスを持つ .button 要素には、オレンジ色の背景色が設定されます。

この例はあくまでも基本的な例であり、状況に合わせて様々な組み合わせが可能です。

CSSセレクタでクラスとIDを組み合わせるその他の方法

属性セレクタを使用すると、要素の属性値に基づいてスタイルを適用できます。クラス名やIDを含む属性をターゲットにすることができます。

例：

#container[data-active="true"] {
  background-color: #e0e0e0;
}

.example-class[href^="https://"] {
  color: blue;
}

この例では、以下のようになります。

data-active="true" 属性を持つ #container 要素には、灰色背景色が設定されます。
href 属性の値が https:// で始まる .example-class 要素には、青色テキストが設定されます。

子孫セレクタを使用すると、親要素の子孫要素のみをターゲットにすることができます。このセレクタは、ネストされた要素にスタイルを適用する場合に役立ちます。

#container > .example-class {
  font-weight: bold;
}

#header ul li {
  list-style: none;
  margin: 5px;
}

#container の直接の子要素である .example-class 要素には、太字が設定されます。
#header 内の ul 要素の子要素である li 要素には、リストスタイルとマージンが設定されます。

擬似クラスと擬似要素を使用して、特定の状態や動作に基づいてスタイルを適用できます。これらは、ホバー状態、フォーカス状態、ページの最初の要素など、特定の条件に一致する要素をターゲットにするために使用できます。

#container:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.button:active {
  background-color: #337ab7;
}

#navigation li:first-child {
  background-color: #f0f0f0;
}