概要
Webサイトにおけるテキストのハイライトは、ユーザーが情報を認識し、操作する上で極めて重要な要素です。これまで、ユーザーがテキストを選択した際の表示（`::selection`）や、URLフラグメントで指定されたテキストの表示（一部ブラウザのデフォルト機能）は、ブラウザの標準スタイルに大きく依存していました。しかし、CSSの新たな擬似要素`::highlight()`の登場により、私たちはこれらのハイライトをより詳細かつ柔軟にカスタマイズできるようになりました。
`::highlight()`は、単に見た目を変更するだけでなく、Webサイト全体のブランディングを統一し、ユーザー体験（UX）を劇的に向上させ、さらにはアクセシビリティをも考慮したデザインを実現するための強力なツールです。本記事では、シニアWebデザイナーの視点から、この`::highlight()`の基本的な使い方から、JavaScriptのHighlight APIとの連携、そして実務における具体的な活用方法までを徹底的に解説します。この次世代のCSS機能をマスターし、あなたのWebサイトを次のレベルへと引き上げましょう。
詳細解説
`::highlight()`は、特定のテキスト範囲に対してカスタムスタイルを適用するためのCSS擬似要素です。これは、ユーザーがWebページ上のテキストを選択した際や、検索結果として強調表示されるテキスト、あるいはJavaScriptによって動的にハイライトされるテキストなど、様々なシナリオでその真価を発揮します。
基本的な構文と適用可能なプロパティ
`::highlight()`は単独で使われることはなく、常に別の擬似要素や、JavaScriptのHighlight APIで定義されたカスタムハイライト名と組み合わせて使用されます。最も一般的なのは、ユーザー選択を対象とする`::highlight(::selection)`です。
::highlight(::selection) {
/* ここにスタイルを記述 */
}
この擬似要素に適用できるCSSプロパティは限定的です。主にテキストの視覚的表現に関連するプロパティがサポートされています。
* `background-color`: ハイライトの背景色。
* `color`: ハイライトされたテキストの色。
* `text-decoration`: テキストの装飾（下線、打ち消し線など）。
* `text-shadow`: テキストの影。
* `fill`, `stroke`, `stroke-width`: SVGテキスト用。
これらのプロパティに限定されるのは、ハイライトが通常、既存のテキストレイアウトに影響を与えずに表示されるべきであるためです。例えば、`font-size`や`margin`、`padding`といったレイアウトに影響を与えるプロパティは適用できません。
対象となるハイライトの種類
`::highlight()`は、以下の主要な種類のハイライトをターゲットにすることができます。
1. **`::selection` (ユーザーによるテキスト選択)**
* ユーザーがマウスやキーボードでテキストを選択した際に表示されるハイライトです。これまでの`::selection`擬似要素では、背景色と文字色しかカスタマイズできませんでしたが、`::highlight(::selection)`を使用することで、`text-decoration`や`text-shadow`などの追加プロパティも適用できるようになります。
2. **`::target-text` (URLフラグメントによるテキストへのジャンプ)**
* これは比較的新しい機能で、URLのフラグメント識別子に特定のテキストを含めることで、ページ内のそのテキスト部分をハイライト表示するものです。例えば、`https://example.com/page#:~:text=specific%20phrase` のように指定された場合、ブラウザはその「specific phrase」を自動的にハイライトします。`::highlight(::target-text)`を使うことで、この自動ハイライトのスタイルをカスタマイズできます。
3. **カスタムハイライトAPI (JavaScriptとの連携)**
* これが`::highlight()`の最も強力な側面の一つです。JavaScriptの`Highlight` API (`CSS.highlights`インターフェース) を使用することで、任意のテキスト範囲をプログラム的に定義し、それに名前を付けてCSSでスタイリングすることができます。
* 基本的な流れは以下の通りです。
1. JavaScriptで`Range`オブジェクトを生成し、ハイライトしたいテキストの開始と終了地点を指定します。
2. 複数の`Range`オブジェクトをまとめて`Highlight`オブジェクトを作成します。
3. `CSS.highlights.set(‘my-custom-highlight’, myHighlightObject)` のように、任意の名前（例: `’my-custom-highlight’`）を付けて`Highlight`オブジェクトを登録します。
4. CSSで`::highlight(my-custom-highlight)`のように、登録した名前を使ってスタイルを定義します。
このAPIの登場により、検索結果の強調表示、リアルタイムの文法チェック、共同編集ドキュメントにおける他ユーザーの選択範囲表示など、これまでJavaScriptでDOMを操作して実現していた多くのカスタマイズが、よりセマンティックかつパフォーマンス効率の良い方法で実現可能になりました。
ブラウザサポートとプログレッシブエンハンスメント
`::highlight()`とHighlight APIは比較的新しいWeb標準であり、すべてのブラウザで完全にサポートされているわけではありません。執筆時点では、Chromiumベースのブラウザ（Chrome、Edgeなど）が最も進んだサポートを提供しています。Firefoxは`::selection`の部分的なサポートに留まり、Safariはまだサポートしていません。
この状況を踏まえ、実務で導入する際には**プログレッシブエンハンスメント**の原則に従うことが重要です。つまり、`::highlight()`によるスタイルはあくまで「強化された表現」と位置づけ、未サポートのブラウザでも基本的な機能や情報が損なわれないように設計すべきです。CSSの`@supports`ルールを活用して、特定の機能が利用可能かどうかをチェックし、それに応じてスタイルを適用する方法が有効です。
/* デフォルトのフォールバックスタイル（全ブラウザ向け） */
::selection {
background-color: #b3d4fc; /* ブラウザ標準に近い色 */
color: #000;
}
/* ::highlight()がサポートされている場合のみ適用 */
@supports selector(::highlight(::selection)) {
::highlight(::selection) {
background-color: var(–brand-selection-bg, #ffcc00);
color: var(–brand-selection-color, #333);
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
}
アクセシビリティとパフォーマンスの考慮
ハイライトのスタイルをカスタマイズする際には、アクセシビリティに最大限の配慮が必要です。特に、背景色と文字色のコントラスト比は、WCAG（Web Content Accessibility Guidelines）の基準（AAレベルで最低4.5:1）を満たすように設定することが不可欠です。色覚多様性を持つユーザーや、視覚に障害を持つユーザーが情報を適切に認識できるよう、十分な配慮を払いましょう。
パフォーマンスに関して言えば、`::highlight()`自体がDOM構造を直接変更するものではないため、従来のJavaScriptによる要素追加やクラス付与に比べて、一般的にパフォーマンスへの影響は小さいです。しかし、非常に多数のカスタムハイライトを同時に適用したり、複雑な`text-shadow`などを多用したりすると、レンダリングコストが増加する可能性はゼロではありません。通常のユースケースでは問題になることは稀ですが、大規模なアプリケーションで利用する際は意識しておくと良いでしょう。
サンプルコード
1. 基本的なテキスト選択 (::selection) のカスタマイズ
ユーザーがテキストを選択した際の背景色と文字色、そしてテキストシャドウをブランドカラーに合わせる例です。
テキスト選択のカスタムハイライト
この段落のテキストをマウスでドラッグして選択してみてください。
通常のブラウザデフォルトの青いハイライトではなく、Webサイトのブランドカラーである青色に、白い文字と軽い影が付いて表示されるはずです。
これは::highlight(::selection)擬似要素によって実現されています。
Webサイト全体で一貫したユーザー体験を提供するために、このような細部へのこだわりは非常に重要です。
もしお使いのブラウザが::highlight()をサポートしていない場合は、CSSの@supportsルールによって、
通常の::selectionスタイルが適用されるようにフォールバックが設定されています。
新しいWeb標準を導入する際には、常にプログレッシブエンハンスメントの考え方が求められます。
2. URLフラグメントターゲット (::target-text) のカスタマイズ
URLに`#:~:text=`形式で指定されたテキストのハイライトをカスタマイズします。
URLフラグメントターゲットのカスタムハイライト
この段
コメント