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

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

Webページ上のリンクの色を変更したい場合、CSSの:link擬似クラスを使用します。この擬似クラスは、まだ訪問していないリンクに対してスタイルを適用するものです。

指定できる値は、カラーネーム（例：red）やHEX値（例：#FF0000）、RGB値など、CSSで有効な任意のカラー形式です。

:linkセレクターの基本構文

a:link {
  color: カラー値;
}

サンプルコード

以下のコードでは、未訪問のリンクの色を赤（#FF0000）に設定しています。実際にブラウザで実行して、リンクの色が変化することを確認してみましょう。

<html>
   <head>
      <style>
         a:link {
            color: #FF0000;
         }
      </style>
   </head>
   <body>
      <a href="">デモリンク</a>
   </body>
</html>

リンクの状態ごとに色を変える

より実用的なWebサイトでは、リンクの状態に応じて色を使い分けるのが一般的です。:link以外にも、以下のような擬似クラスが用意されています。

  • :link … まだ訪問していないリンク
  • :visited … すでに訪問したことのあるリンク
  • :hover … マウスカーソルが重なっている状態のリンク
  • :active … クリックされている瞬間のリンク
a:link    { color: #FF0000; }  /* 未訪問のリンク */
a:visited { color: #800080; }  /* 訪問済みのリンク */
a:hover   { color: #FFA500; }  /* ホバー時 */
a:active  { color: #008000; }  /* クリック中 */

これらの擬似クラスは、:link → :visited → :hover → :active の順序（LVHA順）で記述することが推奨されています。順序を守ることで、意図したとおりにスタイルが適用されます。

  1. CSSのborder-colorプロパティで4つの境界線の色を個別に設定する方法

    CSSで4つの境界線の色を設定するには 要素の4つの境界線（上・右・下・左）それぞれに異なる色を指定したい場合は、border-colorプロパティを使用します。このプロパティには最大4つの値を半角スペースで区切って指定でき、色は上 → 右 → 下 → 左の順番（時計回り）で適用されます。 なお、border-colorを機能させるには、あらかじめborder-styleプロパティで境界線のスタイル（solid、dashed、dottedなど）を設定しておく必要があります。スタイルが未指定の場合、初期値が「none」となり、境界線自体が表示されない点に注意しましょう。 コード例 以下のコードで

  2. CSSで段組みの列間罫線の色を設定する方法（column-rule-colorプロパティ）

    CSSで段組みの列間罫線の色を設定する方法 段組み（マルチカラム）レイアウトの列と列の間に表示される罫線（ルール）の色を設定するには、column-rule-color プロパティを使用します。以下のコードを実行して、実際の表示を確認してみてください。 この例では、罫線の色に加えて、罫線のスタイル（線種）もあわせて指定しています。 サンプルコード <!DOCTYPE html> <html>    <head>       <style>         &