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

CSSでアクティブなリンクの色を変更する方法

リンクがクリックされている瞬間（アクティブ状態）の色を変更するには、CSSの:active擬似クラスを使用します。色の値には、任意の有効な形式で記述されたカラーネームやカラーコードを指定できます。

基本的な使い方

:activeは、ユーザーがリンクを押し込んでいる間だけ適用される擬似クラスです。次のようにセレクターを指定します。

a:active {
  color: #FF00CC;
}

サンプルコード

アクティブなリンクの色を変更する実装例です。下記のコードでは、リンクをクリックしている間、文字色が#FF00CC（明るいピンク系の色）に変化します。実際にブラウザで動作を確認してみてください。

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

補足：リンクの状態別スタイル指定

リンクの見た目は、状態に応じて複数の擬似クラスを使い分けることで細かく制御できます。:link（未訪問のリンク）、:visited（訪問済みのリンク）、:hover（マウスオーバー時）、:active（クリック中）があります。これらを定義する際は、「LVHA」の順序（Link → Visited → Hover → Active）で記述することが推奨されており、この順序を守ることで意図したとおりのスタイルが正しく適用されます。

  1. CSSでテキスト選択時のデフォルト色を変更する方法｜::selectionの使い方

    Webページ上でテキストをドラッグして選択すると、通常は青っぽいハイライトが表示されます。このデフォルトの選択色は、CSSの ::selection 疑似要素を使うことで、文字色や背景色を自由に上書きできます。 以下に、選択時のハイライトを紫背景・白文字にカスタマイズするサンプルコードを示します。 サンプルコード <!DOCTYPE html> <html> <head> <style>    /* Firefox向け（旧バージョン対応） */    ::-moz-selection {   &

  2. HTMLでリンクの色を変更するにはどうすればよいですか？

    HTMLでリンクの色を変更する基本HTMLでリンクの色を変更するには、CSSの「color」プロパティを使用します。具体的には、style属性と組み合わせて指定します。style属性は、個々の要素に対してインラインスタイルを適用するための属性です。リンク（<a>タグ）にstyle属性を追加し、そこへcolorプロパティを記述することで、リンクの色を自由に変更できます。ただし、1点注意が必要です。style属性によるインラインスタイルは最も優先度が高いため、<style>タグや外部スタイルシートで設定されたスタイルは上書きされてしまいます。コード例以下のコードを実行すると