CSS 疑似要素と疑似クラス完全ガイド：基本から応用、実用例まで

「CSSの疑似要素と疑似クラスって、なんだか難しそう…」 そう感じているあなたも大丈夫！ この記事では、CSSの基本から応用まで、分かりやすく丁寧に解説していきます。

:と::の違い、よく使うセレクタ、具体的な使用例を通して、あなたのWebデザインスキルを格段にレベルアップさせましょう！

CSSの基礎知識をおさらい

CSSを理解する上で、基本的な知識の整理は不可欠です。セレクタやプロパティ、値といった基本概念を改めて確認し、CSSの理解を深めましょう。

セレクタとは

セレクタは、HTMLドキュメント内の特定の要素（要素、ID、クラスなど）を選択するために使用します。CSSルールをどの要素に適用するかを決定する重要な役割を果たします。

例:

• h1: ページ内のすべての<h1>要素を選択します。
• .my-class: クラス名my-classを持つすべての要素を選択します。
• #my-id: IDmy-idを持つ要素を選択します。

セレクタの種類を理解し、目的に応じて使い分けることが、効率的なCSSコーディングの鍵となります。

プロパティと値

プロパティは、要素に適用するCSSのスタイル（色、サイズ、フォントなど）の種類を指定します。値は、そのプロパティに設定する具体的な内容（色の種類、サイズの値、フォントの種類など）です。

例:

• color: blue;: テキストの色を青に設定します。
• font-size: 16px;: フォントサイズを16ピクセルに設定します。
• width: 100%;: 要素の幅を100%に設定します。

プロパティと値の組み合わせを理解し、適切に設定することで、要素のデザインを思い通りに調整できます。

疑似要素と疑似クラスとは

CSSを使いこなす上で、疑似要素と疑似クラスの理解は不可欠です。これらをマスターすることで、Webサイトのデザインに柔軟性と表現力を加えることができます。このセクションでは、疑似要素と疑似クラスの基本的な概念、そしてその違いを分かりやすく解説します。

疑似要素とは

疑似要素は、HTML要素の特定の部分に対してスタイルを適用するために使用します。例えば、テキストの最初の文字や行、要素の前や後にコンテンツを追加する際に利用します。疑似要素を使用すると、HTML構造を変更することなく、デザインを細かく調整できます。

具体的には、::beforeや::afterを使って要素の前後に装飾を追加したり、::first-lineを使って最初の行だけスタイルを変えたりすることが可能です。これらの疑似要素は、デザインの幅を広げる強力なツールとなります。

疑似クラスとは

疑似クラスは、特定の状態にある要素に対してスタイルを適用するために使用します。例えば、マウスカーソルが要素上に置かれたとき（:hover）、要素がクリックされたとき（:active）、要素にフォーカスが当たったとき（:focus）など、ユーザーの操作や要素の状態に応じてスタイルを変化させることができます。

<a>要素のホバー時の色の変化や、入力フォームにフォーカスが当たった際の枠線の表示など、ユーザーインターフェースをインタラクティブにする上で非常に重要な役割を果たします。

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

疑似要素と疑似クラスは、どちらもCSSセレクタの一種ですが、その目的と使い方には違いがあります。疑似要素は、HTML要素の特定の部分にスタイルを適用するのに対し、疑似クラスは、要素の状態に基づいてスタイルを適用します。

簡単に言うと、疑似要素は要素の「一部」に、疑似クラスは要素の「状態」に対してスタイルを適用します。この違いを理解することで、適切な場面で適切なセレクタを選択し、より効率的にCSSを記述できるようになります。

:と::の違い

CSS3以降では、疑似要素と疑似クラスを区別するために、コロンの数（:と::）が使い分けられています。具体的には、疑似クラスは1つのコロン（:）、疑似要素は2つのコロン（::）を使用します。

このルールにより、CSSの可読性が向上し、どのセレクタが疑似要素で、どのセレクタが疑似クラスであるかを明確に区別できるようになりました。ただし、古いブラウザ（Internet Explorer 8以前など）では、2つのコロン（::）に対応していない場合があるため、1つのコロン（:）でも動作することがあります。

よく使われるCSS疑似要素の使い方

::beforeと::after

::beforeと::afterは、要素のコンテンツの前と後に、スタイルを適用するための疑似要素です。主に装飾的な要素を追加する際に使用されますが、コンテンツの挿入にも活用できます。これらの疑似要素は、HTML構造を変更することなく、デザインを豊かにする強力なツールです。

