mozilla
Your Search Results

    cursor

    概要

    CSS の cursor プロパティは、マウスポインタが対象となる要素上に有る時のマウスカーソルを定義します。

    • 初期値 auto
    • 適用対象 全要素
    • 継承 継承する
    • メディア visualinteractive
    • 計算値 指定値(※キーワード指定の場合)
    • アニメーションの可否 不可
    • 正式順序 正式な文法により定められた一意のあいまいでない順序

    構文

    cursor:
    [ [ <uri> [<x> <y>]?,]* 
      [ auto | default | none | context-menu | help | pointer | progress | wait | cell | 
        crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | 
        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 ]
    ] | inherit
    

    <uri>
    任意
    url(…) の様な形式か、或いはそれらのカンマ区切りのリスト ( url(…), url(…), … ) で画像の URL を指定。2 つ目以降の <uri> の指定はそれぞれ、前候補の画像形式がサポートされていなかった場合のフォールバックとして機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定した url() 形式の記述は無効となります。詳細については『CSS の cursor プロパティに於ける URL() 値の使用』の頁を参照して下さい。
    <x> <y>
    カーソルの表示位置の x 座標と y 座標のピクセル値を単位無しで指定(任意)

    キーワード値

    「値」の列にマウスオーバーすると、各項目の実際の表示を確認できます。

    カテゴリ 表示 説明
    一般 auto   コンテクストに基づき表示するカーソルをブラウザが決定。
    ※例えばテキストにマウスオーバーした時には text キーワードを指定した場合と同様の表示結果となるでしょう。
    default default 既定のカーソル。矢印の様な形状となる。
    none   カーソルを表示しない。
    【訳注: ユーザビリティ上の観点から、この値は特別な理由が無い限り用いるべきではありません。】
    リンク及び状態 context-menu context-menu カーソル下でコンテクストメニューが使用可能である事を示す。
    Windows 上の Gecko/Firefox には実装されていない バグ 258960 WONTFIX
    help help ヘルプが使用可能である事を示す
    pointer pointer リンクにマウスカーソルが乗った時など。多くの場合、指差しマークが表示される。
    progress progress バックグラウンドでプログラムがビジー状態であるが、まだユーザによる操作が可能である状態を示す(※ wait とは異なる)
    wait wait プログラムがビジー状態で、ユーザによる操作が不能である状態を示す(カーソルは砂時計、或いは時計などの図柄となる)
    選択 cell cell セルを選択できることを示す
    crosshair crosshair 十字カーソルは。多くの場合ビットマップの選択を示す為に用いる
    text text.gif テキストを選択可能である事を示す。通常、I ビームが表示される
    vertical-text vertical-text 縦書きのテキストを選択可能である事を示す。通常、水平の I ビームが表示される
    ドラッグアンドドロップ alias alias エイリアスやショートカットが作成される事を示す
    copy copy 何らかのコピー操作が可能である事を示す
    move move マウスカーソル下のオブジェクトが移動できる可能性がある事を示す
    no-drop no-drop 現在の位置にドロップが許可されていないことを示すカーソル。
    バグ 275173 Windows に於いて、"no-drop" が "not-allowed" と同じものとなる
    not-allowed not-allowed 何らかの操作を行う事が出来ない事を示す
    リサイズ及びスクロール all-scroll all-scroll 任意の方向にスクロール(パン)可能である事を示す
    バグ 275174 Windows に於いて、"all-scroll" が "move" と同じものとなる
    col-resize col-resize アイテムや列が水平方向にリサイズ可能である事を示す。
    row-resize row-resize アイテムや行が垂直方向にリサイズ可能である事を示す。
    n-resize Example of a resize towards the top cursor エッジが移動可能である事を示す。例えばボックスの右下から動作を開始すると "se-resize" カーソルが表示される。
    e-resize Example of a resize towards the right cursor
    s-resize Example of a resize towards the bottom cursor
    w-resize Example of a resize towards the left cursor
    ne-resize Example of a resize towards the top-right corner cursor
    nw-resize Example of a resize towards the top-left corner cursor
    se-resize Example of a resize towards the bottom-right corner cursor
    sw-resize Example of a resize towards the bottom-left corner cursor
    ew-resize 3-resize.gif 双方向へのサイズ変更が可能である事を示す
    ns-resize 6-resize.gif
    nesw-resize 1-resize.gif
    nwse-resize 4-resize.gif
    ズーム zoom-in
    -webkit-zoom-in
    zoom-in.gif

    ズームイン / アウトが可能であることを示す

    zoom-out
    -webkit-zoom-out
    zoom-out.gif

    ベンダー拡張

    掴む -moz-grab
    -webkit-grab
    grab 要素を掴む事が出来る事を示す このカーソルの 公共の web ページでの使用はおすすめできません。
    URL() 値を使用した方が、より環境互換性の高いページになります。
    -moz-grabbing
    -webkit-grab
    grabbing 要素を掴んでいる事を示す

    実際の表示を確認

    .foo { cursor: crosshair; }
    
    /* use prefixed-value if "zoom-in" isn't supported */
    .bar { cursor: -webkit-zoom-in;  cursor: -moz-zoom-in;  cursor: zoom-in; } 
    
    /* standard cursor value as fallback for url() must be provided (doesn't work without) */
    .baz { cursor: url(hyper.cur), auto }

    仕様

    仕様書 策定状況 コメント
    CSS Basic User Interface Module Level 3 草案 幾つかのキーワード、ポジション構文、url() 関数形式の追加
    CSS Level 2 (Revision 1) 勧告 最初期の定義

    ブラウザ実装状況

    機能 Chrome (WebKit) Firefox (Gecko) Internet Explorer Opera Safari
    auto, crosshair, default, move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize 1.0 1.0 (1.0) 4.0 7.0 1.2
    hand (同等の表現である "pointer" で代用可能) 未サポート 未サポート 4.0 未サポート 未サポート
    pointer, progress 1.0 1.0 (1.0|1.7) 6.0 7.x 1.2 | 3.0
    url() (参照:『CSS の cursor プロパティに於ける URL() 値の使用』) 1.0 (523) 1.5 (1.8)
    On MacOs 4.0 (2.0).
    6.0 未サポート 3.0
    url() 値用のポジション構文 ? (有) 未サポート ? ?
    not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize 1.0 (522) 1.5 (1.8) 6.0 10.6 3.0
    alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize, context-menu 1.0 (522 )[1] 1.5 (1.8 )[1] 未サポート 10.6 [1] 3.0 [2]
    none 5.0 (533) 3.0 (1.9) 9.0 未サポート 5.0 [2]
    inherit 1.0 1.0 8.0 9.0 1.2
    zoom-in, zoom-out 1.0 (522) -webkit- 1.0 (1.4) -moz-
    24.0
    未サポート 11.6 3.0 -webkit-

    [1] Windows 上の Mozilla と WebKit では "context-menu" が適用されません。 Opera では問題ありません。
    [2] Windows 上の Safari では、 aliascellcopynoneが適用されません(Mac は可か?)

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: ethertank
    最終更新者: ethertank,
    サイドバーを隠す