CSSの:activeでクリック時のスタイルを適用する方法をわかりやすく解説

:activeは、ユーザーが要素をクリック（押下）している状態を表す擬似クラスです。この状態の間、要素に特定のスタイルを適用できます。

:activeの値とその効果の一覧

• background-color: クリック時に要素の背景色を変更します。
• border: クリック時に要素の枠線を変更します。
• color: クリック時に要素の文字色を変更します。

注意点と関連情報

:activeは、ユーザーが要素を押している状態でのみ適用されるため、非常に短い時間しかスタイルが適用されません。この状態は、マウスボタンやタッチ操作が要素に対して押されている間に限られます。リンクやボタンなど、インタラクティブな要素によく使用されます。

:activeが効かない理由として考えられること

:activeが適用されない要素に使用している

:activeは通常、リンクやボタンなどのインタラクティブな要素に対して機能しますが、一部の要素には適用されないことがあります。
対策：<a>や<button>などのインタラクティブ要素に:activeを適用するようにし、非インタラクティブな要素に適用する場合はJavaScriptで制御することを検討します。

共通するCSSコード

.css-sample-container {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin-bottom: 30px;
}

.css-sample-box {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  padding: 10px;
}

:activeで背景色を変更

要素をクリックした際に、背景色が黄色に変わる例です。

HTMLコード

<div class="css-sample-container active-background">
  <div class="css-sample-box">
    このボックスをクリックすると、背景色が黄色に変わります。
  </div>
</div>

CSSコード

.active-background:active {
  background-color: yellow;
}

表示結果

:activeで枠線を変更

要素をクリックした際に、枠線の色と幅が変更される例です。

HTMLコード

<div class="css-sample-container active-border">
  <div class="css-sample-box">
    このボックスをクリックすると、枠線が赤色の太い線に変わります。
  </div>
</div>

CSSコード

.active-border:active {
  border: 3px solid red;
}

表示結果

:activeでテキストと背景色を変更

要素をクリックした際に、文字色と背景色が同時に変わる例です。

HTMLコード

<div class="css-sample-container active-color">
  <div class="css-sample-box">
    このボックスをクリックすると、文字色が白、背景色が青に変わります。
  </div>
</div>

CSSコード

.active-color:active {
  color: white;
  background-color: blue;
}

表示結果

まとめ

• :activeは、ユーザーが要素をクリックしている間に適用される擬似クラスです。
• ボタンやリンク、インタラクティブな要素に使用すると効果的です。
• スタイルの適用時間が非常に短いため、視覚的な変化が即座に反映されるように設計する必要があります。
• 背景色や枠線、文字色など、視覚的にわかりやすいプロパティを変更することで、インタラクションを強調することができます。