CSS search-text でブラウザの「ページ内検索」結果を自由にスタイリングする方法

はじめに：なぜブラウザの検索結果をスタイリングするのか？

開発者の皆さんは、Ctrl+F（Windows）や ⌘F（Mac）でページ内検索を日常的に使われていると思います。ブラウザ標準の黄色いハイライトは便利ですが、プロダクトのUXを突き詰めたい場合、このスタイルを自社のブランドに合わせたくなることがあります。

例えば以下のようなケースです：

• 技術ドキュメントや法律文書ビューアなど、検索機能が中心のサービス
• ブランドカラーを統一して一貫性のある体験を提供したい
• 現在フォーカスされている検索結果を視覚的に強調したい

CSS の ::search-text 疑似要素（Pseudo-element）はまさにこのニーズに応える標準APIです。まだ実験的な段階ですが、主要ブラウザでは広くサポートされています。

本記事は CSS-Tricks の ::search-text ガイド をベースに、実務で即活用できるポイントと注意点を追加しています。

基本の使い方：::search-text を宣言する

使い方は非常にシンプルです。スタイルを ::search-text ブロック内に記述するだけです。

/* 検索されたすべてのテキストに適用 */
::search-text {
  background: oklch(87% 0.17 90); /* 薄い黄色 */
  color: black;
}

/* 現在フォーカスされている検索結果のみに適用 */
::search-text:current {
  background: oklch(62% 0.22 38); /* 鮮やかな赤 */
  color: white;
}

特定の要素だけに適用する

グローバルではなく、特定の領域（例：記事本文）だけに適用することも可能です。

/* 本文エリア内の検索結果のみスタイリング */
article::search-text {
  background: gold;
  color: black;
  text-decoration: underline;
  text-decoration-color: oklch(65% 0.18 240);
  text-decoration-thickness: 0.22em;
  text-underline-offset: 0.15em;
}

サポートされるCSSプロパティ

::search-text ではすべてのCSSプロパティが使えるわけではありません。以下のプロパティに制限されています：

• background-color
• color
• text-decoration および関連下位プロパティ（text-decoration-color, text-decoration-line, text-decoration-style, text-decoration-thickness, text-decoration-skip-ink, text-underline-offset）
• text-shadow
• text-underline-position
• カスタムプロパティ（CSS変数）

:root {
  --brand-highlight: oklch(0.5458 0.1568 241.39);
}

::search-text {
  background-color: var(--brand-highlight);
  color: white;
}

ワンポイントアドバイス： text-decoration を中心にスタイリングすると、背景色を変更せずに済むため、ユーザーの混乱を防げます。アクセシビリティの観点からも推奨される方法です。

応用テクニック：継承チェーンと :current の組み合わせ

継承チェーンを理解する

::search-text のスタイルはすべての子孫要素に継承されます。例えば次のようなHTML構造を考えてみましょう。

<article>
  <p>Lorem ipsum dolor sit amet.</p>
  <div>
    <p>Lorem appears again here.</p>
    <strong>Another lorem appears here.</strong>
  </div>
</article>

article::search-text に背景色と下線を指定し、p::search-text で文字色をオーバーライドすると：

article::search-text {
  background: gold;
  color: black;
  text-decoration: underline;
}

p::search-text {
  color: orange;
}

strong::search-text {
  text-decoration: line-through;
}

• 最初の <p> 内の "Lorem" → gold背景 + orange文字 + underline
• <div> 内の <p> の "Lorem" → gold背景 + orange文字 + underline（継承）
• <strong> の "Lorem" → gold背景 + orange文字 + line-through（オーバーライド）

このように個々のプロパティも個別に継承・オーバーライドされるため、細かな制御が可能です。

:current で現在フォーカスを強調する

複数の検索結果がある場合、現在選択されている（フォーカスされている）結果だけを異なるスタイルにしたいときは :current を付与します。

::search-text:current {
  text-decoration-color: oklch(85% 0.22 38);
  text-decoration-thickness: 0.3em;
}

これにより、ユーザーが検索結果を移動するたびに現在位置が視覚的に際立ち、UXが大幅に向上します。

注意：:past と :future は使用不可

CSS仕様には :past と :future という疑似クラスも定義されていますが、現在 ::search-text との組み合わせは無効とされています。公式仕様によると：

「:past と :future 疑似クラスは将来の類似用途のために予約されています。::search-text との組み合わせがサポートされていない場合は無効として扱わなければなりません。」

したがって、この機能を期待して開発することは避けましょう。

アクセシビリティと実務適用時の注意点

アクセシビリティチェックリスト

1. 輝度コントラスト：WCAG基準に従い、テキストと背景の輝度コントラスト比を最低4.5:1に保ちましょう。
2. 過度な変更を避ける：ブラウザのデフォルト検索スタイルを大きく変更すると、認知障害のあるユーザーに混乱を招く可能性があります。特に背景色はデフォルトのままにして、text-decoration のみを変更することを推奨します。
3. テストは必須：実験的な機能のため、ブラウザごとの動作差を必ず確認してください。

日本開発コミュニティにおける適用文脈

QiitaやZennのような技術記事プラットフォームや、社内Wikiシステムを運用している場合、::search-text を活用してブランドアイデンティティを維持しつつ検索UXを向上させることができます。

例えば：

• 社内ドキュメントポータルで検索結果の背景色を企業カラーに設定
• 現在フォーカスされている結果には下線の太さを太くする

こうした細かな配慮がユーザー満足度を高めます。

次のステップとしての学習方向

• ::search-text と似た ::selection（テキスト選択時のスタイリング）も併せて学ぶと良いでしょう。
• CSS の oklch() 色関数は、アクセシビリティと色の一貫性の面で従来の rgb() や hsl() より優れています。MDNのoklch解説を参照してください。
• ブラウザサポート状況は Can I Use でリアルタイム確認できます。

合わせて読みたい記事

• AIネイティブ時代のプライバシーインフラ：MetaがLLMでデータを分類する7段階パターン →
• AWS欧州主権クラウド、クロスパーティション障害対策設計のすべて →