部分リンクでも目立たせる！::target-text 擬似要素でリンク先のテキストを強調表示するCSS術

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
ページ内リンクで特定の段落や文言にジャンプしたとき、そのリンク先のテキストがどこか分かりづらい…と感じたことはありませんか？

特に長文ページやFAQセクション、用語辞典的な構造では、ユーザーが「リンク先で迷子になる」ことも。

そんな課題を解決してくれるのが、CSSに新しく追加された擬似要素
::target-text です。

これを使えば、ハッシュリンクでジャンプした先のテキストを自動でハイライト表示できるようになります！

::target-text とは？

::target-text は、CSS Selectors Level 4 で定義された擬似要素のひとつ。
ハッシュリンクで指定された「テキスト範囲」に対してスタイルを適用できる機能です。

従来の:targetとの違い

たとえば、URLが

https://example.com/page#target-text=“お問い合わせはこちら”

となっていた場合、ページ内の該当する文字列だけがハイライトされます。

実装方法と書き方

ステップ1：ハッシュリンクの構造

新仕様では、URLのハッシュに次のような形でテキストを直接指定します。

https://example.com/page#target-text="よくある質問"

ブラウザがこのテキストを検出し、該当箇所の文字をハイライトしてくれます。

ステップ2：CSSでスタイル定義

::target-text {
background-color: yellow; 
padding: 2px 4px; 
border-radius: 3px; 
transition: background-color 0.3s ease; 
} 

これだけで、該当テキストにジャンプした際に自動でハイライト表示されます！

活用シーンいろいろ！

たとえば「お問い合わせはこちら」のようなフレーズだけを目立たせたいとき、これまでの :target では対応が難しかったのですが、
::target-text を使えば 文中の一部だけを安全に強調できるようになります。

アクセシビリティへの配慮も◎

::target-text は、ただ装飾を付けるだけでなく、ジャンプ先で何が強調されたかを視覚的に明示してくれるため、スクリーンリーダー利用者や高齢者ユーザーにとってもUX改善に繋がります。

まとめ

::target-text は、文中のリンク先をピンポイントで目立たせる画期的なCSS機能です。

今後のWebライティングやナレッジベース構築において、
より使いやすく、より伝わるリンク設計を実現したいなら、::target-text は要注目です！

 

satokotadesignキャンペーン実施中！