【CSS Modules】::highlight疑似要素の使い方
::highlight()疑似要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
::highlight()オブジェクトは、Webページ上でハイライトされたテキスト領域や、JavaScriptのCustom Highlight APIによって作成されたカスタムハイライト領域を表すオブジェクトです。このCSS擬似要素は、ブラウザによって自動的に生成されるテキスト選択範囲や、検索機能によるマッチ部分など、特定の状態にあるテキストにスタイルを適用するために使用されます。
具体的には、ユーザーがマウスでテキストを選択した際の背景色や文字色、あるいはWebアプリケーションが特定のキーワードを強調表示する際に、その見た目を変更する目的で利用されます。例えば、::highlight()にbackground-colorやcolorといったCSSプロパティを適用することで、これらのハイライト領域の視覚的な表現をカスタマイズすることが可能です。
ただし、::highlight()に適用できるCSSプロパティは限定されており、主にテキストの見た目に関連するプロパティ（例: color, background-color, text-decoration, text-shadowなど）にのみ効果があります。レイアウトやボックスモデルに関連するプロパティ（例: padding, margin, borderなど）は適用されません。これにより、Webページの標準的なレイアウトに影響を与えることなく、ハイライト領域のスタイルを安全に調整できる点が特徴です。この機能は、ユーザーエクスペリエンスを向上させる上で重要な役割を果たします。
公式リファレンス: ::highlight()
構文(syntax)
1::highlight(highlight-name) { 2 /* スタイル宣言 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません