CSS cursor| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

cursor CSS プロパティとは

トピック:ポインタが要素の上に置かれたときに表示されるカーソルのタイプを指定する、事ができる

プロパティ cursor

    基本 書式:セレクタ {cursor:値;}

実例 コード 1

サンプル コードを試す
     .alias {cursor: alias;}
    .all-scroll {cursor: all-scroll;}
    .auto {cursor: auto;}
    .cell {cursor: cell;}
    .context-menu {cursor: context-menu;}
    .col-resize {cursor: col-resize;}
    .copy {cursor: copy;}
    .crosshair {cursor: crosshair;}
    .default {cursor: default;}
    .e-resize {cursor: e-resize;}
    .ew-resize {cursor: ew-resize;}
    .grab {cursor: grab;}
    .grabbing {cursor: grabbing;}
    .help {cursor: help;}
    .move {cursor: move;}
    .n-resize {cursor: n-resize;}
    .ne-resize {cursor: ne-resize;}
    .nesw-resize {cursor: nesw-resize;}
    .ns-resize {cursor: ns-resize;}
    .nw-resize {cursor: nw-resize;}
    .nwse-resize {cursor: nwse-resize;}
    .no-drop {cursor: no-drop;}
    .none {cursor: none;}
    .not-allowed {cursor: not-allowed;}
    .pointer {cursor: pointer;}
    .progress {cursor: progress;}
    .row-resize {cursor: row-resize;}
    .s-resize {cursor: s-resize;}
    .se-resize {cursor: se-resize;}
    .sw-resize {cursor: sw-resize;}
    .text {cursor: text;}
    .url {cursor: url("webref.jpg"),auto;}
    .w-resize {cursor: w-resize;}
    .wait {cursor: wait;}
    .zoom-in {cursor: zoom-in;}
    .zoom-out {cursor: zoom-out;}

プロパティ 定義と使用法

デフォルト値・初期値 :auto
適用対象 :全要素
継承 :継承する
メディア :以下の一括指定の各プロパティとして
指定されているが、計算値 :urlは絶対値
CSS Version CSS2 ~
アニメーションの種類 :個別 アニメーション可能なプロパティ 一覧
JavaScript 構文 object.style.cursor="funWebref"
正規順序 :形式文法で定義される一意のあいまいでない順序
CSSの構文cursor: |auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|grab|grabbing|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|initial|inherit
    各、CSS キーワード 値 又は 説明の上にマウスを当てると、各項目の実際の表示を確認できます。
