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

CSSで訪問済みリンクの色を設定する方法（:visitedセレクタの使い方）

Webページの閲覧履歴に応じてリンクの見た目を変えたい場合、CSSの:visited擬似クラスを使用します。これにより、ユーザーがすでに訪問したことのあるリンクに対して、任意の色やスタイルを適用できます。

:visited擬似クラスとは

:visitedは、ユーザーが過去にクリックして訪問したリンク（<a>要素）にのみスタイルを適用するための擬似クラスです。訪問前のリンクには:link、マウスオーバー時には:hover、クリック中には:activeが対応しており、これらと組み合わせて使うのが一般的です。

基本的な使い方

以下のコードでは、訪問済みリンクの文字色を赤（#FF0000）に設定しています。実際にブラウザで表示し、一度リンクをクリックしてから再読み込みすると、色が変化することを確認できます。

<html>
   <head>
      <style>
         a:visited {
            color: #FF0000;
         }
      </style>
   </head>
   <body>
      <a href = "">My Link</a>
   </body>
</html>

注意点：プライバシー保護による制限

近年のモダンブラウザでは、悪意あるサイトが:visitedのスタイルを悪用してユーザーの閲覧履歴を推測する「履歴スニッフィング」を防ぐため、適用できるプロパティが制限されています。使用できるのは主にcolor、background-color、border-colorなどの色関連プロパティのみで、displayやフォントサイズの変更などは反映されない点に注意してください。

  1. CSSでリンクの色を設定する方法：:linkセレクターの使い方を解説

    Webページ上のリンクの色を変更したい場合、CSSの:link擬似クラスを使用します。この擬似クラスは、まだ訪問していないリンクに対してスタイルを適用するものです。指定できる値は、カラーネーム（例：red）やHEX値（例：#FF0000）、RGB値など、CSSで有効な任意のカラー形式です。:linkセレクターの基本構文a:link { color: カラー値; }サンプルコード以下のコードでは、未訪問のリンクの色を赤（#FF0000）に設定しています。実際にブラウザで実行して、リンクの色が変化することを確認してみましょう。<html> <head>

  2. CSSで背景色の不透明度を設定する方法｜RGBAの使い方を徹底解説

    背景色に不透明度（透過効果）を設定したい場合は、CSSのRGBAカラーモデルを使用します。RGBAは、赤（R）・緑（G）・青（B）の3原色に、透明度を表すアルファ値（A）を加えた色の指定方法です。アルファ値は0〜1の範囲で指定し、「0」が完全な透明、「1」が完全不透明になります。 RGBAの基本構文 背景色の不透明度は、backgroundプロパティで次のように指定します。 background: rgba(40, 135, 70, 0.5); /* 不透明度50% */ サンプルコード 以下のコードでは、同じ色でありながらアルファ値を変えることで、透明度の異なるボックスを表示しています。ブラ