CSSの擬似クラスと擬似要素を組み合わせた応用例！初心者でもできる高度なデザイン表現

擬似クラスと擬似要素を組み合わせた応用例

先生と生徒の会話形式で理解しよう

生徒

「マウスを乗せたときだけ、文字の前にアイコンを出したり、色を変えたりしたいのですが、そんな複雑なことはできますか？」

先生

「はい、もちろんです！『擬似クラス』と『擬似要素』という二つの道具を組み合わせることで、動きに合わせてデザインが変化する仕掛けを作ることができますよ。」

生徒

「二つを同時に使うんですね。難しそうですが、私にも書けますか？」

先生

「それぞれの役割を順番に整理していけば、未経験の方でも大丈夫です。Webサイトがもっと楽しくなる応用テクニックを学んでいきましょう！」

1. 擬似クラスと擬似要素の役割をおさらいしよう

Web制作の世界には、HTMLで書かれた文章や画像に装飾を施すCSS（シーエスエス）という技術があります。その中でも、特定の状態や場所を指し示す特別な記法が二つあります。

まず擬似クラス（ぎじくらす）は、「マウスが乗っているとき（hover）」や「クリックされたとき」など、要素の状態を指します。例えるなら、電球が『点灯しているとき』という条件のようなものです。次に擬似要素（ぎじようそ）は、「最初の一文字目」や「要素の直前（before）」など、要素の場所やパーツを指します。これは、電球の『フィラメント部分』という特定の部品を指定するようなイメージです。これらを合体させることで、「マウスが乗ったときに、特定のパーツを出現させる」といった高度な命令が可能になります。

2. マウスホバーでアイコンが出現するボタン

最初にご紹介するのは、ボタンの上にマウスの矢印（カーソル）を乗せたときに、文字の前に小さな記号を表示させるテクニックです。これは、擬似クラスの :hover と擬似要素の ::before を組み合わせて作ります。

未経験の方でも、ボタンに動きがあると「あ、ここが押せるんだな」と直感的にわかりますよね。こうしたユーザーへの優しさをデザインに組み込むことができます。まずはコードを見て、どのような仕組みで動いているか体験してみましょう。


<style>
    .btn-custom {
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        position: relative;
    }

    /* 通常時は何も表示しません */
    .btn-custom::before {
        content: "→ ";
        opacity: 0;
        transition: 0.3s;
    }

    /* マウスが乗ったとき（hover）に、擬似要素（before）を表示させます */
    .btn-custom:hover::before {
        opacity: 1;
    }
</style>

<div class="p-3">
    <button class="btn-custom">詳しくはこちら</button>
</div>

ブラウザ表示

3. リンクを触ったときに下線が伸びるアニメーション

Webサイトのメニューなどで、リンクにマウスを乗せるとスッと下線が伸びてくるオシャレなデザインを見たことはありませんか？これも擬似クラスと擬似要素のコンビネーションで実現できます。

この場合、::after という擬似要素で「透明で幅がゼロの線」をあらかじめ作っておきます。そして、:hover という擬似クラスが発動した瞬間に、その線の幅を100%に広げるという命令を出します。パソコン操作が初めての人にとっても、自分の操作に画面が反応してくれるのは非常に心地よい体験になります。


<style>
    .cool-link {
        text-decoration: none;
        color: #333;
        position: relative;
        font-weight: bold;
    }

    /* 線の土台を下に作っておきます */
    .cool-link::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #ff5722;
        transition: 0.4s;
    }

    /* ホバーした時に幅を広げます */
    .cool-link:hover::after {
        width: 100%;
    }
</style>

<div class="p-4">
    <a href="#" class="cool-link">メニューの項目</a>
</div>

ブラウザ表示

4. リストの奇数番目だけデザインを変える応用

表形式のデータや箇条書きのリストで見やすいデザインにするために、1行おきに色を変える「縞々（しましま）模様」をよく使います。これは :nth-child(odd) という擬似クラスの得意分野です。ここに ::before を組み合わせると、特定の行だけに特別なアイコンを付けることができます。

