初心者もわかる！JavaScriptにおける擬似要素の使い方10選

はじめに
●JavaScript擬似要素とは
- ○擬似要素の基本
●JavaScript擬似要素の使い方
●JavaScript擬似要素の応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptの擬似要素を使ったデザインやアニメーションを実装できるようになります。

初心者の方でも理解できるよう、基本から応用まで幅広く解説しています。

サンプルコードもたくさん紹介しているので、ぜひ参考にしてください。

●JavaScript擬似要素とは

JavaScript擬似要素とは、HTML要素の一部を選択し、スタイルを適用するためのセレクターです。

主にCSSで使われる擬似要素ですが、JavaScriptでも操作が可能です。

例えば、::beforeや::afterなどが該当します。

○擬似要素の基本

擬似要素は、::beforeや::afterのように二つのコロン(::)で始まります。

これらの擬似要素は、要素の前後にコンテンツを追加することができます。

また、擬似要素には、contentプロパティを使ってコンテンツを設定することができます。

●JavaScript擬似要素の使い方

JavaScriptで擬似要素を操作するには、window.getComputedStyleメソッドとgetPropertyValueメソッドを使います。

これらのメソッドを使って、擬似要素のスタイルを取得・設定することができます。

○サンプルコード1：beforeとafterを使った装飾

下記のサンプルコードでは、::beforeと::after擬似要素を使って、要素に装飾を追加しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        .decorated::before {
            content: "【";
        }
        .decorated::after {
            content: "】";
        }
    </style>
</head>
<body>
    <p class="decorated">装飾されたテキスト</p>
</body>
</html>

このコードでは、.decoratedクラスが適用された<p>要素の前後に【】が追加されます。

○サンプルコード2：ホバーエフェクトの実装

下記のサンプルコードでは、::after擬似要素を使って、ボタンにホバーエフェクトを実装しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        .button {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            background-color: #1abc9c;
            color: white;
            cursor: pointer;
            text-decoration: none;
            font-size: 16px;
        }
        /* 擬似要素afterを用いてホバーエフェクトを作成 */
        .button::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.1);
            opacity: 0;
            transition: opacity 0.3s;
        }
        /* マウスオーバー時にホバーエフェクトを表示 */
        .button:hover::after {
            opacity: 1;
        }
    </style>
</head>
<body>
    <a href="#" class="button">ホバーエフェクトのあるボタン</a>
</body>
</html>

このコードでは、.buttonクラスが適用された<a>要素にホバーエフェクトが追加されます。

マウスオーバー時に、擬似要素::afterの透明度が変更されることで、ホバーエフェクトが表現されています。

○サンプルコード3：擬似要素を使ったカウンター

次のサンプルコードでは、::before擬似要素を用いて、順序付きリストのアイテムに番号を追加しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        .counter-list {
            list-style: none;
            counter-reset: my-counter;
        }
        .counter-list li {
            counter-increment: my-counter;
        }
        /* 擬似要素beforeを用いて番号を表示 */
        .counter-list li::before {
            content: counter(my-counter) ". ";
        }
    </style>
</head>
<body>
    <ol class="counter-list">
        <li>アイテム1</li>
        <li>アイテム2</li>
        <li>アイテム3</li>
    </ol>
</html>

このコードでは、.counter-listクラスが適用された<ol>要素の各<li>要素の前に、擬似要素::beforeを使って番号が追加されます。

○サンプルコード4：擬似要素を活用したチェックボックス

次のサンプルコードでは、::beforeおよび::after擬似要素を用いて、カスタムデザインのチェックボックスを実装しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        .checkbox-wrapper {
            display: inline-block;
            position: relative;
            cursor: pointer;
        }
        .checkbox {
            display: none;
        }
        /* チェックボックスのデザインを擬似要素beforeで作成 */
        .checkbox-wrapper::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            border: 2px solid #1abc9c;
            box-sizing: border-box;
        }
        /* チェックマークのデザインを擬似要素afterで作成 */
        .checkbox-wrapper::after {
            content: "";
            position: absolute;
            top: 5px;
            left: 7px;
            width: 6px;
            height: 10px;
            border-right: 2px solid white;
            border-bottom: 2px solid white;
            transform: rotate(45deg);
            opacity: 0;
        }
        /* チェックボックスがチェックされた時にチェックマークを表示 */
        .checkbox:checked + .checkbox-wrapper::after {
            opacity: 1;
        }
    </style>
