こんにちは！フロントエンドの現場を長年フラフラと……いや、最前線で駆け抜けてきたチーフアーキテクトの私です。
日々のコーディング、本当にお疲れ様です！
「CSSって、タグやクラスに色をつけたりレイアウトを組んだりするだけでしょ？」なんて思っていませんか？ 実はCSSの世界は日々進化していて、「えっ、そんなことまでできちゃうの！？」というような、ちょっと魔法みたいな機能がこっそり追加されているんです。
今回お話しするのは、そんな最先端かつ最高にワクワクする機能の一つ、`::highlight`（ハイライト）擬似要素についてです。
「難しそう……」なんて身構えなくて大丈夫ですよ。今日は、身近な文房具の「蛍光ペン」を思い浮かべながら、一緒にゆっくり紐解いていきましょう！
—
1. テキストに色を塗る、これまでの「もどかしさ」
Webサイトで特定のキーワードを探したり、検索結果にマッチした文字を黄色いマーカーで目立たせたりする機能、よく見かけますよね。
あれをやろうとしたとき、昔から私たちはどうしていたと思いますか？
そう、JavaScriptを使って文字を探し出し、無理やり `` タグや `` タグで囲んで、そこにCSSで色をつけていたんです。
でも、これって現場のエンジニアからすると、結構な「お悩みポイント」でした。
- 「元のHTMLの構造がJavaScriptに書き換えられちゃうから、DOM（ページの木構造）が汚れちゃう……」
- 「長い文章の中からピンポイントで文字を探してタグで囲む処理って、地味にブラウザのパフォーマンスに負担がかかるんだよね……」
HTMLという「大切な骨組み」を、JavaScriptの都合でガシガシ書き換えるのは、なんだかお部屋の模様替えをするつもりが壁を壊しちゃうような、ちょっと切ない気分になりますよね。
そこで登場したのが、今回主役の CSS Custom Highlight API（カスタムハイライトAPI） と、その見た目を司る `::highlight` 擬似要素 です。
—
2. 身近な例え：「透明なシート」の上からマーカーを引くイメージ
`::highlight` の仕組みを、身近なものに例えてみましょう。
学校の教科書や、お気に入りの本にマーカーを引くときを想像してください。
本そのものに直接インクを染み込ませる（HTMLのタグを書き換える）のではなく、「透明な下敷き」をページの上に一枚重ねて、その上からピッと蛍光ペンで線を引くようなイメージです。
これなら、本の紙面（HTML）を汚すことなく、自由に必要な場所だけに色を塗ることができますよね。
`::highlight` はまさに、ブラウザという透明なシートの上に、私たちが指定した場所だけシュッとマーカーを引いてくれる、そんなスマートな機能なんです。
—
3. 実際に書いてみよう！基本のステップ
「難しそう」と思うかもしれませんが、基本のレシピはとってもシンプルです。
やることは、たったの2ステップ！
1. JavaScriptで「ここからここまでをハイライトしてね」と範囲（レンジ）を教える。
2. CSSで「そのハイライトには、こんな見た目（色など）をつけてね」と指定する。
実際のコードを見てみましょう。エディタを開く準備はいいですか？
HTMLとCSSの準備
まずは、いつものようにHTMLとCSSを用意します。今回は特別なタグは必要ありません。ただの文章（段落）があればOKです！
CSSのハイライト機能を使えば、HTMLを汚さずに自由なテキストをマーキングできます。
これからのWeb制作がもっと楽しくなりますね！
/
::highlight擬似要素の出番です！
‘search-result’ という名前のハイライトに対してスタイルを指定します
/
::highlight(search-result) {
background-color: #ffeb3b; / 優しい黄色いマーカー /
color: #333333; : 文字の色はしっかり読めるように濃いグレーに
border-radius: 2px; / 角を少しだけ丸くして今風に /
}
ね？ CSS自体はいつもの見慣れた書き方と変わりませんよね。「`::highlight(名前)`」という書き方をするのがポイントです。
JavaScriptで範囲を教える
さて、ここからが少し新しいところですが、怖がらなくて大丈夫です。JavaScriptで「どこに色を塗るか」を指定してあげます。
// 1. 対象となる要素（pタグ）を取得します
const pElement = document.getElementById(‘target-text’);
// 2. テキストの「何文字目から何文字目まで」をハイライトするかを決めます
// 今回は「CSSのハイライト機能」という部分（2文字目から12文字目まで）を指定してみましょう
const range = new Range();
range.setStart(pElement.firstChild, 1); // 開始位置
range.setEnd(pElement.firstChild, 11); // 終了位置
// 3. ハイライトの「束（ハイライトオブジェクト）」を作ります
const customHighlight = new Highlight(range);
// 4. ブラウザに「このハイライトを登録するよ！」と伝えます
// CSSで書いた名前（’search-result’）と紐付けます
CSS.highlights.set(‘search-result’, customHighlight);
これでブラウザで確認してみると、「CSSのハイライト」という部分だけに、綺麗に黄色いマーカーが引かれます！HTMLのソースコードを覗いてみても、余計な `` タグなどは一切入っていません。すごくクリーンですよね。
—
4. 現場のチーフからのちょっとしたアドバイス（つまずきポイント）
ここで、実際に現場で実装するときに「あれ？」となりがちなポイントをこっそりシェアしておきますね。
- 対応ブラウザに少しだけ注意しよう
この Custom Highlight API はモダンブラウザでしっかりとサポートされていますが、古い環境や特定のブラウザでは動かないこともあります。実務で使うときは、動かなかった場合でも普通のテキストとして読める「プログレッシブ・エンハンスメント（段階的な拡張）」の心構えを忘れないでおきましょう。
- DOMの変更に強い！
従来の `` タグを使う方法だと、ユーザーがページの別の部分を書き換えたときにレイアウトが崩れたりして大変でしたが、このAPIならブラウザがよしなに位置を調整してくれます。検索機能や、リアルタイムの文字起こしツールなんかを作るのには、まさにうってつけの技術です。
—
おわりに
お疲れ様でした！
`::highlight` 擬似要素と Highlight API、いかがでしたでしょうか？
最初は「API」とか「オブジェクト」なんて言葉を聞くと、少し身構えてしまうかもしれませんが、やっていることは「透明なシートにマーカーを引く」のと同じです。
HTMLという大切なキャンバスを綺麗に保ったまま、CSSで自由な表現ができる――これぞ、現代のフロントエンド開発の醍醐味であり、美しさだと私は思っています。
あなたのWeb制作の引き出しに、また一つ素敵な技術が加わりましたね。
焦らず、自分のペースで楽しみながら、少しずつコードをいじってみてください。
それでは、また次回のモダンCSSの旅でお会いしましょう！チーフアーキテクトの私でした。HAPPY CODING!
コメント