プログラミング未経験の方は「1行ずつ手作業で色を変えるのかな？」と思うかもしれませんが、CSSを使えば一瞬です。自動的に計算して「1番目、3番目、5番目……」と判断してくれるので、どんなに長いリストになっても間違いが起きません。正確さが求められるパソコン作業において、この自動化の仕組みはとても重要です。


<style>
    .striped-list {
        list-style: none;
        padding: 0;
    }
    .striped-list li {
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

    /* 奇数番目（odd）の行にだけ、前に印を付けます */
    .striped-list li:nth-child(odd)::before {
        content: "● ";
        color: #28a745;
    }
</style>

<div class="p-3">
    <ul class="striped-list">
        <li>項目その1</li>
        <li>項目その2</li>
        <li>項目その3</li>
        <li>項目その4</li>
    </ul>
</div>

ブラウザ表示

5. 画像の上にマウスを乗せると説明文字を出す

少し難しいですが、非常に効果的なテクニックです。画像の上にカーソルを乗せると、フワッと文字や暗いフィルターがかかる演出です。これは、画像の親要素に対して :hover を使い、中にある ::after（暗い背景）や ::before（文字）を変化させて実現します。

Webサイトが動的な、つまり生きているような印象を与えることができます。未経験の方がこれを習得できれば、一気に「初心者卒業」と言えるほどのスキルアップです。コードは少し長くなりますが、一つ一つの意味を考えながら見てみましょう。


<style>
    .image-container {
        position: relative;
        width: 150px;
        height: 100px;
        overflow: hidden;
    }
    .image-container img {
        width: 100%;
        height: 100%;
    }

    /* マウスが乗ったときの暗いフィルター */
    .image-container::after {
        content: "もっと見る";
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.6);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: 0.5s;
    }

    /* ホバーでフィルターを表示 */
    .image-container:hover::after {
        opacity: 1;
    }
</style>

<div class="p-3">
    <div class="image-container border">
        <img src="/img/sample150-100.jpg" alt="サンプル画像">
    </div>
</div>

ブラウザ表示

6. 複雑な組み合わせを書くときの順番のルール

擬似クラスと擬似要素を組み合わせるときには、書く順番に絶対的なルールがあります。それは必ず「擬似クラスが先、擬似要素が後」にすることです。例えば :hover::before という書き方が正解です。

なぜこの順番なのかというと、「マウスが乗っている状態の、直前パーツ」という風に、CSSが順番に条件を絞り込んでいくからです。もし順番を逆にしてしまうと、ブラウザが命令を正しく理解できず、せっかく書いたデザインが表示されません。パソコンへの命令は、とても几帳面で順番に厳しいという性質を覚えておきましょう。

7. デザインが崩れないようにするための注意点

高度な組み合わせを使うようになると、時々デザインが思い通りに動かないことがあります。特に注意したいのが z-index という「重なりの順番」や transition という「アニメーションの時間」の設定です。擬似要素は実在しないパーツなので、重なりの順序によっては他の文字の下に隠れてしまうことがあります。

また、一度にたくさんの仕掛けを作りすぎると、ページが重くなってしまうこともあります。パソコンやスマホの性能は人それぞれですので、どんな環境でもサクサク動くように、効果を絞って使うのが「プロの優しさ」です。まずは一つずつ、確実に動く仕掛けを作るところから始めましょう。

8. 自分だけのオリジナルの動きを作ってみよう

ここまで学んだことを使えば、世界に一つだけのオリジナルボタンやメニューを作ることができます。色の組み合わせ、文字の大きさ、現れるタイミングなどを自由に変えてみてください。CSSには正解がなく、自分の「心地よい」と思う感覚が一番大切です。

最初はサンプルコードの数字を少し変えるだけでも十分な一歩です。例えば、transition: 0.3s; を 1.0s; に変えると、動きがゆっくりになります。こうした小さな発見を繰り返すことで、パソコン操作への苦手意識が、クリエイティブな楽しさへと変わっていくはずです。擬似クラスと擬似要素という二つの強力な武器を手に入れたあなたなら、きっと素敵なWebサイトが作れるようになりますよ！

2026年最新スキルアップ・実践セミナー