こんにちは！フロントエンドの現場で長年CSSと格闘してきた、いわば「CSSの番人」のような者です。
Web制作を始めたばかりの頃、誰もが一度は「あれ？リンクの色が変わらないぞ？」と首を傾げた経験があるはずです。今日は、そんな初学者の皆さんが必ず通る道であるリンク擬似クラス（`:link` と `:visited`）について、現場の「泥臭い知恵」を交えながら、優しく紐解いていきましょう。
—
リンクには「記憶」がある？
Webサイトを歩き回る時、リンクはまるで「道しるべ」のような存在ですよね。
実はブラウザは、私たちがどの道を通ったかをこっそり覚えています。
- `:link`：まだ一度も訪れていない「未知の道」
- `:visited`：すでに行ったことがある「思い出の道」
この2つを使い分けることで、ユーザーは「あ、ここはこの前読んだな」「ここはまだ未踏の場所だ」と直感的に判断できるようになります。これこそが、使いやすいWebサイトを作るための「おもてなしの心」なんです。
買い物に例えると分かりやすい！
スーパーでのお買い物を想像してみてください。
- `:link` は、まだカゴに入れていない「新しい商品」。
- `:visited` は、すでにレジを済ませてカバンに入れた「購入済みの商品」。
もし、どれが買ったものか分からなくなったら困りますよね？ CSSでリンクの色を変えるのは、まさに「訪問済みの場所に小さな目印をつける」という、親切なナビゲーションなんです。
—
さあ、コードを書いてみましょう
理屈はこれくらいにして、実際に手を動かしてみましょう。以下のコードをコピペして、ブラウザで確認してみてください。
/ まだ訪れていない「新しい道」へのスタイル /
a:link {
color: #007bff; / 爽やかな青色で「ここから行けます！」とアピール /
text-decoration: none;
}
/ すでに訪れた「思い出の道」へのスタイル /
a:visited {
color: #6c757d; / 少し落ち着いたグレーにして「ここは確認済み」と伝える /
}
/ おまけ：マウスを乗せた時（ホバー）の演出 /
a:hover {
text-decoration: underline; / マウスを乗せると下線が出てクリックできることを強調 /
}
—
ここでつまずく人が多い！「落とし穴」のお話
さて、ここからが現場のリアルな話です。実は、`:visited` には大きな制約があります。
なぜか色が反映されない…？
もし、`:visited` に `font-size` や `border` を指定しても、ブラウザは無視してしまいます。「えっ、なんで！？」と焦る必要はありません。これはブラウザのセキュリティ上の仕様なんです。
もしWebサイトが「このユーザーがどのサイトを見たか」を自由にCSSで検知できてしまったら、プライバシーが丸裸になってしまいますよね。そのため、`:visited` で変更できるのは、基本的に `color`（文字色）や `background-color`（背景色）など、ごく一部のプロパティに限られているんです。
順番がとっても大事！
CSSには「後に書いたものが優先される」というルールがありますが、`:link` と `:visited` は、「LVHA」という合言葉で覚えるのがプロの常識です。
1. Link（`:link`）
2. Visited（`:visited`）
3. Hover（`:hover`）
4. Active（`:active`）
この順番で書かないと、例えば「マウスを乗せているのに色が変わらない！」といった現象が起きてしまいます。CSSの優先順位は、時にとても気まぐれで、まるで猫のように扱いにくいもの。だからこそ、この順番という「お作法」を守ってあげるのが、トラブルを未然に防ぐコツです。
—
最後に：完璧を目指さなくて大丈夫
「CSSは覚えることが多くて大変だな」と思うかもしれません。でも大丈夫です。最初は全部を使いこなせなくて当たり前。まずは「リンクの色を少し工夫するだけで、ユーザーはもっと快適にサイトを回れるようになるんだな」ということさえ覚えておけば、それだけであなたはもう立派なクリエイターの入り口に立っています。
分からないことがあれば、またいつでも聞きに来てくださいね。CSSという奥深い世界を、一緒に楽しみながら歩んでいきましょう！
コメント