CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:visitedセレクタで訪問済みリンクをスタイリングする方法

訪問済み（クリック済み）のリンクすべてにスタイルを適用したい場合は、CSSの :visited セレクタを使用します。このセレクタを活用することで、ユーザーがすでに訪れたことのあるリンクと、まだ訪れていないリンクを見た目で区別できるようになり、サイトのユーザビリティ向上につながります。

実装例

以下のコードは、:visited セレクタを使って訪問済みリンクのスタイルを設定するサンプルです。実際にブラウザで動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         a:link, a:visited {
            background-color: white;
            color: black;
            border: 1px solid blue;
            padding: 30px 30px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
         }
         a:hover, a:active {
            background-color: red;
            color: white;
         }
      </style>
   </head>
   <body>
      <a href = "demo.html" target="_blank">Demo Link</a>
   </body>
</html>

各セレクタの役割

  • a:link … まだ訪問していない通常のリンクに適用されます。
  • a:visited … ユーザーがすでに訪問したことのあるリンクに適用されます。
  • a:hover … マウスカーソルをリンクの上に重ねたときに適用されます。
  • a:active … リンクがクリックされている瞬間に適用されます。

注意点

プライバシー保護の観点から、:visited セレクタで指定できるCSSプロパティには制限があります。利用できるのは主に color、background-color、border-color など一部のプロパティのみで、フォントサイズや表示・非表示の切り替えなどは指定できません。この点に留意しながらデザインを設計するとよいでしょう。

  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"