プログラミング

CSSの擬似クラスと擬似要素

最終更新： 28/02/2025
1分未満

擬似クラス（pseudo-classes）と擬似要素（pseudo-elements）は、CSSにおいて重要な役割を果たし、スタイルの適用対象をより詳細に制御するためのツールです。これらの機能を使うことで、特定の状態や部分に対してスタイルを動的に適用することができます。この完全かつ包括的なガイドでは、擬似クラスと擬似要素の概念、使用方法、そしてそれぞれの役割について詳しく説明します。

擬似クラス（pseudo-classes）とは？

擬似クラスは、要素の状態に基づいてスタイルを適用するために使用されます。通常のHTMLのセレクタは、DOMの要素に基づいてスタイルを適用しますが、擬似クラスは要素が特定の状態にある場合にスタイルを変更します。これにより、ユーザーインタラクションや他の動的な状態に対応したデザインが可能になります。

関連記事

よく使われる擬似クラス

  1. :hover

    • 要素がホバー（マウスオーバー）されたときに適用されます。
    • 例： 
      css
      a:hover {
  color: red;
}

      リンクにマウスオーバーしたとき、文字色が赤に変わります。

  2. :focus

    • 要素がフォーカスされたときに適用されます。フォームの入力フィールドやリンク、ボタンなどが該当します。
    • 例： 
      css
      input:focus {
  background-color: yellow;
}

      テキスト入力フィールドがフォーカスされたときに背景色が黄色になります。

  3. :active

    • 要素がアクティブ（クリックされている）状態のときに適用されます。
    • 例： 
      css
      button:active {
  background-color: blue;
}

      ボタンがクリックされたときに背景色が青に変わります。

  4. :nth-child()

    • 親要素の中で特定の順番にある子要素をターゲットにできます。例えば、奇数番目や偶数番目の要素にスタイルを適用することができます。
    • 例： 
      css
      li:nth-child(odd) {
  background-color: lightgray;
}

      リストの奇数番目のアイテムに灰色の背景色を適用します。

  5. :not()

    • 指定したセレクタに一致しない要素をターゲットにすることができます。
    • 例： 
      css
      p:not(.important) {
  color: gray;
}

      important クラスを持たないすべての段落に灰色の文字色を適用します。

擬似クラスの例

css
a:visited {
  color: purple;
}
a:hover {
  color: red;
}

上記のコードは、リンクが訪問された後に紫色に変わり、ホバー時に赤色に変わる効果を持ちます。

擬似要素（pseudo-elements）とは？

擬似要素は、実際のHTML要素には存在しない部分にスタイルを適用するためのものです。主に、要素の前後にコンテンツを追加したり、特定の部分に対してスタイルを施す際に使用されます。

よく使われる擬似要素

  1. ::before

    • 要素のコンテンツの前に新しい内容を追加します。
    • 例： 
      css
      p::before {
  content: "※";
  color: red;
}

      すべての段落の前に赤い「※」を追加します。

  2. ::after

    • 要素のコンテンツの後に新しい内容を追加します。
    • 例： 
      css
      p::after {
  content: " (終了)";
  font-style: italic;
}

      すべての段落の後に「(終了)」というテキストをイタリック体で追加します。

  3. ::first-letter

    • 要素の最初の文字にスタイルを適用します。主に見出しや段落の最初の文字を装飾する際に使用されます。
    • 例： 
      css
      p::first-letter {
  font-size: 2em;
  color: red;
}

      段落の最初の文字を大きくし、赤色にします。

  4. ::first-line

    • 要素の最初の行にスタイルを適用します。文章や段落の最初の行だけを特別なスタイルで強調したい場合に使用されます。
    • 例： 
      css
      p::first-line {
  font-weight: bold;
}

      段落の最初の行を太字にします。

擬似要素の例

css
h1::before {
  content: "★";
  color: gold;
}

このコードは、すべての

タグの前に金色の星を追加します。

擬似クラスと擬似要素の違い

  • 擬似クラスは、要素の「状態」に基づいてスタイルを適用します。例えば、ホバーやフォーカス状態など、ユーザーの操作によって変化する要素にスタイルを適用できます。
  • 擬似要素は、要素の「部分」や「前後」に対してスタイルを適用します。要素自体には存在しない部分（例えば、最初の文字や行）に対してスタイルを施すことができます。

擬似クラスと擬似要素の使用時の注意点

  • 擬似クラスは、通常のクラスやIDセレクタのように単独で使用できますが、擬似要素は必ず::で二重コロンを使用します（::beforeや::afterなど）。
  • 擬似クラスは、要素のインタラクションや状態に基づいてスタイルを変更するのに適していますが、擬似要素は、要素の見た目や構造を変更するために使用されます。

結論

擬似クラスと擬似要素は、CSSにおけるスタイルの適用範囲を広げ、より柔軟で動的なデザインを可能にします。これらの機能を適切に活用することで、インタラクティブで魅力的なウェブページを作成することができます。擬似クラスは状態に基づくスタイル変更を提供し、擬似要素は要素の特定の部分をターゲットにすることで、デザインの幅を広げます。

最終更新： 28/02/2025
1分未満
Back to top button