スライドショースライドショー

CSSの擬似クラス「:hover」の使い方|簡単にボタンを作ろう

この記事ではCSSの書き方について、特に「:hover」擬似クラスについて解説をしていきます!

「:hover」を使えるようになると、今までは普通のリンクだったボタンにも動きをつけられるようになります。

擬似クラスとは何かを知りたい。
「: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の基本についてをまずは知りたいという方は、ぜひこちらの記事をご覧ください。

「: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」の使い所、さらにボタンの簡単な作り方を解説してきました。

擬似クラスついてはなんとなく分かって頂けたでしょうか?擬似クラスは他にもたくさん用意されていて、それぞれで使い所も変わってきます。

また今回のコードで解説したプロパティについてもぜひ調べてみて、使ってみてください!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ryo

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説