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-drop が not-allowed と同じ | |
not-allowed | 何かが操作できないことを示す | |
grab | 何かがグラブ (異動のためにドラッグ) することができることを示す | |
grabbing | ||
| サイズ変更&スクロール | all-scroll | 何かが任意の方向にスクロール (パン) 可能であることを示す Windows では、 all-scroll は move 同じ |
col-resize | アイテムや列が水平方向にサイズ変更可能であることを示す 通常、左右を指す矢印とそれを仕切る垂直線が表示される | |
row-resize | アイテムや行が垂直方向にサイズ変更可能であることを示す 通常、上下を指す矢印とそれを仕切る水平線が表示される | |
n-resize | 辺が移動できることを表します例えば、 se-resize のカーソルはボックスの南東の角から移動を開始した時に使われる 環境によっては、等価の双方向のサイズ変更カーソルが表示される 例えば、 n-resize 及び s-resize は ns-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 |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 | |||||
|---|---|---|---|---|---|---|
| cursor | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| 基本 サポート | フルサポート◯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 構文 | フルサポート◯あり | サポートなし✖ | フルサポート◯あり | サポートなし✖ | 不明 | フルサポート◯あり |
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 | ||||||
|---|---|---|---|---|---|---|---|
| cursor | Android | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung 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 構文 | サポートなし✖ | 不明 | サポートなし✖ | 不明 | 不明 | 不明 | 不明 |
