【CSS】擬似要素完全ガイド！12の使い方と応用例

はじめに
●CSSにおいての擬似要素の基本
- ○擬似要素とは何か？
- ○主な擬似要素の種類
●CSSでの擬似要素の使い方
●CSSでの擬似要素の応用例
●CSSでの擬似要素の注意点と対処法
- ○共通の問題と解決策
- ○ブラウザ互換性の扱い
●CSSの擬似要素のカスタマイズ方法
- ○個性的なデザインの実現
- ○レスポンシブ対応のテクニック
まとめ

はじめに

CSSでは、擬似要素が重要な役割を担っています。

この記事では、擬似要素の基本から応用までを初心者の方でも理解しやすいように解説していきます。

擬似要素を使いこなすことで、HTMLのコードを変更することなく、より魅力的なウェブページのデザインが可能になります。

ここでは、擬似要素の様々な使い方をサンプルコードを交えて紹介し、あなたのCSSデザインのスキルを向上させることを目指します。

●CSSにおいての擬似要素の基本

CSSにおける擬似要素は、HTMLには存在しないが、CSSを使ってスタイルを適用するための仮想的な要素です。

これにより、HTMLコードを変更することなく、要素の前後や特定の状態に装飾を追加することが可能です。

例えば、テキストの最初の文字に特別なスタイルを適用したり、要素の後に装飾を加えたりする場面で活用されます。

○擬似要素とは何か？

擬似要素とは、実際にはHTML要素としては存在しないが、CSSを通じて定義される仮想的な要素のことを指します。

これにより、特定のHTML要素に追加のスタイリングを施すことができます。例えば、段落の最初の文字に異なるスタイルを適用することが可能です。

擬似要素は「::」の記号を用いて定義され、特定の要素にスタイルを適用する際に使用されます。

○主な擬似要素の種類

CSSには様々な擬似要素があり、それぞれ異なる用途に使用されます。

主な擬似要素には、下記のようなものがあります。

‘::before’は要素の内容の前に仮想要素を挿入し、通常は装飾的な要素を追加するのに使われます。

‘::after’は要素の内容の後に仮想要素を挿入し、追加の装飾を提供します。

‘::first-letter’は要素内の最初の文字に特別なスタイルを適用し、ドロップキャップやイニシャルレターを強調するのに役立ちます。

‘::first-line’は要素の最初の行にスタイルを適用し、段落の最初の行を目立たせます。

‘::selection’はユーザーによって選択されたテキストにスタイルを適用し、テキストの選択色をカスタマイズできます。

これらの擬似要素を使用することで、HTMLの変更を最小限に抑えつつ、効果的なデザインを施すことが可能です。

●CSSでの擬似要素の使い方

CSSでの擬似要素の使用方法は、デザインにおいて多様な表現を可能にします。

ここでは、擬似要素の基本的な使い方として、特によく使われる::beforeと::after擬似要素の使い方を見ていきます。

これらの擬似要素を活用することで、HTMLを変更することなく、ウェブページに装飾的な要素を加えることができます。

○サンプルコード1：::beforeを使ったアイコンの追加

::before擬似要素を使うことで、要素の内容の前に仮想的な要素を追加できます。

たとえば、段落の先頭にアイコンを挿入することが可能です。

p::before {
  content: "★";
  color: red;
}

このコードは、p要素の内容の前に赤い星のアイコンを追加します。

contentプロパティによって表示する内容を指定し、colorプロパティで色を設定しています。

この結果、各段落の先頭に赤い星が表示されるようになります。

○サンプルコード2：::afterを使った矢印アイコンの追加

::after擬似要素は、要素の内容の後に仮想的な要素を追加するために使用されます。

下記のサンプルコードでは、リンクの後ろに矢印アイコンを追加しています。

a::after {
  content: "→";
  color: blue;
}

このコードは、a要素、つまりリンクの後ろに青い矢印を追加します。

contentプロパティで矢印を指定し、colorプロパティで色を設定しています。

