お問い合わせ

    氏名

    メールアドレス

    件名

    メッセージ本文



    763万 キーワード

    2021年 検索パフォーマンス

    57.8万 人が訪問

    2021年 訪問ユーザー数

    WordPressのスキルアップはこちら!▶[click]
    いま、どうしてる? 誰でも検索できます

    【CSS】マウスカーソルの形状を変える方法「cursor」プロパティ

    CSS(シーエスエス)
    この記事は約3分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    例えばdivでボタンっぽい形状を作った時にリンクが貼られていないと(例えばクリックイベントなどで)ボタンが通常の三角形のマウス形状のままになってクリックできるのだろうか?と一瞬違和感を感じてしまう可能性があります。

    ボタンをクリックであれば、やはり「指アイコン」にしておいた方が直感的に分かりやすいかと思いますので、その方法です。

    マウスカーソルをポインターに変えるには?

    CSSでマウスカーソルの形状を変えるにはcursorプロパティを使います。

    cursor - CSS: カスケーディングスタイルシート | MDN
    cursor は CSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。

    使い方は簡単で、cursor: 値;を設定するだけです。

    cursor: 値;

    これで、マウスカーソルを様々な形状に変更できます。

    「指のアイコン」はcursor: pointer;

    一般的なクリックを促す指のアイコンは「cursor: pointer;」で表示できます。

    cursor: pointer;

    カーソルがポインターに変わりました!

    これで話は終わりですが、ついでに他の形状も試してみます。

    cursor: help;

    ヘルプマークに変わります。マウスの下に「?」マークが付きます。ヘルプページなどに使えそうなカーソルです。

    cursor: help;

    cursor: wait;

    マウスを合わせると、ポインターがグルグル回り続けます。何かを待ってもらうときなどに使えそうです。目的を持って使わないとユーザーさんがすこぶる待った結果、永遠に待ち続けてしまうことになってしまうので、使いどころには注意が必要です。

    cursor: wait;

    cursor: crosshair;

    カーソルが十字架のアイコンになります。カーソルが範囲を選択できそうな感じになります。なにか範囲を選択できるのかな?と思われてしまうのでボタンには使わないほうがよいですね。

    cursor: crosshair;

    cursor: not-allowed;

    許可しない(進入禁止)のアイコンになります。押せないのに押せるという不思議な状態になるので、クリックできるところには使わないほうが良さそうです。

    cursor: not-allowed;

    cursor: zoom-in;

    「zoom-in」にすると、虫眼鏡のアイコンに変わります。拡大できそうなイメージになります。

    cursor: zoom-in;

    cursor: grab;

    「grab」にすると、マウスカーソルがつかめる形状に変わります。ボタンがつかめそうですね。

    cursor: grab;

    まとめ

    マウスカーソルをポインターの形状に変えたいときは「cursor: pointer;」で可能です。ほかにも様々な形状に変更することが可能です。

    御参考ください😃

    Loading
    タイトルとURLをコピーしました