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

CSSの:activeセレクターでアクティブなリンクのスタイルを設定する方法

リンクがクリックされている瞬間（アクティブ状態）のスタイルを変更したい場合は、CSSの :active セレクターを使用します。このセレクターを活用することで、ユーザーがリンクを押下したタイミングで背景色や文字色などを変化させ、操作へのフィードバックを視覚的に伝えることができます。

以下のコードでは、a:active を指定して、リンクがクリックされた際に背景色が緑色に変わるように設定しています。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         a:active {
            background-color: green;
         }
      </style>
   </head>
   <body>
      <a href = "https://qries.com">Welcome to Qries</a>
      <p>Click on the above link to see the effect.</p>
   </body>
</html>

解説のポイント

  • :active の動作タイミング： リンク上でマウスボタンが押されている間だけスタイルが適用され、ボタンを離すと元の状態に戻ります。
  • 他の擬似クラスとの併用： :hover（カーソルが乗ったとき）や :visited(訪問済み) などと組み合わせることで、より直感的なナビゲーション体験を作れます。
  • 宣言順序に注意： 同じ要素に対して複数のリンク擬似クラスを使う場合は、「:link:visited」→「:hover」→「:active」（LVHA順）の順に記述するのが推奨されます。

上記のサンプルを実行し、表示されたリンクを実際にクリックしてみてください。クリックしている間だけ背景が緑色に変化する効果を確認できます。

  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"