この結果、リンクのテキストの後ろに青い矢印が表示されるようになり、リンクがより目立つようになります。

○サンプルコード3：::first-letterで最初の文字を装飾

CSSにおける::first-letter擬似要素は、特定の要素の最初の文字に特別なスタイルを適用するために使用されます。

これは、文章の最初の文字を目立たせるための装飾や、特定のスタイルを適用する際に非常に有効です。

下記のサンプルコードは、段落の最初の文字に特別な装飾を施す方法を表しています。

p::first-letter {
  font-size: 24px;
  font-weight: bold;
  color: blue;
}

このコードにより、段落（p要素）の最初の文字が、サイズが24ピクセルの太字で青色になります。

これは、記事やブログの入り口で目を引くデザインにするのに適しています。

たとえば、古典的な書籍の最初の文字が装飾されているのを思い出させます。

○サンプルコード4：::first-lineで最初の行を強調

::first-line擬似要素は、特定の要素の最初の行にスタイルを適用するために使用されます。

これは、段落やテキストの最初の行だけを強調して目立たせる際に役立ちます。

下記のサンプルコードでは、段落の最初の行に特定のスタイルを適用する方法を表しています。

p::first-line {
  font-weight: bold;
  color: green;
}

このコードでは、段落（p要素）の最初の行が太字で緑色になります。

これにより、読者の注意を引きつけ、テキストの重要な部分に目を向けさせることができます。

ウェブページのコンテンツにおいて、特に重要な情報を際立たせる効果があります。

●CSSでの擬似要素の応用例

CSSの擬似要素は、単に基本的なスタイリングを超えて、より高度なデザインテクニックを実現するためにも使用されます。

ここでは、特に便利な擬似要素の応用例として、ユーザーが選択したテキストのスタイルを変更する::selectionと、フォームのプレースホルダーのスタイルをカスタマイズする::placeholderについて紹介します。

○サンプルコード5：::selectionで選択テキストのスタイル変更

::selection擬似要素は、ユーザーによって選択されたテキストに特別なスタイルを適用するために使われます。

この擬似要素を使用すると、選択されたテキストの見た目をカスタマイズして、より注目を集めることができます。

下記のサンプルコードは、選択されたテキストの背景色と文字色を変更する方法を表しています。

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

このコードは、ウェブページ上でユーザーがテキストを選択した際に、背景色を黄色にし、文字色を黒に変更します。

通常のブラウザのデフォルトの選択スタイルとは異なるスタイルを適用することで、ウェブサイトのユーザーエクスペリエンスを向上させることができます。

○サンプルコード6：::placeholderでプレースホルダーのスタイル変更

::placeholder擬似要素は、入力フォームなどのプレースホルダーテキストにスタイルを適用するために使用されます。

この擬似要素を利用することで、プレースホルダーテキストをより目立たせたり、ウェブサイトの全体的なデザインテーマに合わせたりすることができます。

下記のサンプルコードは、プレースホルダーテキストの色とフォントスタイルをカスタマイズする方法を表しています。

input::placeholder {
  color: grey;
  font-style: italic;
}

このコードは、input要素のプレースホルダーテキストの色をグレーにし、イタリック体にスタイルを適用します。

これにより、プレースホルダーテキストがより目立ち、ユーザーが入力する情報の種類を直感的に理解できるようになります。

○サンプルコード7：ツールチップの作成

ツールチップは、ウェブページ上の要素にマウスカーソルを合わせたときに情報を表示する小さなポップアップボックスです。

CSSの擬似要素を使ってツールチップを簡単に作成できます。

下記のサンプルコードは、要素にホバーしたときにツールチップを表示しています。

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  width: 120px;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px 0;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover::after {
  opacity: 1;
}

このコードは、.tooltipクラスを持つ要素にマウスカーソルを合わせると、data-tooltip属性で指定されたテキストがポップアップとして表示されます。

ツールチップの位置やサイズ、色などはCSSで自由に調整できます。

○サンプルコード8：クリアフィックスの実装

