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

CSSの:active擬似クラスの使い方を徹底解説

CSSの:active擬似クラスは、ユーザーが要素をクリックしている（押下中の）瞬間に特別なスタイルを適用するために使用されます。リンクやボタンなど、インタラクティブな要素に視覚的なフィードバックを与えることで、ユーザー体験を向上させることができます。

適用できる値は、任意のカラーネーム、HEX値、RGB・HSL値など、有効な形式であれば自由に指定可能です。

:active擬似クラスの基本構文

selector:active {
  property: value;
}

使用例

以下の例では、リンクがクリックされている間、文字色がピンク系の色（#FF00CC）に変化します。

<html>
  <head>
    <style>
      a:active {
        color: #FF00CC;
      }
    </style>
  </head>
  <body>
    <a href="">このリンクをクリック</a>
  </body>
</html>

:activeを使う際のポイント

:activeは、マウスボタンが押されている間だけスタイルが適用され、ボタンを離すと元の状態に戻ります。モバイルデバイスではタップ中にスタイルが反映されるため、タッチ操作のフィードバックとしても有効です。

また、リンク関連の擬似クラスを組み合わせる場合は、CSSの推奨順序「LVHA（:link → :visited → :hover → :active）」で記述すると、意図したとおりにスタイルが適用されます。

a:link    { color: blue; }
a:visited { color: purple; }
a:hover   { color: green; }
a:active  { color: #FF00CC; }

このように:activeを活用することで、クリック操作に対する明確な反応をユーザーに伝えられ、より直感的で使いやすいWebサイトを作成できます。

  1. CSSのcalc()関数の使い方を徹底解説！動的な値の計算で柔軟なレイアウトを実現しよう

    CSSのcalc()関数を使うと、プロパティの値を計算式で指定できます。パーセンテージやピクセルなど異なる単位を混在させて演算できるため、画面幅に応じた柔軟なレイアウトを簡単に実現できます。 calc()関数とは？ calc()は、CSS内で四則演算（+、-、*、/）を行うための関数です。例えば「幅いっぱいから固定の余白分を引いたサイズ」や「コンテナ幅に応じて可変する高さ」などを、JavaScriptに頼らずCSSだけで表現できます。 基本的な構文は以下のとおりです。 width: calc(100% - 100px); この例では、親要素の幅（100%）から100pxを引いた値が要素の幅とし

  2. CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

    CSSの疑似クラス（Pseudo Class）は、要素の特別な状態を表現するための仕組みです。ドキュメント内の要素そのものだけでなく、「状態」「位置」「履歴」などといった外的な要素も捉えることができます。たとえば「マウスカーソルが乗っている要素」「すでに訪問済みのリンク」「入力値が有効なフォームフィールド」といった状態は、通常のCSSセレクターでは直接指定できません。こうした場合でも、疑似クラスを使えば柔軟にスタイルを適用できます。疑似クラスの基本構文疑似クラスは、セレクターの後ろにコロン（:）を付けて記述します。Selector:pseudo-class {   &nbs