CSS擬似要素：Miscellaneousカテゴリでできる便利な装飾テクニック

CSSの擬似要素（Pseudo-elements）は、HTML要素の一部に対してスタイルを適用できる機能です。「Miscellaneous」と呼ばれるカテゴリには、ページ装飾やレイアウト調整などに役立つ、様々な擬似要素が含まれています。ここでは、代表的な擬似要素とその役割について、分かりやすく解説します。

::before と ::after

これらの擬似要素は、要素の前後にコンテンツを挿入するために使用されます。装飾的な要素を追加したり、ナビゲーションメニューの矢印アイコンなどを表現するのに役立ちます。

例：

a::before {
  content: ""; /* 矢印アイコンを表示 */
  margin-right: 5px; /* アイコンとテキストの間隔を調整 */
}

::selection

この擬似要素は、選択されたテキストのスタイルを指定します。背景色や文字色を変更することで、ユーザーが選択している部分を強調することができます。

::selection {
  background-color: #FF0000; /* 選択範囲の背景色を赤色に */
  color: #FFFFFF; /* 選択範囲の文字色を白色に */
}

::placeholder

この擬似要素は、入力フォームのプレースホルダーテキストのスタイルを指定します。入力内容がない状態のテキストを、薄くグレーなどの目立たない色にすることができます。

input::placeholder {
  color: #999; /* プレースホルダーテキストを灰色に */
}

::backdrop

この擬せ要素は、モーダルウィンドウやドロップダウンメニューなどの背後に表示される背景（backdrop）に対してスタイルを指定します。半透明度やぼかし効果などを適用することで、より洗練されたデザインに仕上げることができます。

.modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5); /* 背景を半透明の黒色に */
}

::cue

この擬似要素は、字幕や手話通訳などの字幕コンテンツに対してスタイルを指定します。フォントサイズや色などを調整することで、字幕を読みやすくすることができます。

::cue {
  font-size: 16px; /* 字幕のフォントサイズを大きく */
  color: #FFF; /* 字幕の文字色を白色に */
}

上記以外にも、「Miscellaneous」カテゴリには、まだまだ多くの擬似要素が存在します。詳細は、MDN Web Docsなどのドキュメントを参照することをおすすめします。

CSSの擬似要素を活用することで、Webページをより装飾的かつ機能的にすることができます。今回紹介した「Miscellaneous」関連の擬似要素を理解し、デザインやレイアウトの改善に役立ててみてください。

擬似要素は、すべてのブラウザでサポートされているわけではありません。対応状況は、各擬似要素のドキュメントで確認できます。
擬似要素は、HTML要素の子要素として扱われます。
擬似要素は、コロン(:)の後に2つのコロン(::)を用いて記述します。

::before と ::after

例1：ナビゲーションメニューに矢印アイコンを追加

この例では、ナビゲーションメニューの各項目に矢印アイコンを追加します。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav ul li a::after {
  content: "";
  margin-right: 5px;
}

例2：ボタンに影を追加

この例では、ボタンに影を追加して、立体的な見た目を作ります。

<button>Click me</button>

button::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  z-index: -1;
}

::selection

例1：選択範囲を青色と白で強調

この例では、選択範囲を青色で背景を白にして、強調表示します。

::selection {
  background-color: #007bff;
  color: white;
}

例2：選択範囲に太字とマージンを追加

この例では、選択範囲に太字を適用し、上下にマージンを追加して、読みやすくします。

::selection {
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px;
}

::placeholder

例1：プレースホルダーテキストをグレー色にする

この例では、入力フォームのプレースホルダーテキストをグレー色にして、目立たなくします。

input::placeholder {
  color: #ccc;
}

例2：プレースホルダーテキストに斜体と小さめのフォントサイズを設定

この例では、プレースホルダーテキストに斜体と小さめのフォントサイズを設定して、デザイン性を向上します。

input::placeholder {
  font-style: italic;
  font-size: 0.8em;
}

::backdrop

例1：モーダルウィンドウの背後に半透明の黒い背景を表示

