はじめに
「CSSの擬似クラス」という言葉を聞いたことはありますか？
これは、HTML要素に条件付きでスタイルを適用するための便利な仕組みです。
本記事では、初心者にもわかりやすく擬似クラスの基本を解説し、実際に活用する方法を紹介します。
ゆうや
「擬似クラスって便利そう！でも、どうやって使えばいいの？」
一緒に学んで、実際に使いながら理解を深めていきましょう！
擬似クラスとは？
擬似クラスは、特定の状態や条件に基づいてHTML要素にスタイルを適用するためのCSSの機能です。
たとえば、マウスカーソルを合わせたときにスタイルを変える「:hover」や、リストの偶数番目に適用する「:nth-child(2n)」などがあります。
よく使う擬似クラスの紹介
CSSの擬似クラスにはさまざまな種類がありますが、特に初心者が最初に知っておきたいものをいくつかピックアップしました。
これらは日常的なウェブデザインや開発で頻繁に使われるものばかりです。
例えば、「ボタンの色をホバーしたときだけ変えたい」「リストの偶数行だけ色をつけたい」といった場合、擬似クラスを使うと簡単に実現できます。
このセクションでは、具体的な使用例とともに、それぞれの擬似クラスの役割をわかりやすく解説します。
- :hover
マウスカーソルが要素の上に来たときだけ適用されるスタイルです。
リンクやボタンなど、ユーザーがクリックする要素によく使われます。
例: ボタンをホバーしたら色を変えたい場合に使います。
- :focus
ユーザーがフォーム入力やボタンをタブキーで選択したときに適用されるスタイルです。
視覚的なフィードバックを与えたいときに便利です。
例: 入力フィールドが選択されたとき、背景色を変える場合に活用できます。
- :nth-child()
要素の順番を指定してスタイルを適用できます。
リストやテーブルの行を偶数・奇数で色分けする際によく使用されます。
例: テーブルの偶数行に背景色をつける場合に使えます。
- :first-child / :last-child
リストやテーブルの最初または最後の要素にスタイルを適用します。
強調したい場合に便利です。
例: リストの最初の項目だけ太字にする場合に使います。
擬似クラスの使い方
このセクションでは、よく使われる擬似クラスを例に、具体的な使用方法をわかりやすく解説していきます。
初心者でもすぐに実践できる内容ですので、一緒に試してみましょう！
例1: ホバーしたとき色を変える
例2:リストの指定した要素だけに背景色をつける
- even
偶数
- odd
奇数
- 3n
3の倍数
- n+2
2番目以降の要
- -n+3
1～3番目の要素
例3:リストの最後の項目にスタイルを適用
擬似クラスと擬似要素の違い
CSSでは、「擬似クラス」と「擬似要素」という2つの似た概念が存在しますが、それぞれの役割や用途は異なります。
このセクションでは、その違いをわかりやすく解説します。
擬似クラスとは？
擬似クラスは、要素の「状態」や「条件」に基づいてスタイルを適用するための仕組みです。
たとえば、「マウスカーソルがボタンの上にあるときだけ色を変えたい」「リストの最初の項目にだけ特別なデザインを適用したい」といった場合に使用します。
よく使われる擬似クラスの例:
:hover:focus:nth-child()
擬似クラスは、既存のHTML要素に追加条件を付け加えるようなイメージです。
実際に要素を変えるわけではなく、「要素が特定の状態になった場合」を対象にスタイルを設定します。
擬似要素とは？
一方、擬似要素は、HTMLでは直接存在しない「仮想的な要素」にスタイルを適用するためのものです。たとえば、「段落の最初の文字だけを装飾したい」や、「要素の前後に装飾的な内容を追加したい」といった場合に使用されます。
よく使われる擬似要素の例:
::before::after::first-letter
擬似要素は、実際には存在しない「部分的な要素」を対象とするため、より細かいデザインや装飾に向いています。
擬似クラスと擬似要素の比較表
| 項目 | 擬似クラス | 擬似要素 |
|---|---|---|
| 対象 | HTML要素の状態や条件に基づく | HTMLで存在しない仮想的な部分を対象 |
| 主な用途 | 状態変化に応じたスタイル変更 | 部分的なスタイル適用や装飾の追加 |
| 使用例 | :hover, :nth-child(), :focus | ::before, ::after, ::first-letter |
| 書き方 | コロン1つ（:hover） | コロン2つ（::before） |
擬似クラスは「要素が特定の条件下にある場合」にスタイルを適用するためのもの、擬似要素は「仮想的な要素や部分」を装飾するためのものです。
どちらもウェブデザインをより柔軟かつ表現豊かにするための重要なCSSの仕組みです。
用途に応じて使い分けることで、より魅力的なデザインが可能になります。
さいごに
この記事では、CSSの擬似クラスについて基本的な概念から、よく使われる擬似クラス、実際の使い方までを解説しました。擬似クラスを理解すると、特定の条件や状態に応じたデザインの適用が簡単になり、より柔軟で使いやすいウェブサイトを作ることができます。
また、擬似クラスはCSSデザインの基本技術でありながら、非常に強力なツールです。
この記事をきっかけに、ぜひ実際のプロジェクトで積極的に活用してみてください。
もしこの記事で学んだ内容をさらに深めたい場合は、以下のようなテーマに挑戦するのもおすすめです
- 擬似要素（
::beforeや::after）の活用法 - CSSトランジションやアニメーションとの組み合わせ
- メディアクエリと擬似クラスを組み合わせたレスポンシブデザイン
CSSの可能性を広げることで、あなたのウェブデザインの幅も大きく広がるでしょう。
最後までお読みいただき、ありがとうございました！
