概要

CSSのhighlight関連プロパティは、選択されたテキストや特定のコンテンツにハイライトスタイルを適用するために使用されます。特に::highlight疑似要素を使うことで、ユーザーが選択したテキストの背景色や文字色を自由に変更できるようになり、従来のデフォルトスタイルに対してカスタマイズが可能です。これにより、デザインの一貫性を保ちながら、ユーザー体験を向上させることができます。

highlightの基本構文

::highlight {
  property: value;
}
  • property
    ハイライト対象に適用するCSSプロパティ（例: background-color, colorなど）。
  • value
    指定するプロパティの値。

使用例

基本的な使用例 - 選択されたテキストのハイライトをカスタマイズする

以下の例では、::highlight疑似要素を使って、選択されたテキストの背景色と文字色をカスタマイズしています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>highlightの使用例</title>
    <style>
      ::highlight {
        background-color: yellow; /* 背景色を黄色に設定 */
        color: black; /* 文字色を黒に設定 */
      }
    </style>
  </head>
  <body>
    <p>
      このテキストを選択してみてください。選択された部分のハイライトがカスタマイズされています。
    </p>
  </body>
</html>

解説

この例では、ユーザーがテキストを選択した際に、::highlight疑似要素によってハイライトが黄色に設定されています。デフォルトの青色ではなく、指定したスタイルが適用されるため、サイトのデザインテーマに合わせたハイライトが可能です。

応用例 - 検索結果のハイライトをスタイリングする

検索機能やユーザーインタラクションに応じて、特定のテキストをハイライトする際にカスタムスタイルを適用することができます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>検索結果のハイライト例</title>
    <style>
      mark {
        background-color: lightgreen; /* 検索結果のハイライト */
        color: darkgreen; /* 文字色を変更 */
      }
      ::highlight(mark) {
        background-color: orange; /* 選択時のハイライト */
        color: white;
      }
    </style>
  </head>
  <body>
    <p>
      この文章には<mark>ハイライト</mark>されるべきキーワードが含まれています。<mark>検索結果</mark>として示されています。
    </p>
    <p>
      テキストを選択して、異なるハイライトが適用されることを確認してください。
    </p>
  </body>
</html>

解説

  • markタグを使うことで、検索結果のハイライトを指定の色に設定しています。
  • ::highlight(mark)では、ユーザーがmark要素を選択した際のハイライトスタイルをカスタマイズしており、通常の選択と異なるハイライトが適用されます。

highlightの注意点

  • ブラウザのサポート状況
    ::highlight疑似要素は、全てのブラウザでサポートされているわけではありません。特に古いバージョンのブラウザでは、このスタイルが反映されない場合があるため、最新のブラウザサポート状況を確認することが重要です。
  • アクセシビリティの考慮
    ユーザーが選択したテキストの背景色や文字色は、アクセシビリティに配慮して設定する必要があります。特にコントラスト比が不十分だと、視認性が低下するため、色の組み合わせには注意が必要です。
  • 適用範囲の制御
    ::highlight疑似要素は、適用範囲を柔軟に設定できますが、全体に適用するのではなく、特定の要素や状況に限定して使用するのが望ましいです。これにより、ハイライトが意図しない要素に適用されることを防げます。

まとめ

highlightプロパティおよび::highlight疑似要素を使用することで、選択されたテキストや特定のコンテンツに対してカスタムハイライトを適用できます。これにより、デザインの一貫性を保ちながら、ユーザーインターフェースをより魅力的にすることが可能です。適切な場面で活用し、視覚的なフィードバックを向上させるとともに、アクセシビリティにも配慮した設計を心がけましょう。

参照:

`CSS` highlight pseudo-element - MDN Web Docs