ホーム プログラミング言語 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 要素に向けると、さまざまな要素をポイントすると、それに応じてマウスのスタイルが変化することがわかります。

css cursor sample
css cursor sample

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

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

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

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

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

 

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

【CSS】マウスカーソルを乗せると枠線が伸び縮みするボタンサンプルを作ってみよう!
超!初心者のためのCSS講座【 マウスオーバーアクションを実装しよう!】疑似クラス:hover