CSSの:active疑似クラスとは？基本構文から実用例までわかりやすく解説

疑似クラス（Pseudo class）とは、要素やCSSセレクターが持つ特定の「状態」を表現するための仕組みです。その中でも:active疑似クラスは、要素がアクティブな状態、つまりユーザーがマウスボタンを押してクリックしている瞬間を検出し、スタイルを適用するために使われます。

この疑似クラスは、リンクやボタンなど、クリック操作を受け付ける要素と組み合わせて使用されるのが一般的です。例えばリンクに適用すれば、そのリンクが押されている間だけ指定したスタイルが反映され、指を離すと元の状態に戻ります。

:activeの基本構文

a:active {
  color: green;
}

セレクターの後ろに:activeを付けるだけで、クリック中の状態に対して任意のCSSプロパティを指定できます。

実際の使用例

ここからは、さまざまなシーンでの:active疑似クラスの使い方をサンプルコードとともに見ていきましょう。

例1：リンクの文字色を変える

<html>
<head>
  <style>
    a:active { color: green; }
  </style>
</head>
<body>
  <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

解説

リンクは通常、標準のリンクカラー（青）で表示されます。しかし、このリンクをクリックしている間だけ文字色が緑に変わり、マウスボタンを離すと元の色に戻ります。

例2：クリック時にフォントサイズを変更する

<html>
<head>
  <style>
    a:active { font-size: 20px; }
  </style>
</head>
<body>
  <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

解説

リンクをクリックしている間だけ、フォントサイズが20pxに拡大されます。押したことが視覚的に伝わりやすい、シンプルながら効果的な演出です。

例3：ページ全体の背景色を変える

<html>
<head>
  <style>
    body:active {
      background: seagreen;
    }
  </style>
</head>
<body>
  <div>click anywhere in this window</div>
</body>
</html>

解説

:activeはリンクやボタン以外にも使えます。この例ではbody要素に適用しているため、画面上のどこかをクリックしている間、ページ全体の背景色がシーグリーンに変化します。

例4：ボタンの文字色を変える

<html>
<head>
  <style>
    #thisButton:active { color: red; }
  </style>
</head>
<body>
  <button id="thisButton">Click Me!!</button>
</body>
</html>

解説

IDセレクターと組み合わせれば、特定のボタンだけにスタイルを適用できます。この例では、ボタンをクリックしている間だけテキストの色が赤に変わります。

:activeを使う際のポイント

リンクに:activeを適用する場合、他のリンク関連の疑似クラスとの宣言順序に注意が必要です。一般的にはLvHA（Love-Hate）順序と呼ばれる :link → :visited → :hover → :active の順で記述すると、意図したとおりにスタイルが反映されます。

また、スマートフォンなどのタッチデバイスでは、クリック（タップ）の瞬間が非常に短いため、:activeのスタイルが見えにくい場合があります。その場合はtouchstartイベントとの併用や、タップ領域の調整を検討するとよいでしょう。

ブラウザ対応状況

Chrome	Firefox	Edge	IE	Safari	Opera
1〜	1〜	対応済み	4〜	1〜	5〜

:active疑似クラスは非常に古くから実装されているため、主要なすべてのブラウザで問題なく動作します。互換性を気にせず安心して使用できる擬似クラスです。

CSSの:visited疑似クラスとは？使い方とスタイル適用の制限をわかりやすく解説

CSSでz-indexプロパティをアニメーションさせる方法

CSSの標準リンクスタイルとは？リンク状態ごとのデフォルト色とカスタマイズ方法
リンクは、目的に応じて自由にスタイルを設定できます。リンクは通常のテキストと視覚的に区別できるスタイルにすることが推奨されています。リンクの各状態におけるデフォルトのスタイルは、以下の表のとおりです。リンク状態デフォルトの色 Active（アクティブ・クリック中）#EE0000 Focus（フォーカス時）#5E9ED6 または類似の青系のアウトライン（Windows・Macの場合）Linuxでは #F07746 のアウトライン（テキストの色は変わりません） Hover（ホバー時）#0000EE Link（未訪問リンク）#0000EE Visited（訪問済みリンク）#551A8B
CSSの:focus-within疑似クラスの使い方をわかりやすく解説
フォーカスを受け取った要素そのものだけでなく、その親要素にもスタイルを適用したい場合は、CSSの:focus-within疑似クラスを使用します。:focus-withinは、「要素自身、またはその子孫要素のいずれかがフォーカスを持っているとき」に一致する疑似クラスです。フォーム全体やカード型レイアウトなど、入力フィールドを含むコンテナの見た目を動的に変化させたい場面で特に便利です。以下に、CSSの:focus-within疑似クラスの具体的な使用例を示します。例1：フォームへの適用<!DOCTYPE html> <html> <head> <styl