この例では、モーダルウィンドウの背後に半透明の黒い背景を表示して、コンテンツに視線を集中させます。

.modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

例2：ドロップダウンメニューの背後にぼかし効果を適用

この例では、ドロップダウンメニューの背後にぼかし効果を適用して、より洗練されたデザインに仕上げます。

.dropdown::backdrop {
  backdrop-filter: blur(5px);
}

::cue

例1：字幕のフォントサイズを大きくして、読みやすくする

この例では、字幕のフォントサイズを大きくして、読みやすくします。

::cue {
  font-size: 18px;
}

例2：字幕の背景色を黒色にして、白文字で表示

この例では、字幕の背景色を黒色にして、白文字で表示することで、コントラストを上げ、視認性を向上します。

::cue {
  background-color: black;
  color: white;
}

擬似要素は、すべてのブラウザでサポートされているわけではありません。対応状況は、各擬似要素のドキュメントで

CSSの擬似要素は、Webページのデザインやレイアウトを装飾的に拡張するために便利な機能です。しかし、擬似要素を使用する場合は、以下の点に注意する必要があります。

複雑さ
擬似要素を多用すると、コードが複雑になり、メンテナンスが難しくなる可能性があります。
アクセシビリティ
擬似要素は、視覚障害者などのユーザーにとって、コンテンツの理解を妨げる可能性があります。代替テキストなどを用意するなど、アクセシビリティを考慮した対策が必要です。
ブラウザサポート
すべてのブラウザで全ての擬似要素がサポートされているわけではありません。古いブラウザや一部のブラウザでは、擬似要素が正しく機能しない可能性があります。

上記の理由から、状況によっては、擬似要素の代替方法を検討する必要があります。ここでは、代表的な擬似要素とその代替方法について、いくつか例を挙げます。

::before と ::after

代替方法

JavaScriptを使用する: 擬似要素で実現したい機能を、JavaScriptでプログラム的に実装します。
画像を使用する: 擬似要素で表現したい装飾を、画像として用意し、CSSで配置します。
HTML要素を追加する: 擬似要素で表現したいコンテンツを、HTML要素として直接記述します。

例

ナビゲーションメニューの矢印アイコンを、HTMLの <i> タグとCSSで表現する。

<nav>
  <ul>
    <li><a href="#">Home</a><i></i></li>
    <li><a href="#">About</a><i></i></li>
    <li><a href="#">Contact</a><i></i></li>
  </ul>
</nav>

nav ul li i {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border: solid #000 2px;
  transform: rotate(45deg);
  margin-right: 5px;
}

::selection

代替方法

JavaScriptを使用する: 選択範囲のスタイルを、JavaScriptでプログラム的に変更します。

例

document.addEventListener("selectionchange", function() {
  var selection = window.getSelection();
  selection.backgroundColor = "#007bff";
  selection.color = "white";
});

::placeholder

代替方法

ラベルを使用する: プレースホルダーテキストの役割を、HTMLの <label> タグで行います。

例

<label for="input_name">名前</label>
<input type="text" id="input_name" placeholder="名前を入力してください">

::backdrop

代替方法

別のHTML要素を使用する: 背景を表現する別のHTML要素を用意し、CSSでスタイルを調整します。

例

<div class="modal-backdrop"></div>

<div class="modal">
  </div>

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

::cue

代替方法

Web字幕フォーマットを使用する: 字幕コンテンツを、WebVTTなどのWeb字幕フォーマットで記述し、専用のプレイヤーで表示します。

例

WEBVTT

00:00.000 --> 00:05.000
こんにちは！

00:05.000 --> 00:10.000
この動画をご覧いただきありがとうございます。

上記以外にも、様々な擬似要素の代替方法が存在します。状況に合わせて、適切な方法を選択してください。

CSSの擬似要素は便利な機能ですが、代替方法も検討しておくことが重要です。アクセシビリティやブラウザサポートなどを考慮し、状況に応じて最適な方法を選択することで、より良いWebページを作成することができます。

[A11y Project - 疑