Custom Highlights APIジェネレーターとは
Custom Highlights API（Baseline 2026、Chrome 105+）は、DOMを変更せずにブラウザ内のテキスト範囲をスタイリングする方法を提供します。テキストをspan要素でラップしてインラインスタイルを適用する代わりに、Rangeオブジェクトを作成し、それらをHighlightオブジェクトに収集し、CSS.highlightsレジストリに名前で登録します。すると::highlight()疑似要素がそれらの範囲にスタイルを適用します。ハイライトはDOMを変更しないため、検索ハイライト、ページ内検索結果、構文ハイライトなど、一時的な視覚効果に最適であり、DOMに一時的なspanラッパーを散らかすのを避けられます。
クイックアンサー
Custom Highlights APIは、DOMを変更せずにCSSを介して任意のテキスト範囲をスタイリングします。CSS.highlights.set()を使用して名前付きハイライトを登録し、::highlight()疑似要素でスタイリングします。color、background-color、text-decoration、text-shadowをサポートしています。Chrome 105+、Safari 18.2+（Baseline 2026）。ページ内検索、構文ハイライト、検索結果マーカーに最適で、DOMをクリーンに保ちます。
Last updated: 2026-06-02
制限事項
- ブラウザサポート：Chrome 105+、Edge 105+、Safari 18.2+。Firefoxはバージョン138の時点でAPIをサポートしていません。Firefoxおよび他のサポートされていないブラウザには、DOMベースのフォールバック（spanラッピング）が必要です。
- ::highlight()は限られたCSSプロパティのセットをサポートしています。color、background-color、text-decoration、text-decoration-color、text-decoration-style、text-shadow、およびストローク関連プロパティ。font-size、padding、margin、displayなどのレイアウトプロパティはハイライトに適用できません。
- ハイライトはDOMが変更されたときに自動的に維持されません。ハイライトされた範囲と重複するテキストコンテンツの追加、削除、変更はハイライトを無効にします。ターゲットテキストに影響するDOM変更の後は、ハイライトを再作成する必要があります。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- テキストコンテンツをエディタに書き込むか貼り付けるか、サンプルテキストを使用します。このツールはテキスト内の範囲にハイライトがどのように適用されるかを示します。
- ハイライト名（::highlight() CSSセレクタに使用）と、ハイライトするテキストパターンまたは範囲を設定します。単語マッチング、正規表現マッチング、または手動範囲指定から選択します。
- ハイライトスタイリングをカスタマイズします。背景色、テキスト色、ボーダー半径、下線オプション。::highlight()疑似要素は、color、background-color、text-decoration、text-shadowを含むCSSプロパティのサブセットをサポートしています。
- ハイライトを作成および管理するための生成されたJavaScriptと、それらをスタイリングするためのCSSをコピーします。出力には、ウェブページに直接埋め込める自己完結型の例が含まれます。
主な用途
- すべての検索語の出現箇所をspan要素でラップしたり既存のDOM構造を乱したりせずにマークする、ページ内検索ハイライトを実装します。
- 正規表現パターンマッチングに基づいてキーワード、文字列、コメントのハイライトを作成することで、ドキュメントサイトのコードブロックに構文ハイライトを追加します。
- テキストの2つのバージョン間で追加、削除、変更された単語をハイライトするテキスト比較ツールを構築し、各タイプに異なる::highlight()色を使用します。