訪問済みリンクを自前で管理する方法：a:visitedに頼らない実装テクニック

Posted on by

Webサイトを閲覧していると、「一度クリックしたリンクの色が変わる」ことがあります。これは多くの場合、CSSの a:visited という仕組みによって実現されています。しかし近年のWeb開発では、ブラウザの訪問履歴に依存するこの方法ではなく、サイト側で独自に“訪問済み”を管理する方法が使われることも増えています。

この記事では、a:visitedの基本から、その制限、そして JavaScriptとlocalStorageを使って訪問履歴を自前で管理する方法まで、初心者にも分かりやすく解説します。

a:visitedとは？訪問済みリンクの基本

まず基本から確認してみましょう。
CSSには 訪問済みリンクを指定する擬似クラス が用意されています。

a:visited {
  color: purple;
}

このCSSを書くと、ユーザーが一度クリックしたリンクの色が変わります。
多くのブラウザでは、デフォルトでも

  • 未訪問リンク：青
  • 訪問済みリンク：紫

という表示になります。

つまり、特別な設定をしなくても ブラウザが自動で訪問履歴を管理してくれる仕組みがあるのです。

a:visitedが便利な理由

a:visitedのメリットは非常にシンプルです。

1. CSSだけで実装できる

JavaScriptを使う必要がなく、CSSだけで訪問済みを表現できます。

2. ブラウザが履歴を管理してくれる

ユーザーのブラウザ履歴と連動するため、開発者側で履歴管理をする必要がありません。

3. ユーザー体験が向上する

ユーザーは

  • 「どのページを見たか」
  • 「まだ見ていないページはどこか」

を視覚的に判断できます。

特にブログやニュースサイトでは、この機能が役立ちます。

しかし a:visitedには制限がある

実は a:visited にはいくつかの制限があります。

JavaScriptで取得できない

現在のブラウザでは、セキュリティのため JavaScriptから訪問履歴を取得することができません。

例えば以下のようなことはできません。

if(link.visited){
  console.log("訪問済み");
}

これは ユーザーの閲覧履歴をサイトが勝手に取得できないようにするためです。

CSSの変更も制限されている

a:visitedでは変更できるCSSが限られています。

変更できる例

color
background-color
border-color

変更できない例

display
transform
font-size
position

つまり 色系のスタイルしか変更できません。

そこで登場する「独自訪問履歴管理」

最近のWebサイトでは、a:visitedの代わりに サイト独自の訪問履歴管理を行うケースがあります。

例えば次のような仕組みです。

  1. ユーザーがリンクをクリック
  2. JavaScriptでURLを保存
  3. 次回アクセス時に「訪問済みクラス」を付ける

この方法なら、CSSの制限を受けません。

localStorageを使った訪問履歴管理

もっとも簡単な方法は localStorage を使う方法です。

localStorageはブラウザにデータを保存できる仕組みです。

CSS

まず訪問済みの見た目を作ります。

a.visited {
  opacity: 0.6;
}

クリック済みリンクを少し薄く表示する例です。

JavaScript

次にクリック履歴を保存します。

document.addEventListener("DOMContentLoaded", () => {  const KEY = "visited_links";
  const visited = new Set(JSON.parse(localStorage.getItem(KEY) || "[]"));  document.querySelectorAll("a[href]").forEach(a => {
    if (visited.has(a.href)) {
      a.classList.add("visited");
    }
  });  document.addEventListener("click", (e) => {
    const link = e.target.closest("a");    if (!link) return;    visited.add(link.href);
    localStorage.setItem(KEY, JSON.stringify([...visited]));    link.classList.add("visited");
  });});

このコードを使うと

  • クリックしたリンクを保存
  • 再訪時に .visited クラスを付与

という処理が実現できます。

この方法のメリット

独自管理の最大のメリットは 自由度の高さです。

CSS制限がない

例えば次のような演出もできます。

a.visited {
  transform: scale(0.95);
  opacity: 0.5;
}

リスト型UIと相性が良い

メール一覧やお知らせ一覧などでよく使われます。

例えば

.mail
.mail.visited
.mail.new

のようなクラス構造です。

特定ページだけ管理できる

例えば /news/ ページだけ履歴を残すことも可能です。

if(!link.pathname.startsWith("/news/")) return;

localStorage方式の注意点

ただし、この方法には弱点もあります。

端末ごとに履歴が分かれる

localStorageはブラウザ単位なので

  • PC
  • スマホ
  • 別ブラウザ

では履歴が共有されません。

履歴削除で消える

ユーザーが

  • キャッシュ削除
  • シークレットモード

を使うと履歴は消えます。

ログインサイトの場合

もしログイン機能がある場合は

  • データベースに履歴保存
  • ユーザーIDと紐づけ

すると

  • PC
  • スマホ
  • タブレット

どこでも同じ履歴を表示できます。

SNSやWebアプリでは、この方法が使われることが多いです。

まとめ

訪問済みリンクの管理には2つの方法があります。

方法特徴
a:visited簡単だが制限あり
JavaScript管理自由度が高い

a:visitedはシンプルですが、

  • CSS制限
  • JavaScript不可

などの制約があります。

一方で localStorageを使った履歴管理を使えば、

  • 独自UI
  • リスト管理
  • 状態管理

など、より柔軟な設計が可能になります。