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

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

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

擬似クラスとは何かを知りたい。
「:hover」擬似クラスの使い方を知りたい。
CSSでボタンを作ってみたい。

といった方に向けてこの記事では、

擬似クラスとは
「:hover」とは
「:hover」を使ったボタンの作り方

について解説していきます。

CSSの勉強を始めたばかりの方も、ぜひご覧ください！

この記事の目次

1 擬似クラスとは
2 「:hover」とは
3 aタグに使える擬似クラス
4 「:hover」でボタンを作ろう
5 ウェブサイト制作スキルで自由に働けるようになりたい人は
6 まとめ

擬似クラスとは

ではまずは擬似クラスとは何かについて見ていきましょう。

そもそも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とは？初心者向けの基礎知識と学習サイト5選

更新日 : 2021年3月1日

「: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>

実行結果（マウスホバー前）

実行結果（マウスホバー中）