フロート要素の後に続くコンテンツがフロート要素を無視してしまう問題を解決するために、「クリアフィックス」がよく使用されます。

下記のサンプルコードは、クリアフィックスの実装方法を表しています。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

このコードは、.clearfixクラスを持つ要素の子要素がフロートしている場合、その要素の後に空のコンテンツを挿入し、clear: both;を適用してフロートを解除します。

これにより、フロート要素の後に続くコンテンツが適切に配置されるようになります。

○サンプルコード9：カスタムチェックボックスのデザイン

ウェブデザインでは、フォーム要素の見た目をカスタマイズすることがしばしば求められます。

CSSの擬似要素を利用することで、標準のチェックボックスをより魅力的でユニークなデザインに変えることができます。

下記のサンプルコードは、カスタムチェックボックスのデザインを実装する方法を表しています。

.custom-checkbox {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 2px solid #ddd;
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.custom-checkbox::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 17px;
  height: 17px;
  background-color: #2196F3;
  opacity: 0;
  transition: opacity 0.2s;
}

.custom-checkbox input[type="checkbox"]:checked ~ .custom-checkbox::after {
  opacity: 1;
}

このコードでは、.custom-checkboxクラスを持つ要素に対して、透明度を0に設定したチェックボックスと、デザイン用の::after擬似要素を使用しています。

ユーザーがチェックボックスを選択すると、::after擬似要素が表示され、カスタムチェックボックスの見た目が変化します。

○サンプルコード10：アコーディオンメニューの作成

アコーディオンメニューは、情報をコンパクトに表示し、ユーザーが必要に応じて内容を表示させることができる便利なUIコンポーネントです。

CSSの擬似要素とJavaScriptを組み合わせることで、効果的なアコーディオンメニューを作成できます。

下記のサンプルコードは、シンプルなアコーディオンメニューの基本的な構造を表しています。

/* CSS */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

.accordion::after {
  content: '\002B';
  color: #777;
  float: right;
  margin-left: 5px;
}

.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

// JS
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

このコードでは、.accordionクラスを持つ要素をクリックすると、隣接する.panelクラスの要素の表示が切り替わります。

CSSでスタイリングを施し、JavaScriptで表示の切り替えを行っています。

○サンプルコード11：追加のデザイン例

CSSの擬似要素を使用して、独創的なデザインの実現が可能です。

例えば、画像やテキストにホバーエフェクトを加えることで、ウェブページに動的な要素を導入できます。

下記のサンプルコードは、画像にホバーした際に表示されるテキストのオーバーレイを作成する方法を表しています。

.image-overlay {
  position: relative;
  width: 300px;
  height: 200px;
}

.image-overlay img {
  width: 100%;
  height: auto;
}

.image-overlay::after {
  content: "ここにテキスト";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-overlay:hover::after {
  opacity: 1;
}

このコードでは、.image-overlayクラスを持つ要素の中にある画像にマウスカーソルを合わせると、::after擬似要素を使用して半透明の黒いオーバーレイが表示され、中央にテキストが現れます。

このようなエフェクトは、ユーザーの注意を引き付けるのに効果的です。

○サンプルコード12：別の応用例

CSSの擬似要素を使って、独自のインタラクティブな要素を作成することもできます。

下記のサンプルコードは、ボタンをクリックすると色が変わるインタラクティブな要素を実装する方法を表しています。

.interactive-element {
  position: relative;
  width: 200px;
  height: 50px;
  background-color: #ffcc00;
  color: black;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

.interactive-element::before {
  content: "クリックしてね";
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #ffcc00;
  color: black;
  text-align: center;
  line-height: 50px;
  opacity: 0;
  transition: opacity 0.3s, top 0.3s;
}

.interactive-element:hover::before {
  opacity: 1;
  top: 0;
}

このコードでは、.interactive-elementクラスを持つ要素にマウスカーソルを合わせると、::before擬似要素を使用して、ボタンの上に新しい層が現れ、メッセージが表示されます。

このような動的なフィードバックは、ユーザーの操作に対して直感的なレスポンスを提供するのに役立ちます。