カテゴリCSS キーワード 値説明
一般autoコンテキストに基づき表示するカーソルをブラウザーが決定します例えば、テキストにマウスオーバーした時には text キーワードを指定した場合と同様です
default特別な動作を行いませんふつうは矢印です
noneカーソルを表示しない
リンク及び状態context-menuコンテキストメニューが利用できることを示す
helpヘルプが使用可能であることを示す
pointer要素に対してクリックの操作ができることを示す 例えばリンクの上に乗ったときなどに使われる
progressバックグラウンドでプログラムがビジー状態dが、 (wait とは異なり) ユーザーがインターフェイスを操作可能であることを示す
waitプログラムがビジー状態で、 (progress とは異なり) ユーザーによる操作が不可能である状態を示す
選択cellセルが選択できることを示す
crosshair十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます
textテキストを選択可能であることを示す 通常、 I ビームが表示される
vertical-text縦書きのテキストを選択可能であることを示す 通常、水平の I ビームが表示される
ドラッグ&ドロップaliasエイリアスやショートカットが作成されることを示す
copy何かがコピーできることを示す
move何かが移動できることを示す
no-drop現在の位置にアイテムがドロップできないことを示す
Windows 及び Mac OS X では、 no-dropnot-allowed と同じ
not-allowed何かが操作できないことを示す
grab何かがグラブ (異動のためにドラッグ) することができることを示す
grabbing
サイズ変更&スクロールall-scroll何かが任意の方向にスクロール (パン) 可能であることを示す
Windows では、 all-scrollmove 同じ
col-resizeアイテムや列が水平方向にサイズ変更可能であることを示す 通常、左右を指す矢印とそれを仕切る垂直線が表示される
row-resizeアイテムや行が垂直方向にサイズ変更可能であることを示す 通常、上下を指す矢印とそれを仕切る水平線が表示される
n-resize辺が移動できることを表します例えば、 se-resize のカーソルはボックスの南東 (south-east) の角から移動を開始した時に使われる
環境によっては、等価の双方向のサイズ変更カーソルが表示される 例えば、 n-resize 及び s-resizens-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

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
cursorChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯4フルサポート◯7フルサポート◯1.2
autoフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯4フルサポート◯7フルサポート◯1.2
defaultフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯4フルサポート◯7フルサポート◯1.2
inheritフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯8フルサポート◯9フルサポート◯1.2
noneフルサポート◯5フルサポート◯12フルサポート◯3フルサポート◯9フルサポート◯15フルサポート◯5
context-menuフルサポート◯1フルサポート◯12フルサポート◯1.5フルサポート◯10フルサポート◯10.6フルサポート◯3
helpフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯4フルサポート◯7フルサポート◯1.2
pointerフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯6フルサポート◯7フルサポート◯1.2
progressフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯6フルサポート◯7フルサポート◯1.2
waitフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯4フルサポート◯7フルサポート◯1.2
cellフルサポート◯1フルサポート◯12フルサポート◯1.5フルサポート◯10フルサポート◯10.6フルサポート◯3
crosshairフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯4フルサポート◯7フルサポート◯1.2
textフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯4フルサポート◯7フルサポート◯1.2
vertical-textフルサポート◯1フルサポート◯12フルサポート◯1.5サポートなしフルサポート◯10.6フルサポート◯3
aliasフルサポート◯1フルサポート◯12フルサポート◯1.5フルサポート◯10フルサポート◯10.6フルサポート◯3
copyフルサポート◯1フルサポート◯12フルサポート◯1.5フルサポート◯10フルサポート◯10.6フルサポート◯3
moveフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯4フルサポート◯7フルサポート◯1.2
no-dropフルサポート◯1フルサポート◯12フルサポート◯1.5フルサポート◯6フルサポート◯10.6フルサポート◯3
not-allowedフルサポート◯1フルサポート◯12フルサポート◯1.5フルサポート◯6フルサポート◯10.6フルサポート◯3
all-scrollフルサポート◯1フルサポート◯12フルサポート◯1.5フルサポート◯6フルサポート◯10.6フルサポート◯3
col-resizeフルサポート◯1フルサポート◯12フルサポート◯1.5フルサポート◯6フルサポート◯10.6フルサポート◯3
row-resizeフルサポート◯1フルサポート◯12フルサポート◯1.5フルサポート◯6フルサポート◯10.6フルサポート◯3
単方向リサイズカーソル (n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize,sw-resize)フルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯4フルサポート◯7フルサポート◯1.2
双方向サイズ変更カーソル (ew-resize, nesw-resize, ns-resize,nwse-resize)フルサポート◯1フルサポート◯12フルサポート◯1.5フルサポート◯10フルサポート◯10.6フルサポート◯3
ズームカーソル (zoom-in,zoom-out)フルサポート◯37フルサポート◯12フルサポート◯24サポートなしフルサポート◯24フルサポート◯9
つかむカーソル (grab,grabbing)フルサポート◯1フルサポート◯14フルサポート◯27サポートなしフルサポート◯ありフルサポート◯4
url()フルサポート◯1フルサポート◯12フルサポート◯1.5フルサポート◯6 不明フルサポート◯3
url() positioning 構文 フルサポート◯ありサポートなしフルサポート◯ありサポートなし 不明フルサポート◯あり

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
cursorAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
autoサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
defaultサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
inheritサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
noneサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
context-menuサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
helpサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
pointerサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
progressサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
waitサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
cellサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
crosshairサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
textサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
vertical-textサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
aliasサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
copyサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
moveサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
no-dropサポートなし 不明フルサポート◯あり 不明 不明 不明 不明
not-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, nesw-resize, ns-resize,nwse-resize)サポートなし 不明フルサポート◯あり 不明 不明 不明 不明
ズームカーソル (zoom-in,zoom-out)サポートなし 不明フルサポート◯あり 不明 不明 不明 不明
つかむカーソル (grab,grabbing)サポートなし 不明フルサポート◯あり 不明 不明 不明 不明
url()サポートなし 不明フルサポート◯あり 不明 不明 不明 不明
url() positioning 構文 サポートなし 不明サポートなし 不明 不明 不明 不明
cursor 関連記事
CSS cursor| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS cursor | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS