ホームプログラミング言語 Web関連 css3 CSS カーソル (マウススタイル)

CSS カーソル (マウススタイル)

Web をブラウジングする過程で、マウスをいくつかの要素に移動すると、それに応じてマウスのスタイルが変化します。たとえば、マウスがテキストをポイントすると、マウスのスタイルは大文字のIのようになります。マウスが指すと連動すると、マウスが小さな手の形などに変化します。

これらのデフォルトの変更に加えて、CSS のカーソルプロパティを使用して、Web ページ内のマウス (カーソル) のスタイルを変更することもできます. 次の表に、カーソルプロパティのオプションの値を示します:

属性値	回路図	説明
auto		デフォルト値。ブラウザは、現在のコンテキストに従って表示するカーソルスタイルを決定します。
default		デフォルトのカーソル、コンテキストに関係なく、通常は矢印
none		カーソルを表示しない
initial		このプロパティをデフォルト値に設定します
inherit		親要素の base cursor 属性の値から
context-menu		コンテキストメニューが使用可能であることを示します
help		役に立つと言った
point		リンクを表す
progress		プログラムが何らかの処理を実行しているが、このインターフェースでまだいくつかの操作を実行できることを示す進行標識 (待機とは異なります)
wait		プログラムがビジーであり、プログラムが完了するまで待つ必要があることを示します
cell		セル (またはセルのグループ) を選択できることを示します
crosshair		シンプルな十字線
text		選択可能なテキストを表します
vertical-text		選択可能な縦書きテキストを表します
alias		エイリアスまたはショートカットを作成することを示します
copy		何かをコピーできることを示します
move		マウスの下のオブジェクトを移動できることを示します
no-drop		ドラッグされたアイテムを現在の場所に配置できないことを示します
no-allowed		何かができないことを表現する
all-scroll		オブジェクトを任意の方向にスクロール (移動) できることを示します
col-resize		列が水平方向にサイズ変更できることを示します
row-resize		行が垂直方向にサイズ変更できることを示します
n-resize		オブジェクトの端が上 (北) に移動できることを示します
e-resize		オブジェクトの端を右 (東) に移動できることを示します。
s-resize		オブジェクトの端を下 (南) に移動できることを示します
w-resize		オブジェクトの端を左 (西) に移動できることを示します
ne-resize		オブジェクトの端が右上 (北/東) に移動できることを示します。
nw-resize		オブジェクトの端が上および左 (北/西) に移動できることを示します。
se-resize		オブジェクトの端を下および右 (南/東) に移動できることを示します。
sw-resize		オブジェクトの端を下および左 (南/西) に移動できることを示します。
ew-resize		オブジェクトのサイズを両方向に変更できるカーソルを表します
ns-resize
nesw-resize
nwse-resize
zoom-in		何かを拡大できることを示します
zoom-out		絞り込むことができることを示します
grab		何かをつかむ（ドラッグする）ことができることを示します
grabbing		何かがつかまれたことを示します
URL(“”)		カーソルのスタイルをカスタマイズします。括弧内の内容は、カーソルイメージのソースファイルパスです。

ヒント: コンピューターシステムが異なるため、マウスのスタイルにはいくつかの違いがあります。

[例] cursor 属性を使用して、Web ページ内のカーソルのスタイルを設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            height: 30px;
            border: 1px solid green;
            margin-top: 10px;
        }
        .cell {
            cursor: cell;
        }
        .crosshair {
            cursor: crosshair;
        }
        .text {
            cursor: text;
        }
        .vertical-text {
            cursor: vertical-text;
        }
        .alias {
            cursor: alias;
        }
        .copy {
            cursor: copy;
        }
        .move {
            cursor: move;
        }
        .no-drop {
            cursor: no-drop;
        }
    </style>
</head>
<body>
    <div class="cell">cursor: cell;</div>
    <div class="crosshair">cursor: crosshair;</div>
    <div class="text">cursor: text;</div>
    <div class="vertical-text">cursor: vertical-text;</div>
    <div class="alias">cursor: alias;</div>
    <div class="copy">cursor: copy;</div>
    <div class="move">cursor: move;</div>
    <div class="no-drop">cursor: no-drop;</div>
</body>
</html>

上記のコードを実行し、マウスをさまざまな HTML 要素に向けると、さまざまな要素をポイントすると、それに応じてマウスのスタイルが変化することがわかります。

コンテンツ 表示

カスタムカーソルスタイル

上の表で説明されているカーソルスタイルを使用するだけでなく、画像ファイルを使用して、次のようにカーソルスタイルをカスタマイズすることもできます。

cursor: url(“custom.gif”), url(“custom.cur”), default;

各 url() はカンマで区切られています,上記の例では、custom.gif と custom.cur はカスタムカーソルファイルです.カーソルスタイルをカスタマイズする場合、url() で定義されたカーソルイメージリソースの無効化を防ぐために、上記の表の一般的なカーソルスタイルを最後に定義する必要があることに注意してください。

ヒント: .cur 形式はカーソルファイルの標準形式です。いくつかのオンラインツール ( https://convertio.coなど) を使用して、.jpg、.gif などの画像ファイルを変換できます。 .cur フォーマットにフォーマットします。

「 CSS カーソル (マウススタイル)」についてわかりやすく解説！絶対に観るべきベスト2動画

【CSS】マウスカーソルを乗せると枠線が伸び縮みするボタンサンプルを作ってみよう！

https://www.youtube.com/shorts/TZGA8IZeUk4

【CSS】マウスカーソルを乗せると枠線が伸び縮みするボタンサンプルを作ってみよう！ (https://www.youtube.com/shorts/TZGA8IZeUk4)

超！初心者のためのCSS講座【マウスオーバーアクションを実装しよう！】疑似クラス:hover

https://www.youtube.com/watch?v=B7eUDwjZVGo&pp=ygUwIENTUyDjgqvjg7zjgr3jg6sgKOODnuOCpuOCuSDjgrnjgr_jgqTjg6spJmhsPUpB

超！初心者のためのCSS講座【マウスオーバーアクションを実装しよう！】疑似クラス:hover (https://www.youtube.com/watch?v=B7eUDwjZVGo&pp=ygUwIENTUyDjgqvjg7zjgr3jg6sgKOODnuOCpuOCuSDjgrnjgr_jgqTjg6spJmhsPUpB)