CSSの「 cursor:pointer; 」が便利

 CSSで作ったボタンやform要素のlabel、ドロップダウンメニューなどは、デフォルトではカーソルの形が線のようになって見えにくくなってしまいます。

 そこでCSS要素に「 cursor:pointer; 」を設定することで、要素の上にマウスポインターが乗ると指の形に変わって見やすくなるので紹介したいと思います。

 

label要素に設定する

 このようにformのラベル要素に直接設定すると、例えばラジオボタンやチェックボックスなどのラベルがクリックできることがわかりやすくなって便利です。

label{cursor:pointer;}

CSSで作ったボタン要素

 CSSで「<span></span>」要素を使ってボタンを作る場合、デフォルトの状態ではボタンっぽいけどテキストを選択できてしまうなど少し作りがぎこちない感じがします。

 そこでSpan要素全体に「 cursor:pointer; 」を指定してあげることで、よりボタンらしい働きをしてくれます。

まとめ

 便利な「 cursor:pointer; 」を活用することでクリックできる場所をより明確に示すことができるようになります。

フォローする