CSSの擬似クラス「:hover」の使い方｜簡単にボタンを作ろう
この記事ではCSSの書き方について、特に「:hover」擬似クラスについて解説をしていきます！
「:hover」を使えるようになると、今までは普通のリンクだったボタンにも動きをつけられるようになります。
擬似クラスとは何かを知りたい。
「:hover」擬似クラスの使い方を知りたい。
CSSでボタンを作ってみたい。
「:hover」擬似クラスの使い方を知りたい。
CSSでボタンを作ってみたい。
といった方に向けてこの記事では、
- 擬似クラスとは
- 「:hover」とは
- 「:hover」を使ったボタンの作り方
について解説していきます。
CSSの勉強を始めたばかりの方も、ぜひご覧ください！
この記事の目次
擬似クラスとは
ではまずは擬似クラスとは何かについて見ていきましょう。
そもそもCSSにはスタイルを適用するための目印になるセレクタが必要になります。そのセレクタにはクラスやIDを使うことが出来ます。
<a class="link" href="#">This is link</a> <a id="link" href="#">This is link</a>
このような、classやidで指定された部分がセレクタで、タグで囲まれた部分（今回は「This is link」）が要素と呼ばれる部分になります。
そこで、疑似クラスとは何かについて考えてみましょう。
擬似クラスはすでにいくつか用意されているクラスで、要素が特定の状態になっているときだけ実行されるクラスになります。
CSSの基本についてをまずは知りたいという方は、ぜひこちらの記事をご覧ください。
HTMLとCSSの関係とは？基本的な書き方を4つのステップで理解しよう
更新日 : 2019年7月11日
「:hover」とは
「:hover」も擬似クラスの一つになります。
この「:hover」では要素の上にマウスのポインタを要素の上に置いたときに実行されるクラスです。
サイトの中で、要素にマウスポインタを重ねる必要があるものといえば、リンクですよね。
なので、リンクを作成するaタグと一緒に使われることが多い擬似クラスです。
この擬似クラスを使うことで、記事のURLに装飾を加えたり、クリックしたくなるようなボタンを作ることが出来ます。
aタグに使える擬似クラス
「:hover」の他にもaタグに適用できる代表的な擬似クラスは、
- :link（リンクのデフォルトの状態）
- :visited（すでにクリックされたリンクの状態）
- （:hover）（マウスのポインタをリンクに重ねた状態）
- :active（リンクをクリックしてからクリックし終わるまでの状態）
があります。
ちなみにCSSには順番も関係してくるので、上から順に「link→visited→hover→active」で書かなければ期待したようには動きません。
「:hover」でボタンを作ろう
「:hover」とその他の擬似クラスについてもある程度分かったところで、実際にCSSでボタンを作ってみましょう。CSSではセレクタに対してプロパティを適用し、形を作ったりデザインをしていきます。
それでは順を追って解説していきます！
枠と背景を作る
まずは枠と背景を作りましょう。
ここで重要になるプロパティは「border」と「color」になります。
それではコードを見ていきましょう。
button.html
<style>
.button {
color: #fff; /* 文字色を白にする */
background-color: #3a3a3a; /* 背景色をグレー（#3a3a3a）にする */
border: 2px solid #000; /* 要素の枠を2pxの太さで、線の種類をsolidに、色を黒にする */
text-decoration: none; /* リンクに出てくる下線を無効にする*/
}
</style>
<body>
<a class="button" href=#>Button</a>
</body>
実行結果
HTMLの中にstyleタグでCSSを直接書いています。まずはボタンの通常時に、文字色や背景色、枠などを扱うプロパティを追加しました。そのstyleタグの下のbodyタグには、CSSで装飾する元になる部分がありますね。
ちなみに「#」から始まる3桁や6桁の数字とアルファベットは、色を表しています。
また「/* */」で囲われた部分はコメントになるので実行時には影響しません。
では、今作ったボタンを「:hover」で装飾してみましょう。
「:hover」で動きをつける
先程のコードには「:hover」が含まれていませんでしたね。早速追加してみましょう。
こちらのコードをご覧ください。
button.html
<style>
.button {
color: #fff; /* 文字色を白にする */
background-color: #3a3a3a; /* 背景色をグレー（#3a3a3a）にする */
border: 2px solid #000; /* 要素の枠を2pxの太さで、線の種類をsolidに、色を黒にする */
text-decoration: none; /* リンクに出てくる下線を無効にする*/
}
.button:hover{
color: #000; /* 文字色を白にする */
background-color: #c9c9c9; /* 背景色をグレー（#c9c9c9）にする */
text-decoration: none; /* リンクに出てくる下線を無効にする*/
}
</style>
<body>
<a class="button" href=#>Button</a>
</body>
実行結果（マウスホバー前）
実行結果（マウスホバー中）
「.button:hover」から始まるブロックが追加されましたね。
ここに書いたコードが、マウスのポインタをリンクの上に乗せたときに実行されるようになっています。
このコードは非常に簡潔なコードですが、色の組み合わせを変えたり、borderの内側のスペース（padding）と外側のスペース（margin）を調整することでとても見栄えの良いボタンが出来ますよ。
ウェブサイト制作スキルで自由に働けるようになりたい人は
CSS、HTMLはウェブサイトを製作する上で最も基本的な要素なので、最低限身につけておきたい言語ではあります。ただ、よりクオリティの高いWEBサイトを作成したり、高単価の案件などを獲得していきたいと考えた場合、他のプログラミング言語も一緒に身に付ける事をオススメします。
例えば動きをつけたWEBサイトを作るならJavaScriptやPHPを学ぶといいですし、画像編集などはPhotoshopを覚えたりするとグッとクオリティが上がり、仕事獲得にも繋げやすくなります。
もっとCSSとセットで学ぶオススメ言語を知りたい！という人は、まず「プログラミング言語無料診断」を使ってみてください。あなたにぴったりのプログラミング言語を無料で診断することができます。
また、フリーランスとして仕事を獲得していく事も視野に入れている人は、プログラミングスクールを利用する事も検討するといいでしょう。
弊社侍エンジニアでは、あなただけのフルオーダーメイド学習カリキュラムを作成し、現役エンジニアがマンツーマンでレッスン致します。更に、フリーランスとして仕事を獲得するサポートもさせて頂いています。
その結果、弊社を受講している間にクラウドソーシングからお仕事を受注して授業中で納品まで行い、エンジニアデビューをした方もいらっしゃいます。
「知識だけでは仕事に繋がらなかった」38歳接客業からフリーランスデビューできた理由
更新日 : 2019年11月5日
少しでも興味を持った方は、まずはお気軽に弊社の無料体験レッスンを利用してみてください。
入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンライン利用もできますので、是非お試しください！
まとめ
この記事ではCSSの簡単な基本から「:hover」の使い所、さらにボタンの簡単な作り方を解説してきました。
擬似クラスついてはなんとなく分かって頂けたでしょうか？擬似クラスは他にもたくさん用意されていて、それぞれで使い所も変わってきます。
また今回のコードで解説したプロパティについてもぜひ調べてみて、使ってみてください！