</head>
<body>
    <label>
        <input type="checkbox" class="checkbox">
        <span class="checkbox-wrapper"></span>
        カスタムチェックボックス
    </label>
</body>
</html>

このコードでは、<input type="checkbox">要素に対してカスタムデザインを適用しています。

チェックボックスのデザインは擬似要素::beforeで作成し、チェックマークのデザインは擬似要素::afterで作成しています。

チェックボックスがチェックされた時に、擬似要素::afterの透明度が変更されることで、チェックマークが表示されます。

●JavaScript擬似要素の応用例

擬似要素を用いたデザインやアニメーションは多岐にわたります。

いくつかの応用例とサンプルコードを示します。

○サンプルコード5：アニメーション効果の追加

このサンプルコードでは、ボタンにホバーエフェクトとしてアニメーション効果を追加しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        .button {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            color: white;
            background-color: #3498db;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        /* ホバーエフェクトのアニメーション */
        .button::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.1);
            transition: width 0.3s;
        }
        /* ホバー時のアニメーション効果 */
        .button:hover::before {
            width: 100%;
        }
    </style>
</head>
<body>
    <a href="#" class="button">ホバーアニメーションボタン</a>
</body>
</html>

このコードでは、.button要素に対して::before擬似要素を用いてアニメーション効果を追加しています。

ボタンにホバーした際に、擬似要素の幅が変化することでアニメーション効果が表現されます。

○サンプルコード6：コンテンツの表示・非表示

擬似要素を使って、コンテンツの表示・非表示を切り替えるサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        .toggle {
            display: inline-block;
            cursor: pointer;
        }
        .toggle::after {
            content: "▼";
            display: inline-block;
            margin-left: 5px;
        }
        .content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s;
        }
        /* .toggle要素にdata-show属性が追加された際に、.content要素の表示・非表示を切り替える */
        .toggle[data-show] + .content {
            max-height: 200px;
        }
    </style>
    <script>
        window.addEventListener("DOMContentLoaded", function() {
            var toggle = document.querySelector(".toggle");
            toggle.addEventListener("click", function() {
                if (this.hasAttribute("data-show")) {
                    this.removeAttribute("data-show");
                } else {
                    this.setAttribute("data-show", "");
                }
            });
        });
    </script>
</head>
<body>
    <div class="toggle">クリックしてコンテンツを表示・非表示</div>
    <div class="content">
        <p>ここに表示・非表示を切り替えるコンテンツが入ります。</p>
    </div>
</body>
</html>

このコードでは、.toggle要素に::after擬似要素を用いて▼マークを表示しています。

.toggle要素がクリックされると、JavaScriptを使ってdata-show属性を追加・削除し、.content要素の表示・非表示を切り替えています。

○サンプルコード7：擬似要素を使ったプログレスバー

擬似要素を用いて、プログレスバーを実装するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        .progress-bar {
            position: relative;
            width: 100%;
            height: 20px;
            background-color: #f0f0f0;
        }
        .progress-bar::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background-color: #3498db;
            width: 50%; /* 進捗率を指定 */
        }
    </style>
</head>
<body>
    <div class="progress-bar"></div>
</body>
</html>

.progress-bar要素に対して::before擬似要素を用いて、進捗率を表現しています。

進捗率を変更するには、擬似要素のwidthプロパティを変更します。

○サンプルコード8：擬似要素を使ったクリッカブルマップ

擬似要素を用いて、クリッカブルマップを実装するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        .map {
            position: relative;
            width: 300px;
            height: 200px;
            background-image: url('map-image.jpg');
            background-size: cover;
        }
        /* 地域Aを示す擬似要素 */
        .map::before {
            content: "";
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: rgba(255, 0, 0, 0.5);
            cursor: pointer;
        }
        /* 地域Bを示す擬似要素 */
        .map::after {
            content: "";
            position: absolute;
            top: 100px;
            left: 200px;
            width: 50px;
            height: 50px;
            background-color: rgba(0, 255, 0, 0.5);
            cursor: pointer;
        }
    </style>
    <script>
        window.addEventListener("DOMContentLoaded", function() {
            var map = document.querySelector(".map");
            map.addEventListener("click", function(event) {
                // クリックされた地域を特定
                var region = "";
                if (event.offsetX >= 50 && event.offsetX <= 150 && event.offsetY >= 50 && event.offsetY <= 150) {
                    region = "地域A";
                } else if (event.offsetX >= 200 && event.offsetX <= 250 && event.offsetY >= 100 && event.offsetY <= 150) {
                    region = "地域B";
                }
                // 地域が特定できた場合にアラートを表示
                if (region) {
                    alert(region + "がクリックされました。");
                }
            });
        });
    </script>
