CSSの:visitedで訪問済みリンクのスタイルを設定する方法をわかりやすく解説

:visitedは、リンクが一度クリックされ、ユーザーがそのリンク先を訪問した後に適用されるスタイルを定義するための擬似クラスです。リンクの状態によって見た目を変えるのに役立ちます。

:visitedの値とその効果の一覧

• :visited: ユーザーが訪問済みのリンクに適用されるスタイル。

注意点と関連情報

:visitedで変更できるスタイルは、セキュリティ上の理由から限られています。例えば、リンクのcolorやbackground-colorは変更できますが、borderやbox-shadowなど、いくつかのプロパティは変更できません。 これにより、リンクの訪問状況を通じてプライバシーが侵害されるのを防ぎます。

CSS :visited

以下の例では、ユーザーがリンクを訪れたかどうかに基づいて、リンクの色が赤に変わることが確認できます。

HTMLコード

<div class="css-sample-container">
    <a href="https://example.com" class="css-sample-link">Visit Example.com</a>
    <a href="https://google.com" class="css-sample-link">Visit Google</a>
</div>

CSSコード

.css-sample-container {
    margin: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

.css-sample-link {
    color: #1a73e8;
    text-decoration: none;
    font-size: 18px;
    display: block;
    margin-bottom: 10px;
}

.css-sample-link:visited {
    color: #ff0000;
}

表示結果

まとめ

• :visitedは、ユーザーが訪問済みのリンクにスタイルを適用するための擬似クラスです。
• セキュリティ上の理由から、:visitedで変更できるプロパティは限られており、主にcolorやbackground-colorが対象です。
• プライバシー保護のため、:visitedでの変更が限られていますが、リンクの見た目を区別するために役立ちます。