【CSS】cursor一覧とinputでの使い方マンガでわかるホームページ作成ホームへ【CSS】cursor一覧とinputでの使い方2021年11月02日inputのラジオボタンやlabelはマウスを乗せても指のアイコンになりません。クリックできることがわかるようにアイコンを変えたいですね。CSSのcursorは特定の範囲内に乗ったマウスカーソルのアイコンを変更することができます。cursorで指定できるアイコンは多数用意されています。cursor一覧とラジオボタンなどのinputやlabelでの使い方を紹介します。「cursor:○○」と指定します。○○にあたる値と実際のアイコンの一覧は下記のとおりです。grabbingIE不可カーソルのアイコンはブラウザやバージョンによって異なる場合があります。Chrome、Edge、Firefoxは同じです。IE11はマークが異なったり使えないものがあります。「resize」シリーズは3つ同じマークになっています。(昔は違ったのかもしれません。)CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。いうかサイト作成においてpointer以外のcursorはほぼ使いません。pointerは人差し指のアイコンであり、クリックできることを示すことができます。aタグは標準でこのアイコンになりますが、label、input、buttonタグなどはこのアイコンにはならないためCSSで指定する必要があります。pointer」を指定した例です。<label>選択肢</label>カーソルを乗せたときに動作するので「:hover」が必要に思いがちですが、実はいりません。これでもいいのですが、クリック範囲が非常に狭く押しづらいですね。一工夫してラベルもクリックできるようにしましょう。for="example3">選択肢</label>idとforでinputとlabelを結びlabelを押してもinputが反応するようしました。pointer」を指定しクリックできることを示しました。inputとlabelの間の隙間はクリックできません。ここもクリックできるようにしましょう。選択肢</label>ラベルとinputと隙間をlabelで囲んでしまいます。するとlabel内のどこをクリックしてもinputが反応します。おまけにidとforで結ぶ手間もなくなります。pointer」を指定してクリックできることを示しています。pointer」を指定する必要があります。一手間かけてクリック範囲を広げましょう。inline-block」を指定しpaddingが効くようにしてからpaddingを指定してクリック範囲を広げています。マウスの変化だけではなく、さらにlabelのhover時に下線が表示されるようにしました。このときスペースにも下線が引かれてしまうためmarginの隙間に変更しています。このようにしてクリックしやすく、視覚的にもクリックできることを示すようにしましょう。cursorの注意点(スマホでは効かない)cursorはマウスのアイコンを変更できます。スマホやタブレットなどマウスカーソルがない端末では当然無意味です。「マウスカーソルを乗せればクリックできるかどうかわかる」と思ってはいけません。クリックできるものは見た目だけで「クリックできそう」と判断できるようにしましょう。逆にクリックできないものを「クリックできそう」と勘違いさせないことも重要です。いうかpointerしか使わない。hoverは不要で、マウスを乗せたとき変化させたい箇所に指定する。スマホのことを考え、見ただけでクリックできそうに見せることが重要。以上、cursor一覧とinputでの使い方でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。