【実務・中級編】 :any-link リンク疑似クラス – CSS実践ガイド

おい、諸君！フロントエンドの戦場で日々奮闘している諸君、調子はどうだ？

俺は、CSSの荒波を乗り越え、数々のプロジェクトで「あの時、このCSSがあれば…」と悔やむ日々を過ごしてきた、いわばCSSの生き字引みたいなもんだ。今日は、そんな俺が、諸君らの日々のコーディングを少しでも楽に、そしてスマートにするための秘策を伝授しようと思う。

今回焦点を当てるのは、CSSの「:any-link」疑似クラスだ。名前だけ聞くと、「なんだか新しいものか？」と思うかもしれないが、実はこれ、諸君らが普段からお世話になっているであろう「`:link`」と「`:visited`」を、もっとスマートに、もっとパワフルに扱えるようにしてくれる、まさに隠れた名選手なんだ。

:any-linkとは何か？ – リンクの「今」を掴む魔法

まず、基本から確認しよう。諸君らは、ウェブサイトでリンクの色を変えたい時、どうしているだろうか？

• 未訪問のリンクは、ちょっと目立たせたい。
• 訪問済みのリンクは、落ち着いた色にしたい。

こんな感じで、`:link` と `:visited` を使い分けて、リンクの状態を表現してきたはずだ。

/ 未訪問のリンク /
a:link {
color: blue;
}

/ 訪問済みのリンク /
a:visited {
color: purple;
}

しかし、ここでちょっと考えてみてほしい。もし、「未訪問も訪問済みも、どっちも同じスタイルにしたい」って場面があったらどうする？例えば、ナビゲーションメニューのリンクなんかは、ユーザーがそこをクリックしたかどうかで見た目を変える必要はないことが多いだろう。

そこで登場するのが、`:any-link` だ！

`:any-link` は、その名の通り、「リンクである要素」にマッチする。これは、`:link` (未訪問のリンク) と `:visited` (訪問済みのリンク) の両方に一致するんだ。つまり、ユーザーがそのリンクを訪れたかどうかに関わらず、すべてのハイパーリンク要素に対してスタイルを適用できるようになる。

たとえば、先ほどの例を `:any-link` を使って書き換えると、こうなる。

/ 未訪問・訪問済みを問わず、すべてのリンクに適用 /
a:any-link {
color: navy; / リンクは常にこの色になる /
}

どうだ？シンプルでしょ？

:any-linkの裏側 – ブラウザはどう動いているのか？

「へぇ、便利そうだけど、ブラウザってどうやってこれを処理してるんだ？」と思うかもしれない。いい質問だ！

ブラウザは、HTMLドキュメントを解析して、`` タグのような、`href` 属性を持つ要素を見つけると、それがリンクであると認識する。そして、そのリンクの状態（未訪問か、訪問済みか）を内部的に管理している。

/ メインナビゲーションのリンク（未訪問・訪問済み問わず） /
.main-nav a:any-link {
text-decoration: none; / 下線を消す /
color: #333; / 基本の文字色 /
font-weight: bold; / 太字にする /
padding: 10px 15px; / 内側の余白 /
display: inline-block; / インラインブロック要素にする /
transition: color 0.3s ease; / ホバー時の色変化を滑らかに /
}

/ ホバー時のスタイル /
.main-nav a:any-link:hover,
.main-nav a:any-link:focus { / フォーカス時も同様に /
color: #007bff; / ホバー時の色 /
}

このコードでは、`:any-link` を使うことで、ナビゲーション内のすべてのリンクに対して、共通のスタイル（下線なし、文字色、太字、余白など）を一度に適用している。さらに、`:hover` や `:focus` でホバー時やキーボード操作時のスタイルも指定することで、ユーザーインターフェースとしてより洗練されたものにできる。

`:link` と `:visited` をそれぞれ書く必要がない分、コードもスッキリするし、メンテナンス性も向上する。

2. カード型コンテンツ内のリンク

最近よく見かける、画像やテキストがセットになった「カード型」のコンテンツ。その中に含まれるリンクも、カード全体の一部としてデザインしたい場合があるだろう。

魅力的な商品名

この商品の詳細はこちらをご覧ください。

詳細を見る

.card {
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden; / 角丸で画像がはみ出ないように /
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
width: 300px;
}

.card img {
width: 100%;
height: 200px;
object-fit: cover; / 画像のアスペクト比を保ちつつ全体を覆う /
}

.card-content {
padding: 20px;
}

/ カード内のリンク（未訪問・訪問済み問わず） /
.card-content a:any-link {
color: #0056b3; / カード内のリンク色 /
text-decoration: underline; / カード内では下線を表示 /
font-weight: bold;
display: inline-block; / クリック範囲を広げる /
margin-top: 10px;
}

