ywork2020.com

Title

訪問済みリンクを検知する

目次 (INDEX)

:visitedとは

ここで説明する:visited とは次の語句からなるCSSの疑似クラスです。
visit
読み: ヴィジットゥ
意味: 訪問する、訪れる

目次に戻る

:visited疑似クラスの概要

この疑似クラスは、 a要素 で作成されたリンクがユーザーにとって、既に訪問済みのURLであるかを検知します。

:visitedを使う場合はページの閲覧ユーザーのプライバシーと利便性に配慮する必要があります。 プライバシー保護の為に未訪問のリンクと同じスタイルを適用することもできますが、 まったく同じではユーザーとしては不便を感じるかもしれません。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。

セレクター:visited{プロパティ名: 設定値;}
:visited{プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

この疑似クラスはa要素にしか適用できません。a要素のサンプル用意しましたので結果を見てください。

目次に戻る

参考: 訪問済みリンクを検知する

ここではサンプルとしてa要素を使ったリンクを5つ用意しました。

貴方が未訪問のページへのリンクテキストはblue(ブルー)の色で表示されています。 訪問済みのページへのリンクテキストはcornflowerblue(コーンフラワーブルー)の色で表示されています。

リンクテキストの色の違いによって貴方は既に閲覧したページにアクセスすることを防ぐことができます。 しかし、ページへのアクセスを周囲で見ている人達に知られる可能性があるかもしれません。

a{
	color: ##blue;
	text-decoration: none;
}
a:hover{
	color: ##cornflowerblue;
	text-decoration: underline;
}
a:visited{
	color: ##steelblue
}
a:visited:hover{
	color: ##cornflowerblue;
	text-decoration: underline;
}

目次に戻る