【プログラミング】CSSのfocus、hover使えるとサイトがリッチに!使用方法を解説

focus、hoverの仕方の記事になります。

スポンサーリンク

目次

hoverの仕方

まずhoverというのはマウスが上に乗った際にその箇所の色、大きさを変化させることが出来ます。

例えば、ボタンを押す際にボタンの上にカーソルが乗ると色が変わります。以下のボタンにマウスカーソルを合してみてください。

ボタンの色が変わる例

コード

早速コードを以下に記述しました!

buttonに対して大きさや色の指定をします。

次にhoverした時にどのような色へ変更したいか指定します!

hoverの前から変更がない項目、この例では大きさと角丸は改めて大きさを指定する必要はありません。

HTML <button>ボタン</button>
CSS button{
background-color: #98C4FF;
color: #fff;
width: 10rem;
height: 3rem;
border-radius: 1.5rem;
border:1px solid #98C4FF;
margin-left: 2rem;
}
button:hover{
background-color: skyblue;
}
button:hover

background-color: skyblue;のようにマウスカーソルが対象に触れた際に変えたい箇所のみCSSを記述します。

ですので上記のように背景色のみ変えたい場合は背景色のことのみ記述します。

スポンサーリンク

focusの仕方

次にfocusについて

focusもhoverとコードの書き方は変わりありません。

focusはクリックされたときに色や大きさなどを変化させることができます。

早速ですが、以下のボタンをクリックしてみてください。

focusの例

コード

以下にコードを記述しています。

hoverの時と同じでクリックされた際に変更したい箇所だけをfocusで指定をします。

HTML <button>ボタン</button>
CSS button{
background-color: blue;
color: #fff;
width: 10rem;
height: 3rem;
border-radius: 1.5rem;
border:1px solid #98C4FF;
margin-left: 2rem;
}

button:hover{
background-color: skyblue;
}

button:focus{
background-color: #F7E4EB;
}

focusとhoverどちらも記述の仕方に違いがなく簡単ですね。

focusできないときに確認すべきこと

focusとhoverどちらも簡単ですが、focusはfocusと書くだけでできるものとそうでないものがあるので気を付けましょう!

focusで使えるものを以下にまとめました。

<a>
<input>
<select>
<details>
<textarea>
<button>

これらの項目に対しては何も考えずfocusを使用できます。

そのほかもfocusを使いたい!!って時もありますよね?例えばテーブルの行を選択した時とか!

その際は、tabindex="0"を付けましょう!!

以下の表の行をクリックしてみてください。

野菜ニンジンレタス
果物いちごバナナ
シャケマグロ

野菜の行にだけtabindexをつけています。つけていない果物、魚の行はクリックしても色は変化してくれません!

コード

コードを以下に記述します。

HTML <table border=1>
<tbody>
<tr tabindex="0">
<td>野菜</td>
<td>ニンジン</td>
<td>レタス</td>
<tr>
<tr>
<td>果物</td>
<td>いちご</td>
<td>バナナ</td>
<tr>
<tr>
<td>魚</td>
<td>シャケ</td>
<td>マグロ</td>
<tr>
<tbody>
</table>
CSS table tr:focus{
background-color: #FFEEFF;
}

フォーカスしたけどできないときはtabindexを試してみてくださいね!!

スポンサーリンク

最後に

この度はご覧いただきありがとうございました。

少しでもお役に立てていれば嬉しいです。

HTML、CSSを学ぶのにおすすめの本

HTML、CSSを学ぶ上で大変有名な本です。

初心者さんには本当におすすめの本です。

おすすめ記事

スポンサーリンク


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA