::target-textでリンク先テキストを自動ハイライト｜検索スニペットの体験を再現

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webページの特定のテキストをリンクで直接示したい
そんなニーズはありませんか？

従来は「ページ内リンク（アンカー）」やJavaScriptを使うしかなかったこの課題、
2022年に新たに登場した ::target-text疑似要素 を使えば、
リンク先の特定テキストだけをハイライト表示できるようになりました。

Google検索のスニペットで黄色いハイライトが出るのを見たことがある方もいると思います。
それと同様の体験を自分のサイトでも再現できるわけです。

この記事では ::target-text の仕組みから実装方法、注意点まで、
実例を交えてしっかり解説していきます。

::target-textとは？

例えば以下のURLをクリックすると

 https://example.com/page#:~:text=特定のテキスト 

そのページの本文内で「特定のテキスト」という部分にハイライトが適用されます。

基本実装：CSSだけでハイライト

ハイライトのデザインはCSSで自由に変更可能です。

::target-text { 
 background-color: yellow; 
 color: black; 
 transition: background-color 0.5s ease; 
} 

これで、対象テキストが自然に目立つようになります。

応用：アニメーションで注目度アップ

ハイライトが表示された瞬間にアニメーションを加えるとさらに効果的です。

::target-text { 
background-color: #ffeb3b; 
animation: fadeHighlight 2s ease forwards; 
} 
@keyframes fadeHighlight { 
0% {
 background-color: #ffeb3b; 
} 
100% { 
background-color: transparent;
 } 
} 

これにより、ユーザーは視覚的に「ここがリンク先だ」とすぐ理解できます。

ブラウザ対応と注意点

また、検索エンジン経由でのスニペットリンクにも対応するため、
検索結果から訪問したユーザーに「ここだ！」と示す効果があります。

実用シーン

まとめ

satokotadesignキャンペーン実施中！