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

CSSでリンクの色を設定する方法

CSSでリンクの色を設定するには、:link 疑似クラスを使用し、color プロパティで任意の色を指定します。これにより、未訪問のリンクの表示色を自由に変更できます。

サンプルコード

以下のコードを実行すると、リンクの色が黒（#000000）に設定されます。実際にブラウザで確認してみましょう。

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

応用：リンクの状態別に色を変える

リンクの状態に応じて色を切り替えたい場合は、次の疑似クラスを組み合わせることで、より使いやすいデザインになります。

  • a:link … 未訪問のリンクの色
  • a:visited … 訪問済みのリンクの色
  • a:hover … マウスカーソルを重ねたときの色
  • a:active … クリックしている瞬間の色

なお、:visited → :hover → :active の順番でスタイルを定義すると、意図したとおりに状態が反映されやすくなります。

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

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

  2. CSSでリンクをスタイリングする方法｜擬似クラスの基本と実例

    CSSでリンクのデザインを変更するには、リンクが持つ以下の4つの状態を理解しておくことが重要です。これらはアンカー要素（<a>タグ）の擬似クラスとして定義されており、状態ごとに異なるスタイルを適用できます。a:link …… 未訪問の通常リンク a:visited …… すでに訪問したことのあるリンク a:hover …… マウスカーソルがリンク上にある状態 a:active …… リンクがクリックされている瞬間サンプル1：リンクの状態ごとに色を変えるそれでは、実際のコード例を見てみましょう。次の例では、通常時・ホバー時・クリック時でリンクの文字色を切り替えています。<!DO