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

CSSの:visited疑似クラスの使い方を解説

CSSの:visited疑似クラスは、ユーザーがすでに訪問したことのあるリンクに対して、特別なスタイルを適用するために使用されます。訪問済みリンクと未訪問リンクで見た目を変えることで、ユーザーはどのページをすでに閲覧したのかをひと目で把握できるようになります。

:visited疑似クラスで指定できる値

適用できるスタイルの値は、任意の有効な形式での色指定です。具体的には、以下のような方法が使えます。

  • カラーネーム（例： green、blue）
  • 16進数カラーコード（例： #006600）
  • RGB値（例： rgb(0, 102, 0)）

コード例

次の例では、訪問済みリンクの文字色を濃い緑色（#006600）に変更しています。

<html>
   <head>
      <style>
         a:visited {
            color: #006600
         }
      </style>
   </head>
   <body>
      <a href = "">このリンクをクリック</a>
   </body>
</html>

注意点

プライバシー保護のため、ブラウザによって:visited疑似クラスで使用できるCSSプロパティには制限があります。主にcolor、background-color、border-colorなどの色関連プロパティのみが適用可能で、フォントサイズや表示・非表示の切り替えなどは制限されています。また、未訪問リンクには:link疑似クラスを使用してスタイルを定義するのが一般的です。

  1. CSSのcubic-bezier()関数の使い方をわかりやすく解説

    CSSでカスタムのイージング（加速・減速のカーブ）を定義したいときに便利なのが、cubic-bezier()関数です。この関数を使うことで、トランジションやアニメーションの速度変化を4つの制御点の値で細かく調整できます。cubic-bezier()関数とはcubic-bezier(x1, y1, x2, y2)の形式で指定し、それぞれの引数には0〜1の範囲（x軸）および任意の値（y軸）を取る数値を渡します。ベジェ曲線の形状によって、アニメーションが「ゆっくり始まって速く終わる」「一瞬オーバーシュートして戻る」などの表現が可能になります。実装例以下のコードでは、マウスホバー時にdiv要素の幅が3

  2. CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

    CSSの疑似クラス（Pseudo Class）は、要素の特別な状態を表現するための仕組みです。ドキュメント内の要素そのものだけでなく、「状態」「位置」「履歴」などといった外的な要素も捉えることができます。たとえば「マウスカーソルが乗っている要素」「すでに訪問済みのリンク」「入力値が有効なフォームフィールド」といった状態は、通常のCSSセレクターでは直接指定できません。こうした場合でも、疑似クラスを使えば柔軟にスタイルを適用できます。疑似クラスの基本構文疑似クラスは、セレクターの後ろにコロン（:）を付けて記述します。Selector:pseudo-class {   &nbs