例えば、見出しの前にアイコンを追加したり、リストの各項目に装飾的なマーカーを付与したりすることができます。::beforeと::afterを使用する際は、contentプロパティで挿入する内容（テキストや画像など）を指定する必要があります。また、インライン要素では::beforeと::afterが正しく表示されない場合があるため、displayプロパティで適切な表示形式（blockやinline-blockなど）を設定することが重要です。

■使用例:

.heading::before {
  content: "★ "; /* 見出しの前に★を追加 */
  color: red;
}

li::before {
  content: "・ "; /* リスト項目の前に・を追加 */
  color: gray;
}

その他の疑似要素

CSSには、::beforeと::after以外にも、さまざまな疑似要素が存在します。これらの疑似要素を理解し、適切に使いこなすことで、Webデザインの表現力を格段に向上させることができます。

主なその他の疑似要素:

• ::first-letter: テキストの最初の文字にスタイルを適用します。
• ::first-line: テキストの最初の行にスタイルを適用します。
• ::selection: ユーザーがテキストを選択した部分にスタイルを適用します。

■使用例:

p::first-letter {
  font-size: 2em; /* 最初の文字を2倍のサイズに */
  font-weight: bold;
}

::selection {
  background-color: yellow;
  color: black;
}

これらの疑似要素を使いこなすことで、テキストの視覚的な強調や、ユーザーインターフェースの改善を図ることができます。

よく使われるCSS疑似クラスの使い方

CSSを使いこなす上で、よく使われるCSS疑似クラスとその使い方は、Webデザインの表現力を大きく左右する重要な要素です。このセクションでは、Webデザインで頻繁に利用される主要なCSS疑似クラスをいくつかピックアップし、それぞれの機能、使い方、そして具体的な活用例を詳しく解説します。これらの疑似クラスを理解し、適切に利用することで、Webサイトのデザインにインタラクティブ性や動的な表現を取り入れ、ユーザーエクスペリエンスを向上させることが可能になります。

