アクティブスタイル
CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 10/43。
:active 疑似クラスは、ユーザーによって要素がアクティブ化されているとき（通常、ユーザーが要素をクリックしてマウスボタンを押し続けている間）に、その要素にスタイルを適用します。
例えば：
<button class="action-button">Click Me!</button>ボタンがアクティブな時のスタイルを設定するためにCSSを追加します：
.action-button {
background-color: blue;
}
.action-button:active {
background-color: darkblue;
}ボタンをクリックして押し続けると、色が青から濃い青（darkblue）に変わります。これにより、自分の操作が認識されているという視覚的なフィードバックをユーザーに提供します。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
チャレンジ
簡単.special-linkクラスに対して、リンクがアクティブな状態のときに以下のスタイルを追加するCSSを記述してください：
- テキストの色を #e74c3c に変更する
- 1px 1px 2px rgba(0,0,0,0.3) のテキストシャドウを追加する
チートシート
:active 疑似クラスは、ユーザーによって要素がアクティブ化されているとき（通常はマウスボタンを押し続けているとき）に、その要素にスタイルを適用します。
.action-button {
background-color: blue;
}
.action-button:active {
background-color: darkblue;
}これにより、ユーザーのアクションが認識されているという視覚的なフィードバックが提供されます。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<title>Active Pseudo-class</title>
<style>
/* Write your CSS here */
</style>
</head>
<body>
<a href="#" class="special-link">Interactive Link</a>
</body>
</html>このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。