</head>
<body>
    <div class="map"></div>
</body>
</html>

このコードでは、.map要素に対して::beforeと::after擬似要素を用いて、それぞれ地域Aと地域Bを示しています。

クリックされた地域を特定するために、JavaScriptでクリック位置を取得し、アラートでクリックされた地域を表示しています。

○サンプルコード9：擬似要素を利用したアコーディオンメニュー

擬似要素を用いて、アコーディオンメニューを実装するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        /* アコーディオンのヘッダー部分のスタイル */
        .accordion {
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }
        /* 矢印の表示を擬似要素で行う */
        .accordion::after {
            content: "▼";
            float: right;
        }
        /* アコーディオンのコンテンツ部分のスタイル */
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s;
        }
    </style>
    <script>
        window.addEventListener("DOMContentLoaded", function() {
            // アコーディオンヘッダーがクリックされた際の動作を定義
            var accordions = document.querySelectorAll(".accordion");
            accordions.forEach(function(accordion) {
                accordion.addEventListener("click", function() {
                    // コンテンツ部分の表示・非表示を切り替える
                    var content = this.nextElementSibling;
                    content.style.maxHeight = content.style.maxHeight ? "" : content.scrollHeight + "px";
                });
            });
        });
    </script>
</head>
<body>
    <div class="accordion">アコーディオン1</div>
    <div class="accordion-content">ここにアコーディオン1のコンテンツが表示されます。</div>
    <div class="accordion">アコーディオン2</div>
    <div class="accordion-content">ここにアコーディオン2のコンテンツが表示されます。</div>
</body>
</html>

このコードでは、.accordionクラスの要素に対して::after擬似要素を用いて矢印を表示しています。

アコーディオンのヘッダー部分がクリックされた際に、JavaScriptを使ってコンテンツ部分の表示・非表示を切り替えています。

○サンプルコード10：擬似要素を使ったタブ切り替え

擬似要素を使って、タブ切り替えを実装するサンプルコードをご紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        /* タブ部分のスタイル設定 */
        .tab {
            display: inline-block;
            cursor: pointer;
            padding: 10px 20px;
            background-color: #ccc;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        /* 選択されているタブのスタイル設定 */
        .tab.selected {
            background-color: #fff;
        }
        /* コンテンツ部分のスタイル設定 */
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #ccc;
            border-top: none;
        }
        /* 選択されているコンテンツのスタイル設定 */
        .tab-content.selected {
            display: block;
        }
    </style>
    <script>
        window.addEventListener("DOMContentLoaded", function() {
            var tabs = document.querySelectorAll(".tab");
            tabs.forEach(function(tab) {
                tab.addEventListener("click", function() {
                    // すべてのタブとコンテンツから選択状態を削除
                    tabs.forEach(function(t) {
                        t.classList.remove("selected");
                    });
                    var contents = document.querySelectorAll(".tab-content");
                    contents.forEach(function(c) {
                        c.classList.remove("selected");
                    });

                    // クリックされたタブと対応するコンテンツを選択状態にする
                    this.classList.add("selected");
                    var targetId = this.getAttribute("data-target");
                    var targetContent = document.getElementById(targetId);
                    targetContent.classList.add("selected");
                });
            });
        });
    </script>
</head>
<body>
    <div class="tab selected" data-target="content1">タブ1</div>
    <div class="tab" data-target="content2">タブ2</div>
    <div class="tab-content selected" id="content1">ここにタブ1のコンテンツが表示されます。</div>
    <div class="tab-content" id="content2">ここにタブ2のコンテンツが表示されます。</div>
</body>
</html>

このコードでは、タブ部分に.tabクラスを適用し、タブが選択された状態のスタイルを.selectedクラスで設定しています。

タブがクリックされた際に、JavaScriptを使って選択されたタブに対応するコンテンツを表示し、それ以外のコンテンツを非表示にしています。