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

CSSの:active擬似クラスとは？クリック時のスタイル指定を実例付きで解説

Webサイトをデザインしていると、ユーザーが要素を操作（アクティブ化）した瞬間にだけ、特定のスタイルを適用したいケースがあります。たとえば、「ボタンやリンクがクリックされたときに色を変えたい」といった場面です。

そんなときに役立つのが、CSSの:active擬似クラスです。:active擬似クラスを使うことで、ユーザーによってアクティブ化されている要素を選択し、そこへ任意のスタイルを適用できます。

この記事では、CSS擬似クラスの基礎知識から、:active擬似クラスの具体的な使い方まで、実際のコード例を交えながら詳しく解説します。読み終える頃には、:active擬似クラスを自信を持って使いこなせるようになっているはずです。

CSS擬似クラスとは

CSSでは「セレクタ」を使って、スタイルを適用する対象となる要素を選択します。たとえば、セレクタでWebページ内のすべての<h1>タグや<select>タグを指定すれば、それらの要素に対して一括でスタイルが適用されます。

しかし、Webサイトのスタイリングでは、「ユーザーにクリックされたとき」「マウスカーソルが乗ったとき」など、要素がある特別な状態になった場合にのみスタイルを適用したいことがよくあります。こうしたニーズに応えてくれるのが擬似クラスです。

擬似クラスとは、セレクタに追加するキーワードのことで、特定の状態にある要素だけを選択できるようにするものです。本記事では、その中でも:active擬似クラスに焦点を当てて解説していきます。

CSSの:active擬似クラスとは

:active擬似クラスは、ユーザーによってアクティブ化されている要素を選択するためのものです。CSSにおける「アクティブ化」とは、ユーザーがマウスボタンを押し下げて要素をクリックしている状態を指します。

:active擬似クラスは、一般的に<a>タグや<button>要素と組み合わせて使われます。たとえば、リンクがクリックされた瞬間に文字色を赤に変えたり、ボタンが押されたときに背景色を薄い青に変更したりすることが可能です。

なお、ユーザーがクリックをやめると、その要素はもはや「アクティブ」ではなくなるため、:activeセレクタによる選択対象外となります。つまり、クリックしている間だけスタイルが適用される仕組みです。

CSS :activeの使用例

ここからは、2つの具体例をもとに、:active擬似クラスの使い方を見ていきましょう。

例1：リンクに:activeを使う

ある地域のカードゲームクラブ「Wizards of the Boards」のWebサイトを制作しているとします。このサイトには、クラブのメンバーがプレイしているカードゲームの一覧ページへのリンクを含む「About」ページが必要です。

要件は次のとおりです。デフォルトではリンクは薄い青色で表示し、リンクがクリックされた瞬間に文字色をオレンジに変えます。これを実現するために、:active擬似クラスを使用します。以下がそのコードです。

<html>
<p>Wizards of the Boardsは、ペンシルベニア州フィラデルフィアを拠点とするカードゲームクラブです。2004年にMichael JohnsonとGabriella Patelによって設立され、あらゆるカードゲームのプレイヤーを歓迎しています。クラブは毎週月曜日と金曜日に集まり、最新のカードゲーム情報について話し合ったり、お気に入りのゲームで対戦したりしています。
Wizards of the Boardsでプレイしているゲームの詳細については、<a href="/games.html">こちらをクリック</a>してください。</p>
</html>

<style>

a {
	color: lightblue;
}

a:active {
	color: orange;
}
</style>

コードエディター上で「実行」ボタンをクリックすると、HTML/CSSの出力結果を確認できます。

このコードの内容を分解して見てみましょう。まずHTMLファイルでは、<p>タグを使ってクラブの歴史を紹介する段落を定義しています。この<p>タグの中には、「games.html」ページへリンクする<a>タグがあり、ユーザーが「こちらをクリック」というテキストをクリックすることでリンクが作動します。

CSS側では、2つのスタイルルールを定義しています。1つ目は、すべての<a>タグの文字色を薄い青（lightblue）に設定するルールです。2つ目は、:activeセレクタを使って、アクティブ状態にある<a>タグの文字色をオレンジに変更するルールです。つまり、このルールにより、ユーザーがリンクをクリックしている間だけ色が変わる仕組みになっています。

例2：ボタンに:activeを使う

続いて、Wizards of the Boardsクラブへの参加希望を受け付けるフォームを作成している場面を想定します。フォームの最後には、「Submit Your Interest（参加意思を送信）」というテキストが入ったボタンを配置したいところです。

このボタンには、クリックされたときに幅3pxのオレンジ色の枠線が表示されるようにします。以下のコードでこのボタンを作成できます。

<html>

<button>Submit Your Interest</button>

</html>

<style>

button:active {
	border: 3px solid orange;
}
</style>

コードエディター上で「実行」ボタンをクリックすると、出力結果を確認できます。

コードを詳しく見てみましょう。HTMLファイルでは、<button>タグを使ってボタンを定義しており、このボタンには「Submit Your Interest」というテキストが含まれています。

CSSスタイルシート側では、<button>タグがユーザーによってアクティブ化されたときに適用されるルールを1つ定義しています。このルールは、ボタンの周囲に幅3pxの実線（solid）の枠線を作成するものです。:activeセレクタを使用することで、ボタンがアクティブな状態のときにのみこのルールが適用されます。

そのため、ボタンをクリックするとオレンジ色の枠線が現れ、クリックをやめた瞬間に枠線は消えます。

まとめ

CSSの:active擬似クラスを使うと、要素が「アクティブ」状態にあるときにその要素を選択し、任意のスタイルを適用できます。

:active擬似クラスは、<a>タグや<button>タグと組み合わせて使われることが多く、リンクやボタンがクリックされた瞬間に発動する視覚効果を作るのに便利です。

この記事では、CSS擬似クラスの基礎と、:active擬似クラスの使い方について解説しました。これであなたも、:active擬似クラスをプロのように活用するための知識を身につけたはずです。ぜひ実際のコーディングに取り入れてみてください。

  1. CSSの:targetセレクターでアクティブなHTMLアンカーをハイライト表示する方法

    CSSで現在アクティブなHTMLアンカー（リンク先の要素）をハイライト表示したい場合は、:targetセレクターを使用します。 :targetセレクターとは :targetは、URLのフラグメント識別子（#以降の部分）と一致するIDを持つ要素に対してスタイルを適用できる擬似クラスです。ページ内リンクがクリックされると、そのリンク先の要素が「ターゲット」となり、指定したスタイルが自動的に反映されます。JavaScriptを使わずに、クリック操作に応じた視覚的なフィードバックを実現できるのが大きな特徴です。 実装例 以下のコードを実行して、:targetセレクターの実際の動作を確認してみましょう。

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

    疑似クラス（Pseudo class）とは、要素やCSSセレクターが持つ特定の「状態」を表現するための仕組みです。その中でも:active疑似クラスは、要素がアクティブな状態、つまりユーザーがマウスボタンを押してクリックしている瞬間を検出し、スタイルを適用するために使われます。 この疑似クラスは、リンクやボタンなど、クリック操作を受け付ける要素と組み合わせて使用されるのが一般的です。例えばリンクに適用すれば、そのリンクが押されている間だけ指定したスタイルが反映され、指を離すと元の状態に戻ります。 :activeの基本構文 a:active { color: green; } セレクターの