🔗

リンクの未訪問と訪問済みを表す技術

2024/09/27に公開

ヤコブ・ニールセン博士が 2004 年に言っているように、未訪問のリンクと訪問済みのリンクは色などで違いがわかると嬉しい。

とはいえ、デフォルトの :link と :visited の色をそのまま使うとサイトの雰囲気に合わないことがあるので色々変えてみたい

ブラウザデフォルト

多少の明度や彩度の調整をして使われることもある。

Google の検索結果のタイトル部分などで使われているパターン。
リンクであることは文脈でほぼ明示的だが、テキストカラーとは区別をつけたいというような場合。

色をつけたくない場合、underline だけでもリンクだと伝わるだろうと思えるときに。
訪問済みはグレーになることが多い気がする。
Zenn の記事一覧ようなカード型スタイルでリンクであることが明示的な場合は underline さえなくなることもある。

Slashdot の本文などで使われているパターン。

CNN NEWS JAPAN の本文などで使われているパターン。

最近のお気に入り。
リスト表示に限られるが、未訪問リンクが通知ドットっぽくて好き。
訪問済みはグレーで。