「未訪問」のリンクと「訪問済み」リンクの初期色。 Mozilla Firefox の場合。

目次

リンクの色

CSS で「未訪問」のリンクと「訪問済み」のリンクの色をウェブブラウザの初期設定に戻したい事があったので、ウェブブラウザ「Mozilla Firefox」の場合の初期設定のリンクの色を調べてみました。

CSS の revert 値を指定する事で、それらしき色になりましたが、私の環境の場合、複数の CSS を経由した結果なので、 CSS を適用していない状態の色を調べてみました。

CSS のソースコード :

/* <a> タグの疑似クラス（ HTML のソースコードに、この a:visited の文字は記述はされていないが、訪問済みの <a> 、何番目の <a> など、 <a> タグの現在の状態で指定可能な CSS セレクタの指定方法。 a:visited は訪問済みの <a> タグを表している。） */
/* リンクが訪問済みになった場合、このスタイルで表示される */
a:visited{
    color: revert; /* リンクの色を元に戻す */
}

初期設定のリンクの色は、ウェブブラウザによって違うようなので、 Firefox 限定になりますが良ければご覧ください。

Firefox の「ウェブ開発ツール」の「インスペクター」タブの中の「ページから色を採取」機能を使用して色を取得してみました。

目次まで戻る

サンプルページ

以下の URL に色採取用のサンプルページを準備してみました。

サンプルページには 2 つの <a> タグが記述されていて、 2 つ目の <a> タグの href 属性の値（リンク先）は、以下のサンプルページの URL になっているので、ページを開くと 2 つ目のリンクが訪問済みになっていると思います。

当ブログの画像フォルダにアップロードした HTML ファイルです。悪意のある内容は含めていません。

目次まで戻る

方法

Mozilla Firefox で以下の操作を行い色を採取してみました。

1. 「Ctrl+Shift+I」キー「ウェブ開発ツール」を起動
2. 「Ctrl+Shift+C」で「インスペクター」タブを表示（下記画像 1 ）
3. 「スポイト」のアイコンになっているボタンをクリック（下記画像 2 ）
4. マウスカーソルを置いている位置の半径数ピクセルが、虫メガネのように円形に拡大表示されて、中心の位置の色が表示されました。
5. マウスを左クリックすると、色をクリップボードにコピーする事が出来ました。

目次まで戻る

結果

採取結果は以下の画像のようになりました。未訪問のリンクの色は「#0066cc」、訪問済みのリンクの色は「#551a8b」でした。

クリックする場所によって色が変わってしまうので、正確ではないかもしれません。

目次まで戻る

テスト環境

• Windows 10（64 ビット）
• Mozilla Firefox 119.0.1 (64 ビット)

以上、閲覧ありがとうございました。

目次まで戻る