Skip to main content

CSSを使用してWebブラウザでデフォルトのリンク色を上書きする

Side Navigation Bar: Live Code Session - Supercharged (六月 2025)

Side Navigation Bar: Live Code Session - Supercharged (六月 2025)
Anonim

Webデザイナーがリンクを設定していない場合、すべてのWebブラウザーはリンクの既定の色を使用します。彼らです:

  • デフォルトのリンクカラー
  • アクティブリンクの色(マウスをクリックしてリンク上に保持したとき)
  • フォローされたリンクの色(以前リンクをクリックしたとき)

さらに、ほとんどのWebブラウザはデフォルトでこれを変更しませんが、ホバー色を定義することもできます。マウスの上にマウスを置いたときの色です。

CSSを使用してリンクの色を変更する

これらの色を変更するには、カスケードスタイルシートを使用します。リンクの色を変更する最も簡単な方法は、タグをスタイルすることです。

a {color:black; }

このCSSを使用すると、リンクの一部(アクティブ、フォロー、およびホバー)が黒に変わるブラウザや、デフォルトの色のみが変更されるブラウザがあります。

CSS擬似クラスを使用してリンクのすべての部分を変更する

擬似クラスは、クラス名の前にコロン(:)を付けてCSSで表現されます。 4つの擬似クラスがリンクに影響します。

デフォルトのリンクカラーを変更するには:

a:リンク{色:赤; }

アクティブな色を変更するには:

a:アクティブ{色:青; }

フォローリンクの色を変更するには:

a:訪問した{色:紫; }

マウスの色を変更するには:

a:ホバー{色:緑; }

考慮事項

デフォルトのリンクの色を上書きしないでください。リンクが見つけにくくなります。たとえば、リンクを白い背景に対して非常に明るい色に変更すると、視覚障害のあるビジターに悪影響を及ぼします。サイトの訪問者が訪問したページについて混同しないように、アクティブなカラーとフォローリンクの色を別々の色にすることをお勧めします。