はじめに
この記事を読めば、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を使って選択されたタブに対応するコンテンツを表示し、それ以外のコンテンツを非表示にしています。
●注意点と対処法
擬似要素を利用する際には、いくつかの注意点があります。
ここでは、その注意点と対処法を説明します。
擬似要素はJavaScriptで直接操作できない
擬似要素は、DOMツリーには存在しないため、JavaScriptで直接操作することはできません。
しかし、対応する親要素のスタイルやクラスを変更することで、擬似要素のスタイルを間接的に変更することができます。
擬似要素内でのHTMLタグの使用
擬似要素内にHTMLタグを使用することはできません。
そのため、テキストや簡単な装飾に限定されます。
HTMLタグを利用する必要がある場合は、擬似要素ではなく、通常の要素を使用しましょう。
擬似要素のイベントハンドリング
擬似要素には直接イベントリスナーを追加することはできませんが、親要素のイベントリスナーを利用して間接的に擬似要素のイベントを捕捉できます。
例えば、親要素にマウスオーバーイベントを追加し、擬似要素に対して何らかの操作を行うことができます。
●カスタマイズ方法
擬似要素を使ったデザインは、CSSのみで簡単にカスタマイズができます。
例えば、色や大きさ、フォント、アニメーション効果などを変更することができます。
カスタマイズする際には、擬似要素に対応するCSSセレクタを使って、必要なスタイルルールを追加・変更しましょう。
まとめ
擬似要素は、HTMLとCSSを用いてコンテンツやデザインを簡単に追加・変更できる便利な機能です。
しかし、いくつかの注意点がありますので、使用する際には注意しましょう。
今回紹介したサンプルコードを参考に、擬似要素を活用して効果的なデザインを実現してください。
