お疲れ。今日も今日とて、デザインカンプの微修正や「なんかこのリンク、色が勝手に変わるんだけど！」という若手からのチャット対応に追われていないか？
フロントエンド開発の現場にいると、CSSの基礎なんてわかってるつもりになりがちだ。だがな、「 `:link` 疑似クラス」と聞いて、ただ「未訪問のリンクに効くやつっしょ」で止まっているなら、そろそろ一段上のレイヤーに上がってもらおうか。
今回は、この地味ながら奥深い `:link` について、ブラウザの内部挙動から実務で絶対に外せないハックまで、シニアの視点で徹底的に叩き込んでやる。最後までついてきな。
—
1. `:link` 疑似クラスの基本と「なぜ今、改めて学ぶのか」
まずは基本のおさらいだ。`:link` とは、「まだユーザーが訪問したことがない、`href` 属性を持つ `a` 要素（または `
` 要素）」にマッチする疑似クラスだ。「あれ、普通に `a { color: blue; }` って書くのと何が違うの？」と思ったそこの君。鋭い。だが、そこに大きな落とし穴がある。
通常の `a { … }` という要素セレクタは、「未訪問リンク」も「訪問済みリンク」も両方呑み込む。つまり、一度踏んだリンクに対して後からスタイルを上書きしようとすると、詳細度の罠にハマるか、あるいは `:visited` との優先順位の戦いに敗北することになる。
実務でよくある事故がこれだ：
/ 普通に書いたつもりが… /
a {
color: #0066cc;
}
/ 訪問済みを後から変えようとしても、詳細度が同じだと記述順に依存する！ /
a:visited {
color: #551a8b;
}
ここで `:link` を明示的に使うことで、「これはまだ踏まれていないまっさらなリンクに対するスタイルだ」と、ブラウザにも他のエンジニアにも明確な意図を伝えることができる。コードの意図がクリアになる、これだけでもプロとしての価値がグッと上がるってもんだ。
—
2. ブラウザの裏側：なぜ `:link` はプライバシーを守る盾なのか？
さて、ここからが少しディープな話だ。CSSの仕様やブラウザのレンダリングエンジン（BlinkやGeckoなど）が、裏側でどうやって `:link` と `:visited` を処理しているか知っているか？
実は、セキュリティとプライバシーの観点から、ブラウザは訪問済みリンクに対して強力な制限（Privacy Restrictions）をかけている。
昔のブラウザでは、悪意あるサイトが `a:visited` の色の変化（`window.getComputedStyle` など）をJavaScriptで検知し、「このユーザーは特定の医療サイトや競合サイト、SNSの特定ページを見たな？」というブラウジング履歴を盗み見るという攻撃が横行していた。
これを防ぐため、現代のブラウザでは `:visited` に対して適用できるプロパティを極限まで制限している。
- 変えられるのは主に `color`, `background-color`, `border-color` などの色に関するプロパティだけ。
- `font-size`, `width`, `display` などのレイアウトや形状を変えるプロパティは、たとえ書いても無効化されるか、計算結果が隠蔽される。
では、`:link` はどうか？
こちらは一切の制限がない。未訪問のリンクなのだから、履歴を盗まれる心配もない。そのため、フォントサイズを変えようが、アニメーションを仕掛けようが、レイアウトを激しく変えようが、自由自在だ。
この「制限の有無」を理解していると、後述する状態管理の設計で無駄なバグを踏まずに済むようになる。
—
3. 【実務Tips】LNK（リンク）系疑似クラスの正しい「書き順」
CSSの記述において、状態を表す疑似クラスには「黄金の順序」がある。これを間違えると、意図したスタイルが効かなくなるという、CSS初心者から中級者が必ず通る呪いにかかる。
呪文を唱えるぞ。「LoVe HAte（ラブ・ヘイト）」だ。
1. L: `:link` （未訪問）
2. V: `:visited` （訪問済み）
3. H: `:hover` （ホバー中）
4. A: `:active` （クリック瞬間）
5. E: （強いて言えば）`:focus` や `:focus-visible` （フォーマット上、ホバーやアクティブと組み合わせる際の位置に注意）
これには明確な理由がある。CSSの詳細度が同じ場合、後から書いたルールが勝つ（カスケードの原則）。
もし `:hover` や `:active` を `:link` や `:visited` より前に書いたらどうなるか？
ユーザーが「まだ訪問していないリンク（`:link`）」にマウスカーソルを乗せた（`:hover`）とする。
もし `:link` のルールが後方に書いてあったら、ホバーしているにもかかわらず `:link` のスタイルが上書きしてしまい、ホバー時のインタラクションが消え去ってしまうのだ。
—
4. 現場でそのまま使える！モダンなリンクスタイル設計の決定版
理屈はここまでだ。じゃあ実際の現場でどう書くのがベストプラクティスなのか、コピペして即戦力になるコードを置いておく。
デザインシステムや中規模以上のWebアプリケーションでそのまま使える、堅牢なアンカータグのスタイリングだ。
/ =================================================================
モダン・アンカータグの基本設計
================================================================ /
/ ベースとなるリンクスタイル（すべてのリンクに共通） /
.site-link {
/ 下線をデフォルトで消し、カスタムのボーダーやトランジションでリッチに見せる /
text-decoration: none;
color: var(–color-primary, #0066cc);
font-weight: 500;
transition: color 0.2s ease, background-color 0.2s ease;
}
/ 1. 未訪問リンク (:link)
明確に「まだ踏んでいない」ことを示す色やアイコンを付与する場合もある /
.site-link:link {
/ 必要に応じて未訪問特有の微調整を行う（通常はベースと共通化してOK） /
}
/ 2. 訪問済みリンク (:visited)
セキュリティ制限があるため、原則として「色味の調整」に留める /
.site-link:visited {
color: var(–color-visited, #551a8b);
}
/ 3. ホバー時 (:hover)
「LoVe HAte」の法則に基づき、必ず :link/:visited の後に書く /
.site-link:hover {
color: var(–color-primary-hover, #004080);
text-decoration: underline; / ホバーで下線を出す上品な演出 /
}
/ 4. フォーマット / キーボード操作時 (:focus-visible)
アクセシビリティ（a11y）の観点から、Tabキー操作時のフォーカスリングは絶対に消さないこと！ /
.site-link:focus-visible {
outline: 2px solid var(–color-focus, #ff9900);
outline-offset: 4px;
border-radius: 2px;
}
/ 5. アクティブ時 (:active)
クリックした瞬間に沈み込むようなフィードバックを与える /
.site-link:active {
color: var(–color-primary-active, #00264d);
transform: translateY(1px);
}
このコードの推しポイント
- アクセシビリティへの配慮: `:focus-visible` を使い、マウスユーザーには余計な枠線を出さず、キーボードユーザー（アクセシビリティ重視の環境）には明確なフォーカスリングを提供する。
- トランジションの滑らかさ: 色の変化に `transition` を挟むことで、チープな印象を完全に払拭し、モダンなWebアプリの質感を演出している。
- 詳細度のコントロール: クラスセレクタ（`.site-link`）をベースに疑似クラスをチェインさせているため、他のHTMLタグやグローバルCSSとの衝突を防ぎやすい。
—
5. シニアからのメッセージ
CSSにおける `:link` は、派手なエフェクトを生むわけでもなければ、CSS GridやFlexboxのようにレイアウトを劇的に変えるわけでもない。
だが、こうした「ブラウザのプリミティブな状態管理」を正しく理解し、コントロールできているかどうかが、プロのフロントエンドエンジニアと、コピペ職人の分水嶺だ。
「なぜこのスタイルが効かないのか」「なぜこの順番で書かなければならないのか」。それを裏側の仕様まで含めて説明できるようになれば、君が書くコードの信頼性は劇的に跳ね上がる。
さて、ウンチクはここまでだ。早速エディタを開いて、自社のプロダクトのリンク周りを確認してみな。きっと、改善すべきポテンシャルが眠っているはずだ。頑張ってくれ！
コメント