CSS 疑似クラス

CSS 擬似クラス：要素の状態を正確に選択し、インタラクティブなWebページを作成する

CSS擬似クラスは、Webページのスタイルデザインにおいて強力なツールです。開発者は、要素の状態や位置に基づいて要素を正確に選択し、豊富なインタラクティブ効果と動的なスタイルを実現できます。この記事では、CSS擬似クラスの概念、構文、一般的なタイプ、そして実際のアプリケーションについて深く掘り下げて解説し、この強力なツールを簡単に習得して、より魅力的なWebページを作成するのに役立ちます。

1. CSS擬似クラスとは？

擬似クラスの定義：
擬似クラスは、通常のクラスとは異なり、要素の構造ではなく、状態に基づいて要素を選択します。例えば、リンクがクリックされた状態や、マウスが要素の上に置かれた状態などを選択することができます。
擬似クラスの役割：
擬似クラスは、Webページのインタラクティブ性、動的なスタイル、ユーザーエクスペリエンスの向上などに重要な役割を果たします。例えば、ユーザーがボタンの上にマウスを置いたときにボタンの色を変更したり、フォームに入力された値が正しくない場合にエラーメッセージを表示したりすることができます。
擬似クラスの構文：
擬似クラスは、コロン (:) の後に擬似クラス名を追加することで指定します。擬似クラスは、要素セレクタ、クラスセレクタ、IDセレクタなどと組み合わせて使用することができます。
```
<!DOCTYPE html>
<html>
<head>
  <title>リンクのホバー効果</title>
  <style>
    a:hover { 
      color: red; 
    }
  </style>
</head>
<body>
  <p>これは <a href="#">リンク</a> です。</p>
</body>
</html>
```

2. 一般的なCSS擬似クラスの詳細

2.1 リンク擬似クラス

擬似クラス	説明
`:link`	訪問していないリンクのスタイルを指定します。
`:visited`	訪問済みのリンクのスタイルを指定します。
`:hover`	マウスポインターが要素の上に置かれたときのスタイルを指定します。
`:active`	要素がアクティブになっているとき（例えば、クリックされているとき）のスタイルを指定します。


    a:link { 
      color: blue; 
    }
    a:visited { 
      color: purple; 
    }
    a:hover { 
      color: red; 
    }
    a:active { 
      color: orange; 
    }

2.2 動的擬似クラス

擬似クラス	説明
`:focus`	要素がフォーカスを持っているときのスタイルを指定します。
`:target`	現在のURLのフラグメント識別子と一致する要素のスタイルを指定します。
`:enabled`	有効なフォーム要素のスタイルを指定します。
`:disabled`	無効なフォーム要素のスタイルを指定します。
`:checked`	チェックされているラジオボタンやチェックボックスのスタイルを指定します。


    input:focus { 
      border: 2px solid blue; 
    }
    input:disabled { 
      opacity: 0.5; 
    }

2.3 構造擬似クラス

擬似クラス	説明
`:first-child`	親要素の最初の子要素のスタイルを指定します。
`:last-child`	親要素の最後の子要素のスタイルを指定します。
`:nth-child(n)`	親要素のn番目の子要素のスタイルを指定します。
`:empty`	子要素を持たない要素のスタイルを指定します。


    li:first-child { 
      font-weight: bold; 
    }
    li:nth-child(even) { 
      background-color: #f2f2f2; 
    }

2.4 その他の一般的な擬似クラス

擬似クラス	説明
`:not()`	指定されたセレクタに一致しない要素のスタイルを指定します。
`:lang()`	指定された言語コードを持つ要素のスタイルを指定します。
`::before`	要素の内容の前にコンテンツを挿入します。
`::after`	要素の内容の後にコンテンツを挿入します。


    p:not(.intro) { 
      font-size: 1.2em; 
    }
    .icon::before { 
      content: "▶ "; 
    }

3. CSS擬似クラスの実際のアプリケーション

1. ナビゲーションメニュー: :hover と :focus を使ってドロップダウンメニューを実装

<!DOCTYPE html>
<html>
<head>
  <title>ドロップダウンメニュー</title>
  <style>
    .nav { list-style: none; padding: 0; }
    .nav li { display: inline-block; position: relative; }
    .nav a { display: block; padding: 10px; text-decoration: none; }
    .nav ul { display: none; position: absolute; background: #f9f9f9; box-shadow: 0 2px 5px rgba(0,0,0,.15); }
    .nav li:hover > ul,
    .nav li:focus-within > ul { display: block; } /* ホバーまたはフォーカスでサブメニューを表示 */
  </style>
</head>
<body>
  <ul class="nav">
    <li><a href="#">メニュー1</a>
      <ul>
        <li><a href="#">サブメニュー1</a></li>
        <li><a href="#">サブメニュー2</a></li>
      </ul>
    </li>
    <li><a href="#">メニュー2</a></li>
  </ul>
</body>
</html>

:hover はマウスオーバー時、:focus-within は要素自体または子要素がフォーカスされたときにスタイルを適用します。
これにより、マウス操作だけでなく、キーボード操作にも対応したアクセシブルなドロップダウンメニューが実現できます。

2. フォーム検証: :invalid と :valid で入力フィールドにフィードバックを表示

<!DOCTYPE html>
<html>
<head>
  <title>フォーム検証</title>
  <style>
    input:focus { outline: none; box-shadow: 0 0 5px rgba(0,0,255,.5); }
    input:invalid { border-color: red; }
    input:valid { border-color: green; }
  </style>
</head>
<body>
  <form>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" required>
    <button type="submit">送信</button>
  </form>
</body>
</html>

:invalid は入力値が不正な場合、:valid は入力値が正当な場合にスタイルを適用します。
これにより、ユーザーは入力内容が要件を満たしているかどうかを視覚的に確認できます。

3. 画像ギャラリー: :nth-child で画像グリッドに変化を加える

<!DOCTYPE html>
<html>
<head>
  <title>画像ギャラリー</title>
  <style>
    .gallery { display: flex; flex-wrap: wrap; }
    .gallery img { width: 200px; margin: 5px; }
    .gallery img:nth-child(3n) { margin-right: 0; } /* 3つごとに右マージンをリセット */
  </style>
</head>
<body>
  <div class="gallery">
    <img src="image1.jpg" alt="画像1">
    <img src="image2.jpg" alt="画像2">
    <img src="image3.jpg" alt="画像3">
    </div>
</body>
</html>

:nth-child(3n) は3の倍数番目の要素にスタイルを適用します。
この例では、3つごとに右マージンをリセットすることで、3列レイアウトの画像ギャラリーを実現しています。

4. CSS擬似クラスの将来の開発

CSS擬似クラスの仕様は、常に進化しています。新しい擬似クラスセレクタや機能が追加され、Webページのデザインの可能性がますます広がっています。将来的には、より豊かなインタラクティブ体験や、より詳細なスタイル制御が可能になるでしょう。

まとめ

CSS擬似クラスは、Webページのデザインにおいて不可欠なツールです。要素の状態に基づいてスタイルを適用することで、インタラクティブで動的なWebページを作成することができます。この記事で紹介した擬似クラスを習得し、Webページのデザインに活用してください。