おう、諸君！ フロントエンドの最前線で日夜奮闘している君たちへ。今回は、CSSのちょっとニッチだけど、知っておくと「なるほど！」って唸るような、そんなテクニックについて語り合おうじゃないか。テーマは「`:local-link` 疑似クラス」。
:local-link 疑似クラス：ページ内リンクの現在地をスタイリングする魔法
諸君、Webサイトでよく目にする、ページの上部に戻るボタンとか、目次から該当箇所に飛んだ時の「今、ここだよ！」って表示。あれ、どうやって実装してる？ JavaScriptでゴリゴリやってる？ もちろん、それも一つの手だ。でも、もっとシンプルに、CSSだけで実現できる方法があるんだ。それが、今回紹介する `:local-link` 疑似クラスだ。
:local-link って、一体何者なんだ？
簡単に言えば、`:local-link` は、現在のドキュメント内にあるアンカーリンク（#で始まるリンク）を選択するためのCSS疑似クラスだ。つまり、今見ているページ内で、同じページ内の別のセクションにジャンプするリンクだけをピンポイントで狙い撃ちできるってわけさ。
例えば、こんなHTMLがあるとしよう。
セクション1
ここにセクション1の内容が入ります。
セクション2
ここにセクション2の内容が入ります。
この中の `` や `` のようなリンクが、`:local-link` の対象になる。対して、`https://example.com` のような外部サイトへのリンクは対象外だ。
ブラウザの裏側：どうやって認識してる？
ブラウザは、リンクの `href` 属性を解析する際に、そのURLが現在のドキュメントのURLと同じドメイン（プロトコル、ホスト名、ポート番号が一致）であり、かつ、`#` から始まるフラグメント識別子を持っているかどうかをチェックしている。もし、これらの条件を満たしていれば、そのリンクは「ローカルリンク」だと判断されるわけだ。
この処理は、CSSの解析とレンダリングのフェーズで行われる。ブラウザはHTMLをパースしてDOMツリーを構築し、その後CSSを適用していく。`:local-link` のような疑似クラスは、DOMツリー上の要素の状態を動的に検知し、スタイルを適用するために使われる。JavaScriptのようにイベントリスナーを登録して、というわけではなく、ブラウザのレンダリングエンジンが内部的に管理しているイメージだ。だから、JavaScriptを使わずに、宣言的にスタイルを適用できるのが強みなんだ。
実践！ :local-link の活用例
さて、ここからが本番だ。`:local-link` をどうやって現場で活かすのか、具体的なコード例を見ながら解説していこう。
1. ナビゲーションでの現在地表示
これが `:local-link` の最も典型的な使い道だろう。メニュー項目の中に、現在表示しているセクションに対応するリンクがあったら、それを強調表示したい。
例えば、トップページに目次があり、スクロールして「セクション2」を見ているときに、目次の「セクション2へ」のリンクだけ色を変えたり、太字にしたりするイメージだ。
サンプルコード
セクション1
このセクションはセクション1です。
ページ上部に戻るには、ナビゲーションのリンクをクリックしてください。
セクション2
このセクションはセクション2です。
ページ上部に戻るには、ナビゲーションのリンクをクリックしてください。
このコードをブラウザで開いて、ナビゲーションのリンクをクリックしてみてください。`#section1` や `#section2` へのリンクが、現在アクティブなセクションに対応していれば、スタイルが適用されるのがわかるはずです。
補足: 実際には、スクロールイベントをJavaScriptで監視し、現在表示されているセクションのIDを取得して、対応するナビゲーションリンクに `active` クラスなどを付与するというのが一般的です。`:local-link` は、あくまで「リンク先が現在のドキュメント内である」という条件に合致するかどうかを判定するものです。そのため、「現在表示しているセクション」と完全に同期させるには、JavaScriptとの連携が必要になります。しかし、例えば「ページ内リンクをまとめてスタイリングしたい」といった用途では、CSSだけで完結できるため非常に便利です。
2. ページ内リンクの視覚的な区別
ナビゲーションだけでなく、本文中に突然現れる「詳細はこちら（#details）」のようなリンクも、他の外部サイトへのリンクと区別したい場合がありますよね。そういう時にも `:local-link` は役立ちます。
サンプルコード
/ 本文中のリンク /
article p a {
color: #0056b3; / 通常のリンク色 /
text-decoration: underline;
transition: color 0.3s ease;
}
/ ページ内リンクであることを視覚的に示す /
article p a:local-link {
background-color: #e0f7fa; / 薄い青色の背景 /
border-radius: 4px; / 角を丸く /
padding: 2px 5px; / 少し余白を /
font-weight: bold; / 太字に /
}
/ ページ内リンクにマウスカーソルを乗せた時のスタイル /
article p a:local-link:hover {
background-color: #b2ebf2; / ホバー時は少し濃い青色に /
color: #004085; / 文字色も少し変更 /
}
/ 外部サイトへのリンクはシンプルに /
article p a:not(:local-link) {
color: #6c757d;
font-style: italic; / 外部リンクはイタリックに /
}
このように、`:local-link` を使うことで、リンクの種類に応じて異なるスタイルを適用し、ユーザーに分かりやすいUIを提供できます。
:local-link の注意点と限界
さて、便利な `:local-link` ですが、万能ではありません。いくつか知っておくべき注意点があります。
- ブラウザサポート: `:local-link` は比較的新しい疑似クラスなので、古いブラウザ（特にIEなど）ではサポートされていません。ただし、主要なモダンブラウザ（Chrome, Firefox, Safari, Edge）では問題なく動作します。プロジェクトでサポートするブラウザの範囲を確認しておきましょう。
- 「現在地」との直接的な連動ではない: 前述しましたが、`:local-link` はあくまで「リンク先が現在のドキュメント内か否か」を判定するものです。スクロール位置に応じて「今見ているセクション」を特定し、そのナビゲーションリンクをアクティブにする、という機能はJavaScriptの助けが必要になります。
- `#` で始まるリンクのみ: `#` で始まるリンク（フラグメント識別子）のみが対象です。例えば、`href=”#section1″` は `:local-link` の対象ですが、`href=”page.html#section1″` のように、ファイル名が異なる場合は対象外となります（これは当然ですね）。
まとめ：:local-link でCSSの表現力をさらに広げよう
`:local-link` 疑似クラスは、ページ内リンクをCSSだけでスタイリングできる、非常に便利な機能です。ナビゲーションの現在地表示の補助や、リンクの種類による視覚的な区別など、様々な場面で活用できます。
もちろん、JavaScriptと組み合わせることで、より高度なインタラクションを実現することも可能ですが、まずはCSSだけでどこまでできるかを理解しておくことは、フロントエンドエンジニアとして非常に重要です。
今回紹介したコード例を参考に、ぜひ皆さんのプロジェクトでも `:local-link` を試してみてください。きっと、コードがスッキリしたり、ユーザー体験が向上したりするはずですよ。
CSSの世界は奥深い。これからも、現場で役立つ「生きた知識」をどんどん深掘りしていきましょう！ では、また次のセッションで！
コメント