【プログラミング】CSSのfocus、hover使えるとサイトがリッチに！使用方法を解説
むっちゃん
focus、hoverの仕方の記事になります。
スポンサーリンク目次
hoverの仕方
まずhoverというのはマウスが上に乗った際にその箇所の色、大きさを変化させることが出来ます。
例えば、ボタンを押す際にボタンの上にカーソルが乗ると色が変わります。以下のボタンにマウスカーソルを合してみてください。
ボタンの色が変わる例
コード
早速コードを以下に記述しました！
buttonに対して大きさや色の指定をします。
次にhoverした時にどのような色へ変更したいか指定します！
hoverの前から変更がない項目、この例では大きさと角丸は改めて大きさを指定する必要はありません。
<button>ボタン</button>
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で指定をします。
<button>ボタン</button>
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をつけています。つけていない果物、魚の行はクリックしても色は変化してくれません！
コード
コードを以下に記述します。
<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>
table tr:focus{
background-color: #FFEEFF;
}
フォーカスしたけどできないときはtabindexを試してみてくださいね！！
スポンサーリンク最後に
この度はご覧いただきありがとうございました。
少しでもお役に立てていれば嬉しいです。
HTML、CSSを学ぶのにおすすめの本
HTML、CSSを学ぶ上で大変有名な本です。
初心者さんには本当におすすめの本です。
 | 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ] 価格:2486円 |
 | ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 [ Mana ] 価格:2728円 |
