【CSSリファレンス】cursor

こんにちは（・∀・）

CSSプロパティをご紹介します。今回ご紹介するCSSプロパティはcursorです。

概要

cursorプロパティを使用してカーソルの形状を指定します。

.sample {
  cursor: auto;
}

適用要素

すべての要素

指定できる値

オリジナルカーソル

オリジナルカーソルを指定する場合、ユーザー環境によって利用できる画像形式が違うので、カンマ(,)で区切って複数のカーソルを指定する事ができます。また、初めに指定したものが優先されます。

　cursor: url(sample.cur), url(sample.png);

画像が表示されないときに備えカンマ(,)に続けて任意のキーワードを指定する事もできます。

　cursor: url(sample.cur), text;

カーソルに使用できるファイル形式はIEはカーソル(.cur)とアニメーションカーソル(.ani)です。FirefoxはGIF、JPEG、PNG等も使用できます。

カーソル用の画像(.cur、.ani)を作成するにはアイコン作成ソフトが必要です。

初期値

auto

サンプル

HTML

<p class="demo1">auto</p>
<p class="demo2">default</p>
<p class="demo3">pointer</p>
<p class="demo4">crosshair</p>
<p class="demo5">move</p>
<p class="demo6">text</p>
<p class="demo7">wait</p>
<p class="demo8">help</p>
<p class="demo9">n-resize</p>
<p class="demo10">e-resize</p>
<p class="demo11">s-resize</p>
<p class="demo12">w-resize</p>
<p class="demo13">ne-resize</p>
<p class="demo14">se-resize</p>
<p class="demo15">sw-resize</p>
<p class="demo16">nw-resize</p>
<p class="demo24">url(URI)</p>
<br>
<p>独自拡張カーソル一覧</p>
<p class="demo17">col-resize</p>
<p class="demo18">row-resize</p>
<p class="demo19">all-scroll</p>
<p class="demo20">not-allowed</p>
<p class="demo21">no-drop</p>
<p class="demo22">progress</p>
<p class="demo23">vertical-text</p>

CSS

.demo1 { cursor: auto; }
.demo2 { cursor: default; }
.demo3 { cursor: pointer; }
.demo4 { cursor: crosshair; }
.demo5 { cursor: move; }
.demo6 { cursor: text; }
.demo7 { cursor: wait; }
.demo8 { cursor: help; }
.demo9 { cursor: n-resize; }
.demo10 { cursor: e-resize; }
.demo11 { cursor: s-resize; }
.demo12 { cursor: w-resize; }
.demo13 { cursor: ne-resize; }
.demo14 { cursor: se-resize; }
.demo15 { cursor: sw-resize; }
.demo16 { cursor: nw-resize; }
.demo17 { cursor: col-resize; }
.demo18 { cursor: row-resize; }
.demo19 { cursor: all-scroll; }
.demo20 { cursor: not-allowed; }
.demo21 { cursor: no-drop; }
.demo22 { cursor: progress; }
.demo23 { cursor: vertical-text; }
.demo24 { cursor: url(cursor.cur); }

Result