こんにちは！フロントエンドの現場を渡り歩いてきた、ちょっとCSSにうるさいおじさん…いや、あなたの専属チーフアーキテクトです。
CSSを勉強し始めの頃って、覚えることが次から次へと出てきて、頭がパンクしそうになりますよね。「リンクの色を変えるだけなのに、なんでこんなにセレクタの種類があるんだ！」なんて、夜中にカフェの冷めたコーヒーを飲みながらモニターを睨みつけている姿が目に浮かぶようです。
大丈夫、安心してください。最初は誰もが通る道です。今日はその中でも、ちょっと特殊で、でも知っていると「おっ、やるな！」と周りに思わせられる`:visited（ビジテッド）疑似クラス`について、おしゃべりするように楽しく、そして深く紐解いていきましょう。
—
1. `:visited` って、一体どんな子？
まずはイメージから入りましょう。
街を歩いていて、お気に入りの本屋さんやカフェを見つけたときを想像してください。「あ、ここ、先週も入ったお店だ」って、看板や入り口を見ればなんとなく分かりますよね。
Webの世界でも同じです。ユーザーがネットサーフィンをしているとき、「あ、このリンクのページ、もうさっき読んだな」と一目でわかったら、すごく親切だと思いませんか？
この「ユーザーがすでに訪れたことがあるリンク」をこっそり見つけて、「この人、ここもう見たよ！」と教えてくれるのが、この `:visited` 疑似クラスなんです。
書き方はとってもシンプル。普通のリンク（`a`タグ）の後ろに、ちょこんとくっつけてあげます。
/ 訪問済みのリンクの色を変えるよ /
a:visited {
color: #888888; / ちょっと落ち着いた灰色にする /
}
これだけで、「あ、ここクリックしたわ」という目印をユーザーに残すことができます。お買い物の履歴がレシートに残るような感覚ですね。
—
2. でも、ちょっと待って！実は厳しい「お約束」があるんです
さて、ここからが少し面白い（そして初心者が一番ハマる）お話です。
「よし、じゃあ訪問済みのリンクは、派手に背景色を真っ赤にして、フォントサイズもめちゃくちゃデカくして目立たせてやれ！」
……残念ながら、それは現代のWebの世界ではできないようになっています。
なぜだと思いますか？ 答えは「プライバシーを守るため」です。
もし、悪意のあるWebサイトが `:visited` を自由に使えたらどうなるでしょう？
例えば、「銀行のログインページ」や「特定の病院のページ」、「秘密の掲示板のページ」などを `:visited` で指定して、ユーザーがそのページに行ったことがあるかどうかをコソコソと覗き見（スパイ）できてしまうんです。
「あれ、この人、先週あの病院のページを見てるな……？」なんてストーキングされたら、怖くて夜も眠れませんよね。
そのため、ブラウザのセキュリティ（プライバシー保護）によって、`:visited` で変更できるスタイルにはものすごく厳しい制限がかけられています。
`:visited` で変えて「いい」もの・「ダメ」なもの
- 変えてOKなもの:
- 文字の色 (`color`)
- 枠線の色 (`border-color` ※ただし色は変えられるけど幅や形はダメな場合が多い)
- 背景の一部（ただし透明度が絡むとブラウザによって無視されることも）
- 変えちゃダメ（無視される）なもの:
- 大きさ（`width`, `height`, `font-size`, `padding`, `margin` など）
- 形やレイアウト（`display`, `visibility` など。つまり「行ったことのあるリンクだけ消しちゃう」なんてことはできません）
「えっ、じゃあ何ができるの？」って思いますよね。基本的には「文字や枠線の『色』を変えることだけ許されている」と覚えておいてください。セキュリティのガードマンが後ろで目を光らせているイメージです。
—
3. 実践！リンクトータルコーディネートをしてみよう
制限があるとはいえ、リンクの色が変わるだけでもユーザー体験（使いやすさ）はグッと上がります。特に、検索結果の一覧や、長いブログの記事一覧なんかでは、「あ、この記事もう読んだから、次はこっちを読もう」とスムーズに行動できますよね。
ここで、実務でもよく使われる「リンクの状態を綺麗に整える基本のセット」をご紹介します。
CSSの書き方には、実は大切な順番があります。ここがつまずきやすいポイントなので、そっとメモしておいてくださいね。
/
【重要】リンクのスタイルを書くときの黄金の順番
呪文のように覚えておくと絶対に迷子になりません！
「L(Link) – V(Visited) – H(Hover) – A(Active)」の順です。
頭文字をとって「LoVe HAate（ラブ・ヘイト）」と覚える先輩もいます（笑）。
/
/ 1. まだ訪れていない普通のリンク /
a:link {
color: #0066cc;
text-decoration: none;
}
/ 2. もう訪れたことがあるリンク (今回の主役！) /
a:visited {
color: #663399; / 落ち着いた紫色にして「読んだよ」アピール /
}
/ 3. マウスカーソルを乗せたとき /
a:hover {
color: #ff3300;
text-decoration: underline;
}
/ 4. マウスで「ぐっと」クリックしている瞬間 /
a:active {
color: #cc0000;
}
どうしてこの順番が大事かと言うと、CSSは「後から書いたものが勝つ（上書きする）」というルールを持っています。もし `:hover`（マウスを乗せたとき）よりも上に `:visited` を書いてしまうと、せっかくマウスを乗せているのに `:visited` の色が勝ってしまって、色が切り替わらなくなっちゃうんです。
「迷ったら、`Link` → `Visited` → `Hover` → `Active` の順に並べる！」これさえ守れば、もう怖いものなしですよ。
—
4. チーフアーキテクトからのちょっとした裏話（実務の現場から）
最後に、現場のシブい話をひとつ。
実は最近、ブラウザのプライバシー保護がさらに厳しくなっていて、JavaScriptなどを使って「この人、本当に `:visited` の色になっているか？」をこっそり読み取る技（サイドチャネル攻撃対策）すらブロックされるようになっています。
そのため、開発者からすると「思った通りに `:visited` の色が細かく制御できないな……」と悩むことも正直あります。
でも、だからこそ、「リンクの色が変わることでユーザーを迷子にさせない」という基本の優しさをブラウザ標準の仕組みに任せてあげるのが、一番スマートで美しいコードのあり方だったりするんです。
完璧にコントロールしようとせず、「ブラウザくんのプライバシー保護を信頼して、文字色の変更だけはお任せしよう」と肩の力を抜くのが、長くCSSと付き合っていくコツですよ。
—
まとめ
- `:visited` は、ユーザーが「もう訪れたリンク」にスタイルを適用する疑似クラス。
- プライバシー保護（ストーキング防止）のため、変えられるのは主に「色（color等）」だけで、大きさや形は変えられない。
- 書くときは `a:link` → `a:visited` → `a:hover` → `a:active` の順番（LoVe HAateの法則）を守ろう！
CSSのルールは厳しく感じることもありますが、それはすべて「ユーザーの安全と快適さ」を守るための優しいルールです。
今日からあなたの書くWebサイトにも、`:visited` をそっと添えて、ユーザーに「おかえりなさい」の優しさを届けてあげてくださいね。
それでは、また次の現場でお会いしましょう！Happy Coding!
コメント