【初心者向け】CSSのactiveの使い方を丁寧に解説

2024.01.03

「webサイトのボタンにカーソルを合わせてクリックしたときのデザインを付けてみたい」

こう思う方も多いのではないでしょうか。

本記事をお読みいただくと以下が分かります。

基本的なことなのにやり方が分からず、ストレスが溜まる経験は誰しもあると思います。是非本記事をお読みいただき、理解を深めてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

cssのactiveとは

activeを使うことで、その名の通り「動作がactive（＝動いている）」な時のデザインを設定することができます。

本記事の冒頭で紹介したような、「ボタンをクリックした時のデザイン設定」等に使います。それでは、早速cssのactiveの使い方を見ていきましょう。

サンプルコードを見た方が分かりやすいと思うので、コードの紹介です。

HTML

<button>送信</button>

上記のように、まずHTMLで送信用のボタンを設置します。当然、このままではボタンをクリックした時に特に何の変化もありません。そこで、次のようにCSSで設定していきましょう。

CSS

button:active{
background-color: blue;
}

“active”を書き、その中にクリックした時に付けたいデザイン（今回は背景色を青色にする）を設定します。これだけで、送信ボタンをクリックした時に青く色が付くようになります。

いかがでしたでしょうか。非常にシンプルにコードが書けることがお分かりいただけたと思います。是非本記事を通じてwebサイトのデザイン設計を深めてみてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

2024.01.03

2024.01.11

2024.01.29

2024.01.03

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする