こんにちは！フロントエンド・チーフアーキテクトの私です。
日々、数々のCSSの泥臭いトラブルや、若手エンジニアの「なんでこれ効かないんですか！？」という叫びに向き合っています。
さて、今回はCSSの基本セレクタの中でも、ちょっと特殊で、知れば知るほど「こいつ、なかなかの曲者だな…！」と思わずにはいられない、訪問済みリンクを表す擬似クラス `:visited` についてお話しします。
「リンクの色を変えたいだけなのに、なんか思い通りにならない！」
「さっきまで効いていたのに、ブラウザをリロードしたら元に戻った！？」
そんな風につまづいていませんか？
大丈夫ですよ、あなたが悪いわけではありません。`:visited` には、Webの歴史とプライバシーを守るための「切ない事情」があるんです。今日はそれを、身近な例え話を交えながら、優しく解きほぐしていきましょう。
—
1. `:visited` ってどんなやつ？（お買い物のスタンプカードに例えてみよう）
Webサイトをサーフィンしていて、「あれ、このページさっき見たっけ？」と迷うこと、ありませんか？
そんな時、検索結果やリンクの色が変わっていると、「あ、ここもう読んだところだ！」とホッとしますよね。あの「既読」の状態を教えてくれるのが、`:visited`（ヴィジテッド）という擬似クラスです。
イメージしてみてください。
街を歩いていて、素敵なお店を見つけたとします。
初めてそのお店の前を通った時は「どんなお店かな？」とワクワクしますが、一度中に入って買い物を済ませた後、お店のドアの横に小さく「ご来店ありがとうございます」のスタンプが押されたとします。
次にその前を通った時、「あ、ここ、この前行ったお店だ」とすぐに分かりますよね。
`:visited` は、まさにこの「お店（リンク先）に足を踏み入れたことがあるかどうか」のスタンプをそっと押してくれる、そんな優しい目印なんです。
基本の使い方
書き方はとってもシンプルです。普通のリンクを指定する `a` タグの後ろに、`:visited` をくっつけるだけ。
/ まだ一度もクリックしたことがない、ピカピカのリンク /
a {
color: #0066cc; / 爽やかな青色 /
}
/ ユーザーがすでに訪れたことがあるリンク /
a:visited {
color: #663399; / ちょっと落ち着いた紫色 /
}
これだけで、ユーザーが「どのページをすでに見たか」が一目で分かる、親切なWebサイトの出来上がりです。
—
2. 【実務の罠】えっ、これしか変わらないの？ `:visited` の切ないセキュリティ制限
さて、ここからが現場のエンジニアたちが「うわっ…」と頭を抱えるポイントです。
「よし、せっかく訪問済みなの分かるんだから、背景色を真っ赤にしたり、文字を大きくしたり、ドロップシャドウをガッツリ効かせて目立たせてやろう！」
……残念ながら、それは現代のブラウザでは一切できません。
「えっ、どうしてですか！？」って思いますよね。実はこれ、悪意あるハッカーから私たちのプライバシーを守るための、厳格なセキュリティ制限なんです。
もし、`:visited` で何でも自由にデザインを変えられたらどうなるでしょうか？
悪意のあるWebサイトが、「このユーザーは、特定の借金返済サイトのURLや、特定の病院のページを訪れたことがあるか？」を、CSSの見た目の変化（例えば「背景色が赤に変わったかどうか」をプログラムでこっそり読み取るなど）を使って、全自動でストーキングできてしまうのです。怖くないですか？
そのため、ブラウザの神様たちは、`:visited` で変更できるプロパティを「文字の色（color）」「枠線の色（border-colorなど）」「背景の色（background-color ※一部制限あり）」といった、ごく一部の「色に関するプロパティ」だけに厳しく制限しました。
サイズ（width, height, font-size）や位置（padding, margin）などは、触ろうとしても無視されてしまいます。
「制限が多くて不自由だな……」と思うかもしれませんが、これは私たちのプライバシーを守るための鉄壁のガード。仕方のない、そしてありがたい制限なんですね。
—
3. ここでハマる！初心者がやりがちな「CSSの書き順」の罠
`:visited` を使っていて、もう一つ非常によくあるトラブルがこれです。
> 「あれ？ `:visited` に色を指定したのに、ぜんぜん反映されないんだけど……？」
これ、CSSの「詳細度」や「カスケード（記述の順番）」の仕組みに原因があります。
リンクには、通常の状態、マウスが乗った状態、クリックした瞬間など、いくつかの状態がありますよね。これをCSSで書くとき、呪文のような正しい順番があるんです。
覚え方はズバリ、「L-V-H-A（ルヴァ）」！
（※LoVe/HAte と覚える先輩も多いです）
1. Link (`a:link`) : 通常のリンク
2. Visited (`a:visited`) : 訪問済みリンク
3. Hover (`a:hover`) : マウスが乗った時
4. Active (`a:active`) : クリックしている瞬間
この順番を間違えて、例えば `:hover` のあとに `:visited` を書いてしまうと、せっかくの訪問済みの色がマウスオーバーのスタイルに上書きされて消えてしまいます。
実際のコードで正しい並びを見てみましょう。
/ 1. まず普通のリンク /
a:link {
color: #0077cc;
}
/ 2. 次に訪問済みリンク /
a:visited {
color: #800080; / 紫色 /
}
/ 3. マウスが乗った時 /
a:hover {
color: #ff4500; / オレンジ色に変化 /
}
/ 4. クリックした瞬間 /
a:active {
color: #ff0000; / 真っ赤に /
}
「あれ、効かないな？」と思ったら、まずはこの書き順を確認してみてください。大体これが原因で解決しますよ！
—
4. コピペで試せる！実践的なサンプルコード
それでは最後に、実際にエディタに貼り付けてブラウザで挙動を確認できる、ちょっとしたサンプルを用意しました。
リンクをポチポチとクリックして、「あ、本当に色が変わるんだ！」という感覚をぜひご自身の目で確かめてみてください。
`:visited` 擬似クラスの実験場
下のリンクをいくつかクリックして、ブラウザバックしてみてください。訪問したリンクの色が変わるのが分かりますか？
—
チーフアーキテクトからのエール
いかがでしたでしょうか？
`:visited` は、セキュリティの壁があったり、書き順のルールがあったりと、少しだけお作法が厳しいセレクタです。でも、その背景には「ユーザーのプライバシーを守る」という、Webの世界の大切な約束事が隠されています。
こうした小さな「なぜ？」を一つひとつクリアしていくことで、あなたのフロントエンドのスキルは確実に、そして深みのあるものになっていきます。
最初は思い通りにいかなくてイライラすることもあるかもしれませんが、「大丈夫、一歩ずつ確実に進んでいますよ」。
もしまたコードが思い通りに動かなくなったら、いつでもこの記事に戻ってきてくださいね。それでは、楽しいコーディングライフを！
コメント