疑似クラス	説明	使い方	使用例
:hover	マウスカーソルが要素上に乗っている状態（ホバー状態）になったときにスタイルを適用	セレクタの後に続けて記述 (例: a:hover)	css a { color: blue; /* 通常時のリンクの色 */ text-decoration: none; /* 下線を消す */ } a:hover { color: red; /* ホバー時のリンクの色 */ text-decoration: underline; /* 下線を表示 */ }
:active	要素がクリックされたとき、またはアクティブな状態になったときにスタイルを適用	セレクタの後に続けて記述 (例: button:active)	css button { background-color: lightgray; /* 通常時の背景色 */ border: 1px solid gray; padding: 10px 20px; } button:active { background-color: darkgray; /* クリック時の背景色 */ border-color: black; }
:focus	要素がフォーカス状態になったときにスタイルを適用	セレクタの後に続けて記述 (例: input:focus)	css input[type="text"] { border: 1px solid #ccc; /* 通常時の枠線 */ padding: 5px; } input[type="text"]:focus { border: 2px solid blue; /* フォーカス時の枠線 */ outline: none; /* デフォルトのアウトラインを消す */ }

その他の疑似クラス

CSSには、上記以外にも多くの便利な疑似クラスが存在します。以下に、いくつかの代表的なものを紹介します。

• 疑似クラス説明:visited訪問済みのリンクにスタイルを適用します。:first-child最初の子要素にスタイルを適用します。:last-child最後の子要素にスタイルを適用します。:nth-child(n)n番目の子要素にスタイルを適用します。:nth-of-type(n)特定の種類のn番目の子要素にスタイルを適用します。:disabled無効化されたフォーム要素にスタイルを適用します。:checkedチェックされたフォーム要素（チェックボックスやラジオボタン）にスタイルを適用します。

これらの疑似クラスを組み合わせることで、さらに高度な表現が可能になります。例えば、:visitedと:hoverを組み合わせることで、訪問済みリンクにホバーした際のスタイルを変更したり、:nth-child(even)を使って、リストの偶数番目の項目に異なるスタイルを適用したりできます。

疑似要素と疑似クラスの組み合わせ

ナビゲーションバーのデザイン

ナビゲーションバーは、Webサイトの重要な要素であり、サイト内を移動するためのリンクをまとめたものです。疑似要素と疑似クラスを組み合わせることで、ナビゲーションバーに洗練されたデザインとインタラクティブ性を持たせることができます。

■使用例:

1. ホバーエフェクト:
   • a:hoverを使用して、マウスカーソルがリンク上に乗ったときに背景色や文字色を変化させます。これにより、ユーザーはどのリンクが選択されているかを直感的に理解できます。.nav-link { color: #333; /* 通常時の文字色 */ text-decoration: none; /* 下線を消す */ padding: 10px 15px; display: inline-block; } .nav-link:hover { background-color: #f0f0f0; /* ホバー時の背景色 */ color: #007bff; /* ホバー時の文字色 */ }
2. アクティブ状態:
   • a:activeを使用して、リンクがクリックされたときに背景色や文字色を変化させます。これにより、ユーザーはクリックされたことが視覚的にフィードバックされます。.nav-link:active { background-color: #d9d9d9; /* クリック時の背景色 */ }
3. ::beforeと::afterの活用:
   • ::beforeと::afterを使用して、ナビゲーションリンクの前にアイコンを追加したり、各リンクの間に区切り線を表示したりします。これにより、ナビゲーションバーのデザインをより豊かにできます。.nav-link::before { content: "→ "; /* 各リンクの前に矢印アイコンを追加 */ color: #999; } .nav-link:hover::before { color: #007bff; /* ホバー時の矢印の色を変更 */ }

ボタンのデザイン

ボタンは、Webサイトにおける重要なインタラクション要素であり、ユーザーのアクションを促すために使用されます。疑似要素と疑似クラスを組み合わせることで、ボタンに視覚的な変化やアニメーションを追加し、ユーザーエクスペリエンスを向上させることができます。

■使用例:

1. ホバーエフェクト:
   • button:hoverを使用して、マウスカーソルがボタン上に乗ったときに背景色や影を変化させます。これにより、ユーザーはボタンがインタラクティブであることを認識しやすくなります。.button { background-color: #007bff; color: white; border: none; padding: 10px 20px; cursor: pointer; } .button:hover { background-color: #0056b3; /* ホバー時の背景色 */ box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* 影を追加 */ }
2. アクティブ状態:
   • button:activeを使用して、ボタンがクリックされたときに内側の影を追加したり、背景色を暗くしたりします。これにより、ユーザーはボタンが押されたことを明確に感じることができます。.button:active { background-color: #004085; /* クリック時の背景色 */ box-shadow: inset 0px 3px 5px rgba(0, 0, 0, 0.2); /* 内側の影を追加 */ }
3. ::beforeと::afterの活用:
   • ::beforeと::afterを使用して、ボタンの前にアイコンを追加したり、ボタンの角に装飾的な要素を追加したりします。これにより、ボタンのデザインに個性を加えることができます。.button::before { content: "\2713 "; /* チェックマークアイコンを追加 */ margin-right: 5px; }

フォームのデザイン

フォームは、Webサイト上でユーザーからの情報を収集するために不可欠な要素です。疑似要素と疑似クラスを組み合わせることで、フォームのデザインを洗練させ、ユーザーの入力をサポートし、使いやすさを向上させることができます。

■使用例:

1. フォーカス状態:
   • input:focusを使用して、入力フィールドにフォーカスが当たったときに枠線の色や影を変化させます。これにより、ユーザーは現在どのフィールドが選択されているかを明確に把握できます。input[type="text"] { border: 1px solid #ccc; padding: 8px; width: 100%; } input[type="text"]:focus { border: 2px solid #007bff; /* フォーカス時の枠線 */ outline: none; /* デフォルトのアウトラインを消す */ box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 影を追加 */ }
2. プレースホルダー:
   • ::placeholderを使用して、入力フィールドのプレースホルダーテキストにスタイルを適用します。これにより、プレースホルダーテキストの色やフォントサイズなどを調整し、デザインに合わせてカスタマイズできます。input[type="text"]::placeholder { color: #999; /* プレースホルダーテキストの色 */ }
3. 無効状態:
   • :disabledを使用して、無効化された入力フィールドにスタイルを適用します。これにより、無効なフィールドを視覚的に区別し、ユーザーにフィードバックを提供できます。input[type="text"]:disabled { background-color: #f0f0f0; /* 無効時の背景色 */ color: #999; /* 無効時のテキスト色 */ cursor: not-allowed; /* カーソルを変更 */ }

実践！Webデザインでの活用例

ナビゲーションバーのデザイン

ナビゲーションバーは、Webサイトの重要な要素であり、サイト内を移動するためのリンクをまとめたものです。疑似要素と疑似クラスを組み合わせることで、ナビゲーションバーに洗練されたデザインとインタラクティブ性を持たせることができます。

■ナビゲーションバーのデザイン例

1. ホバーエフェクト:
   • a:hoverを使用して、マウスカーソルがリンク上に乗ったときに背景色や文字色を変化させます。これにより、ユーザーはどのリンクが選択されているかを直感的に理解できます。.nav-link { color: #333; /* 通常時の文字色 */ text-decoration: none; /* 下線を消す */ padding: 10px 15px; display: inline-block; } .nav-link:hover { background-color: #f0f0f0; /* ホバー時の背景色 */ color: #007bff; /* ホバー時の文字色 */ }
2. アクティブ状態:
   • a:activeを使用して、リンクがクリックされたときに背景色や文字色を変化させます。これにより、ユーザーはクリックされたことが視覚的にフィードバックされます。.nav-link:active { background-color: #d9d9d9; /* クリック時の背景色 */ }
3. ::beforeと::afterの活用:
   • ::beforeと::afterを使用して、ナビゲーションリンクの前にアイコンを追加したり、各リンクの間に区切り線を表示したりします。これにより、ナビゲーションバーのデザインをより豊かにできます。.nav-link::before { content: "→ "; /* 各リンクの前に矢印アイコンを追加 */ color: #999; } .nav-link:hover::before { color: #007bff; /* ホバー時の矢印の色を変更 */ }

ボタンのデザイン

ボタンは、Webサイトにおける重要なインタラクション要素であり、ユーザーのアクションを促すために使用されます。疑似要素と疑似クラスを組み合わせることで、ボタンに視覚的な変化やアニメーションを追加し、ユーザーエクスペリエンスを向上させることができます。

■ボタンのデザイン例

1. ホバーエフェクト:
   • button:hoverを使用して、マウスカーソルがボタン上に乗ったときに背景色や影を変化させます。これにより、ユーザーはボタンがインタラクティブであることを認識しやすくなります。.button { background-color: #007bff; color: white; border: none; padding: 10px 20px; cursor: pointer; } .button:hover { background-color: #0056b3; /* ホバー時の背景色 */ box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* 影を追加 */ }
2. アクティブ状態:
   • button:activeを使用して、ボタンがクリックされたときに内側の影を追加したり、背景色を暗くしたりします。これにより、ユーザーはボタンが押されたことを明確に感じることができます。.button:active { background-color: #004085; /* クリック時の背景色 */ box-shadow: inset 0px 3px 5px rgba(0, 0, 0, 0.2); /* 内側の影を追加 */ }
3. ::beforeと::afterの活用:
   • ::beforeと::afterを使用して、ボタンの前にアイコンを追加したり、ボタンの角に装飾的な要素を追加したりします。これにより、ボタンのデザインに個性を加えることができます。.button::before { content: "\2713 "; /* チェックマークアイコンを追加 */ margin-right: 5px; }

フォームのデザイン

フォームは、Webサイト上でユーザーからの情報を収集するために不可欠な要素です。疑似要素と疑似クラスを組み合わせることで、フォームのデザインを洗練させ、ユーザーの入力をサポートし、使いやすさを向上させることができます。

■フォームのデザイン例

1. フォーカス状態:
   • input:focusを使用して、入力フィールドにフォーカスが当たったときに枠線の色や影を変化させます。これにより、ユーザーは現在どのフィールドが選択されているかを明確に把握できます。input[type="text"] { border: 1px solid #ccc; padding: 8px; width: 100%; } input[type="text"]:focus { border: 2px solid #007bff; /* フォーカス時の枠線 */ outline: none; /* デフォルトのアウトラインを消す */ box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 影を追加 */ }
2. プレースホルダー:
   • ::placeholderを使用して、入力フィールドのプレースホルダーテキストにスタイルを適用します。これにより、プレースホルダーテキストの色やフォントサイズなどを調整し、デザインに合わせてカスタマイズできます。input[type="text"]::placeholder { color: #999; /* プレースホルダーテキストの色 */ }
3. 無効状態:
   • :disabledを使用して、無効化された入力フィールドにスタイルを適用します。これにより、無効なフィールドを視覚的に区別し、ユーザーにフィードバックを提供できます。input[type="text"]:disabled { background-color: #f0f0f0; /* 無効時の背景色 */ color: #999; /* 無効時のテキスト色 */ cursor: not-allowed; /* カーソルを変更 */ }

まとめ

CSSの疑似要素と疑似クラスについて解説してきました。:と::の違い、よく使われるセレクタ、具体的な使用例を通じて、Webデザインにおける表現の幅を広げるための知識を深めていただけたかと思います。

これらの知識を活かし、あなたのWebサイトのデザインをさらに魅力的に、そして使いやすく進化させてください。CSSの理解を深めることで、Web制作のスキルは確実に向上します。これからもCSSの世界を探求し、Webデザインを楽しんでください。

よくある質問

CSS疑似要素と疑似クラスについて、よくある質問とその回答をまとめました。

CSS疑似要素と疑似クラスの違いは何ですか？

CSS疑似要素は、HTML要素の一部分に対してスタイルを適用するために使用します。例えば、テキストの最初の文字や要素の前後にコンテンツを追加する場合です。一方、CSS疑似クラスは、要素の状態に基づいてスタイルを適用します。例えば、マウスカーソルが要素上にあるときや、要素がクリックされたときなどです。簡単に言うと、疑似要素は要素の「一部」に、疑似クラスは要素の「状態」に対してスタイルを適用します。

:と::の違いは何ですか？

CSS3以降では、疑似要素と疑似クラスを区別するために、コロンの数（:と::）が使い分けられています。疑似クラスは1つのコロン（:）、疑似要素は2つのコロン（::）を使用します。これにより、CSSの可読性が向上し、どのセレクタが疑似要素で、どのセレクタが疑似クラスであるかを明確に区別できるようになりました。ただし、古いブラウザでは、2つのコロン（::）に対応していない場合があるため、1つのコロン（:）でも動作することがあります。

::beforeと::afterの違いは何ですか？

::beforeと::afterは、要素のコンテンツの前と後に、スタイルを適用するための疑似要素です。主に装飾的な要素を追加する際に使用されますが、コンテンツの挿入にも活用できます。これらの疑似要素を使用する際は、contentプロパティで挿入する内容（テキストや画像など）を指定する必要があります。また、インライン要素では::beforeと::afterが正しく表示されない場合があるため、displayプロパティで適切な表示形式（blockやinline-blockなど）を設定することが重要です。

:hover、:active、:focusの違いは何ですか？

:hoverは、マウスカーソルが要素上に乗っている状態（ホバー状態）になったときにスタイルを適用します。:activeは、要素がクリックされたとき、またはアクティブな状態になったときにスタイルを適用します。:focusは、要素がフォーカス状態になったときにスタイルを適用します。フォーカスとは、キーボード操作などによって要素が選択された状態を指します。これらの疑似クラスは、それぞれ異なる状況下で要素に視覚的な変化を与えるために使用されます。

疑似要素と疑似クラスはどのように組み合わせて使えますか？

疑似要素と疑似クラスは、組み合わせて使用することで、より高度なデザイン表現が可能です。例えば、:hoverと::beforeを組み合わせることで、要素にマウスカーソルが乗った際に、::beforeで追加した要素の色や形を変化させることができます。このように組み合わせることで、Webサイトのデザインにインタラクティブ性や動的な表現を取り入れることができます。

CSS疑似要素と疑似クラスは、どのようなWebデザインに活用できますか？

CSS疑似要素と疑似クラスは、様々なWebデザインに活用できます。例えば、ナビゲーションバーのホバーエフェクト、ボタンのクリック時の視覚効果、フォームの入力フィールドのフォーカス時のデザインなどです。これらの要素を活用することで、WebサイトのUI/UXを向上させ、ユーザーにとって使いやすいデザインを実現できます。

CSS疑似要素と疑似クラスを使用する際の注意点はありますか？

CSS疑似要素と疑似クラスを使用する際には、以下の点に注意してください。

• ブラウザの互換性: 古いブラウザでは、一部の疑似要素や疑似クラスが正しく表示されない場合があります。必要に応じて、ベンダープレフィックスを使用したり、代替手段を用意したりする必要があります。
• パフォーマンス: 過度な使用は、Webサイトの表示速度に影響を与える可能性があります。必要最低限の使用に留め、パフォーマンスへの影響を考慮しながら使用してください。
• 可読性: CSSコードが複雑になりすぎないように、コードの可読性を意識して記述してください。コメントや適切な命名規則を使用し、メンテナンス性を高めることが重要です。