cman.jp > WEBページ作成TOP > CSSリファレンス > 「カーソルの種類」
WEBページ作成
広告
cursor 「カーソルの種類」
「cursor」は、マウスポインターが対象の要素の上に乗ったときに表示されるマウスカーソルの形状を指定します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 3.0で拡張 | 全要素 | する |
広告
cursorの指定方法
| 構文 | ||
|---|---|---|
|
cursor : [url [<x> <y>]?,]* | [cursor-type]; |
||
| プロパティ/設定値 | 意味 | |
| url() | url()のカッコ内にカーソルに使用する画像ファイルを指定。 カンマで区切って複数の画像ファイルを指定可能。 画像ファイルは、指定した順に優先され、ブラウザがサポートしているファイルを使用します。 いずれのファイルも表示できないときのために、最後は必ず[cursor-type]のいずれかを指定します。 | |
| <x> | カーソルに使用する画像ファイルの横方向オフセットを数値で指定。 | |
| <y> | カーソルに使用する画像ファイルの縦方向オフセットを数値で指定。 | |
| [cursor-type] | カーソルの形状を指定。設定値は、下記参照。 ※下記各行にカーソルを乗せると、実際のカーソルの形状が表示されます。 未対応のブラウザの場合、カーソルの形状は変わりません。 | |
| 汎用 | auto | ブラウザが自動で決定 |
| default | 標準のカーソル | |
| none | カーソルを表示しない | |
| リンクと状態 | コンテキストメニューが利用可能 | |
| 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 | 縮小 | |
| デフォルト：「タグ毎のスタイル初期値」を参照 | ||
cursor のサンプル
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
.css-url{
cursor : url("https://web-designer.cman.jp/image/tmCmanjp_logo.gif"),auto;
}
.css-url2{
cursor : url("https://web-designer.cman.jp/image/tmCmanjp_logo.gif") 60 40,auto;
}
.css-grab{
cursor : grab;
cursor : -moz-grab;
cursor : -webkit-grab;
}
<!-- html -->
<div class="common">
<div class="cssTitle">cursor : url x,y座標指定なし</div>
<div>
<span class="css-url">
カーソルに画像を指定</span>
</div>
<div class="cssTitle">cursor : url x,y座標指定あり</div>
<div>
<span class="css-url2">
カーソルに画像を指定</span>
</div>
<div class="cssTitle">cursor : grab</div>
<div>
<span class="css-grab">
カーソルが手になる</span>
</div>
</div>
cursor : url x,y座標指定なし
カーソルに画像を指定
cursor : url x,y座標指定あり
カーソルに画像を指定
cursor : grab
カーソルが手になる
※[cursor-type]のなかには、未対応のブラウザや、ベンダープレフィックスが必要なものもあります。
【W3Cのcursor仕様書】
https://www.w3.org/TR/css-ui-3/#cursor
| 関連するCSS(STYLE) | |
|---|---|
| empty-cells | 空セルの表示 |
| opacity | 透明度 |
| quotes | 引用符 |
| visibility | 表示の有無 |
広告