【初心者向け】CSSのactiveの使い方を丁寧に解説
「webサイトのボタンにカーソルを合わせてクリックしたときのデザインを付けてみたい」
こう思う方も多いのではないでしょうか。
本記事をお読みいただくと以下が分かります。
- cssでactiveの使い方が分かる
基本的なことなのにやり方が分からず、ストレスが溜まる経験は誰しもあると思います。是非本記事をお読みいただき、理解を深めてください。
＼プログラミングスクールを比較／
|
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の使い方を見ていきましょう。
cssのactiveの使い方
サンプルコードを見た方が分かりやすいと思うので、コードの紹介です。
HTML
<button>送信</button>
上記のように、まずHTMLで送信用のボタンを設置します。当然、このままではボタンをクリックした時に特に何の変化もありません。そこで、次のようにCSSで設定していきましょう。
CSS
button:active{
background-color: blue;
}
“active”を書き、その中にクリックした時に付けたいデザイン（今回は背景色を青色にする）を設定します。これだけで、送信ボタンをクリックした時に青く色が付くようになります。
まとめ
いかがでしたでしょうか。非常にシンプルにコードが書けることがお分かりいただけたと思います。是非本記事を通じてwebサイトのデザイン設計を深めてみてください。
