こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。
CSSを学び始めの頃って、次から次へと出てくる専門用語や「セレクタ」の数々に、思わず頭がクラクラしてしまいますよね。「これ、全部覚えなきゃダメなの……？」なんて、キーボードを前に途方に暮れてしまった経験、あなたにもあるかもしれません。
でも、安心してください。大丈夫ですよ、一歩ずつ紐解いていけば、CSSは決してあなたを裏切らない、とっても素直で可愛い相棒ですから。
今回は、そんな数あるCSSの機能の中でも、Webページを作る上で避けて通れない「リンク（``タグ）」を優しくお化粧するための魔法、`:link`（リンク）疑似クラスについて、じっくりお話ししていきますね。
—
1. そもそも「`:link`疑似クラス」ってどんな子？
Webサイトをサーフィンしていて、青い文字に下線が引いてある「リンク」をよく見かけますよね。あれをクリックすると、別のページに飛んだり、資料をダウンロードできたりします。
CSSの世界では、この「リンク」に対してスタイル（色や装飾）を当てることができます。その中でも `:link` は、こんな願いを叶えてくれる専用の看板娘です。
> 「ねぇねぇ、このリンク、まだユーザーさんが一度もクリックして（訪問して）ない、まっさらな状態のときだけ、特別な色にしてあげて！」
そう、`:link` は「まだ誰も足を踏み入れたことのない、未訪問のリンク」という状態（ステータス）をそっと見つけて、狙い撃ちでスタイルを教えるための仕組みなんです。
身の回りの例えで考えてみよう
これを私たちの日常に例えてみましょう。街を歩いていて、新しくできたばかりのピカピカのお店を見つけたときのことを想像してみてください。
- 店頭には「新規オープン！」の真っ赤なリボンが飾られていて、「まだ誰も入ったことがない、まっさらなお店だな」とひと目でわかりますよね。
- でも、一度そのお店に入って買い物をしたことがあるリピーターさんは、もうその真新しいリボンには惹かれず、落ち着いた気持ちでドアをくぐります。
Webのリンクもこれと全く同じです。
「まだ行ったことがない場所への道標（未訪問）」には、ユーザーが「あ、ここまだ見てないな！」と気づきやすいように、`:link` を使ってピカピカの目印をつけてあげるんです。
—
2. つまずきがち？「`a`タグ」と何が違うの？
ここで、よく初学者さんが「あれ？」と首をかしげてしまうポイントがあります。
「先生、リンクの色を変えるなら、わざわざ `:link` なんて難しい名前を使わずに、単に `a { color: red; }` って書けばいいんじゃないですか？」
……おっ、非常に鋭い着眼点ですね！さすが私のブログを読んでくれている読者さんです。
実は、`a { … }` と書いた場合、それは「未訪問のリンク」だけでなく、「すでに何回もクリックしたことがあるリンク（`:visited`）」も含めて、世の中すべてのリンクを一網打尽にしてしまいます。
一方で、`:link` はもっとお上品でピンポイントです。
「必ず `href` 属性（リンク先のURL）を持っていて、かつ、まだユーザーに踏まれていないリンクだけ」に限定してラブレターを届けます。
そのため、実務の現場では、訪問済みリンクと未訪問リンクの色をきっちり分けたいときなどに、このコンビを登場させることがあります。
—
3. さあ、実際にコードを書いてみましょう！
百聞は一見にしかず。実際にあなたのエディタに貼り付けて、ブラウザで動かせるコードを用意しました。
まずはHTMLとCSSのセットです。お気軽にコピペして、おうちのパソコンで試してみてくださいね。
HTMLのサンプル
私のオススメ情報
以下のリンクの色に注目してみてくださいね。
CSSのサンプル (`style.css`)
/ 1. すべてのa要素の基本設定（今回は文字サイズなどを整えます） /
a {
font-size: 16px;
font-weight: bold;
text-decoration: none; / デフォルトの下線をいったん消すお洒落テクニック /
}
/ 2. まだ誰も訪問していないリンクだけに適用するスタイル！ /
a:link {
color: #e74c3c; / 鮮やかなコーラルレッドにして、目を引くようにするよ /
border-bottom: 2px dashed #e74c3c; / 下線代わりに破線を引いてみる /
}
このコードを保存してブラウザで開くと、`href` を持っている「秘密のページ」の文字だけが、鮮やかな赤色になり、下に可愛い破線が引かれます。
反対に、`href` のない「ただの文字」にはこの魔法はかかりません。`:link` はちゃんと「本当にクリックできるリンクかな？」とお行儀よく確認してからスタイルを適用してくれるのです。
—
4. プロが教える、実務で絶対に知っておくべき「お約束」
さて、ここからがチーフアーキテクトとしてのちょっとディープで大切なアドバイスです。
CSSのリンク周りを触るとき、先輩エンジニアたちが口を酸っぱくして守っている「黄金の順番」というものがあります。それが、かの有名な「LVHAの法則」です。
これはリンクにかかる疑似クラスを並べる順番の頭文字をとったものです。
1. `:link` （未訪問）
2. `:visited` （訪問済み）
3. `:hover` （マウスが乗っているとき）
4. `:active` （クリックしている瞬間）
呪文のように覚えるなら、「Love（L） Very（V） Hot（H） Animals（A）」……なんて覚える海外のプロもいたりします（笑）。
なぜこの順番が大事かというと、CSSは「あとから書いたものが強い（詳細度が同じ場合）」というルールを持っています。もし順番を間違えて `:hover` のあとに `:link` なんて書いてしまうと、せっかくマウスを乗せても「いや、まだ未訪問だからこっちの色にするね！」とCSSが上書きしてしまい、マウスオーバーの色が変わらなくなってしまう悲劇が起きるんです。
つまずきやすいポイントですが、
「リンクの基本（`:link`, `:visited`）を先に書いて、動きのあるもの（`:hover`, `:active`）をあとに書く」
これだけ覚えておけば、もう怖くありません！
—
まとめ
今回は、`:link` 疑似クラスについて、身近な例えを交えながらお話ししてきました。
- `:link` は、「まだ誰も踏み入れたことのない、まっさらなリンク」を見つけるための専用の目印。
- `a` タグ全体と違って、未訪問の状態にだけピンポイントでアプローチできる。
- 書くときは「LVHA（link, visited, hover, active）」の順番をちょっぴり意識してあげると完璧！
Web制作の世界は、最初は覚えることが多くて圧倒されてしまうかもしれませんが、一つひとつのセレクタには、ちゃんと「こういう想いで作られたんだよ」というストーリーがあります。
焦らず、あなたのペースで、楽しみながらコードを書いていってくださいね。
それでは、次回のフロントエンドの教室でお会いしましょう！
コメント