.card-content a:any-link:hover,
.card-content a:any-link:focus {
color: #003d80; / ホバー時の色 /
text-decoration: none; / ホバー時は下線を消す /
}

この例では、`.card-content` の中のリンクに `:any-link` を適用している。カード内のリンクも、未訪問か訪問済みかでスタイルを変える必要はあまりないだろう。`:any-link` で統一することで、コードの簡潔さを保ちつつ、リンクとしての機能（クリックできること）を明示できる。

3. サイト全体でリンクのデフォルトスタイルをリセットしたい場合

「いや、うちのサイトはリンクの色とか下線とか、全部自分で決めたいんだ！」という場合にも、`:any-link` は役立つ。

サイト全体でリンクのデフォルトスタイル（ブラウザによって微妙に異なることがある）を一旦リセットし、共通のスタイルを適用したい場面は多い。

/ 全てのリンク要素に対して、ブラウザデフォルトのスタイルを上書き /
/ :link と :visited の両方をカバー /
:any-link {
color: inherit; / 親要素の色を継承 /
text-decoration: underline; / 標準の下線を表示 /
cursor: pointer; / カーソルをポインターに /
}

/ 必要に応じて、特定のセクションのリンクスタイルを再定義 /
.main-nav a:any-link {
color: #333;
text-decoration: none;
/ … 他のスタイル /
}

footer a:any-link {
color: #666;
/ … 他のスタイル /
}

このように、まず`:any-link` を使ってサイト全体のリンクの基本スタイルを定義し、その後、ナビゲーションやフッターなど、特定のセクションで必要に応じてスタイルを上書きしていく、というアプローチも可能だ。これは、CSSのカスケーディング（継承）とSpecificity（特異度）を理解していれば、非常に強力な手法となる。

現場からのアドバイス：`:any-link` との付き合い方

さて、`:any-link` の便利さは分かってもらえたと思う。だが、伝説のチーフアーキテクトとしては、諸君らにさらに一歩進んだアドバイスをしたい。

1. `:link` と `:visited` もまだまだ現役

`:any-link` は便利だが、だからといって `:link` や `:visited` が不要になったわけではない。

• 特定の状態によってスタイルを明確に分けたい場合（例：未訪問リンクは赤、訪問済みリンクはグレーなど、デザイン的に明確な意図がある場合）は、依然として `:link` と `:visited` を使い分けるのがベストだ。
• パフォーマンスを極限まで追求する（これはよほど大規模なサイトでなければ気にする必要はないが、知識として知っておくべき）場合、ブラウザは `:link` と `:visited` では、リンクの状態判定の処理が若干異なる可能性がある。とはいえ、現代のブラウザの最適化能力を考えると、`:any-link` を使うことによるパフォーマンス低下は、ほとんど気にする必要はないだろう。

2. `:focus-visible` との組み合わせも忘れずに

現代のUIデザインでは、キーボード操作（Tabキーでの移動）や、クリック操作に対するフィードバックが非常に重要だ。`:any-link` はリンクの状態（訪問済みかどうか）には関心がないが、ユーザーが「今、操作しようとしている」状態には反応したいだろう。

そこで、:focus-visible 疑似クラスとの組み合わせが効果的だ。

/ リンク全体に適用 /
a:any-link {
color: #007bff;
text-decoration: none;
transition: all 0.2s ease-in-out; / 滑らかな変化 /
}

/ ホバー時（マウス操作） /
a:any-link:hover {
color: #0056b3;
text-decoration: underline;
}

/ フォーカス時（キーボード操作など、ユーザーが操作しようとしている状態） /
/ focus-visible を使うことで、マウスでクリックしただけではスタイルが変わらない /
a:any-link:focus-visible {
outline: 2px solid #007bff; / フォーカスリングを明確に /
outline-offset: 2px; / フォーカスリングと要素の間に隙間を /
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); / より目立つシャドウ /
color: #003d80; / フォーカス時の文字色 /
}

`:any-link` でリンクとしての基本スタイルを定義し、`:hover` でマウス操作時のスタイル、そして `:focus-visible` でキーボード操作時などの「インタラクティブな状態」に対するスタイルを定義する。この組み合わせは、アクセシビリティとユーザーエクスペリエンスの両方を高めるための、まさに鉄板のテクニックだ。

3. `:any-link` は `` タグ以外にも使える？

「`:any-link` は `` タグにしか使えないの？」という疑問もあるかもしれない。実は、`:any-link` は `` タグだけでなく、`href` 属性を持つ任意の要素に適用できる。

これは普通のテキストです。
これはリンクです
そして、これは

リンクのように振る舞うSpan要素（※アクセシビリティには注意！）

です。

/ タグと