ユーザインタフェイス

目次

• cursor（カーソルの変更）
• アウトライン（outline：輪郭線）
  • outline-width（輪郭線の幅）
  • outline-color（輪郭線の色）
  • outline-style（輪郭線の種類）
  • outline（輪郭線の簡略表記プロパティ）

cursor（カーソルの変更）

プロパティの解説

値	[[<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help ]] | inherit
初期値	auto
適用	あらゆる要素
継承性	あり
パーセント値	受けつけない
メディアグループ	visual，interactive

このプロパティでは，ポインティング-デヴァイス（マウスなど）の参照位置を示す，カーソルの種類を指定します。

【註】：カーソルの図柄は，プラットフォームやユーザ設定に依存します。視覚効果だけを狙った無意味なカーソル変更は，ユーザの慣習的な解釈を覆すことになるので，混乱や不快感をもたらす虞があります。ユーザ操作の好い手掛りとなるよう用いるべきです。

各値は以下のような意味を持ちます：

auto

状況に応じてUser Agentがカーソルの種類を決める。

crosshair

シンプルな十字カーソル。

default

プラットフォーム依存のデフォルト状態のカーソル。矢印である場合が多い。

pointer

ハイパーリンクのアンカーを指し示すときのカーソル。

move

対象が移動可能であるときのカーソル。

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize

ウインドウなどの辺がリサイズ可能であることを知らせるカーソル。

たとえば 'se-resize' のカーソルは，ボックスの右下隅を動かし始めた時に用いる。

これらキーワードの接頭語は，上を北，右を東とする八方向，すなわち 上=北(north)， 右上=北東(north­east)， 右=東(east)， 右下=南東(south­east)， 下=南（south）， 左下=南西(south­west)， 左=西(west)， 左上=北西(north­west) を意味します。

（補足：これらの各値について両側矢印でしめすプラットフォームもありますが，必ずしもそうなるとは限りません。）

text

テキストが選択できることを知らせるカーソル。I の字である場合が多い。

wait

プログラムが動作中でユーザが待つべき時のカーソル。時計や砂時計である場合が多い。

help

ヘルプを利用できる時に表示されるカーソル。疑問符（？）や吹出しである場合が多い。

<uri>

コンマ（,）で区切られたurl()函数のリストから，カーソルのリソースを取出す。そのうち，ユーザ環境で利用出来るもので，より前方の物から採用される。どのリソースも処理不可の場合を考慮して，リスト末尾に上述のキーワードを一つ指定する必要がある。

記述例

p.mything { cursor: url("mything.cur"), url("second.csr"), text; }

CSS2.1仕様ではさらに，次の値が新規に追加されました：

progress

進行中を知らせるカーソル。これはプログラムが何らかの処理を実行中だが，ユーザがプログラムとまだ遣りとり出来うる，という点において 'wait' とは異る。しばしば回転するビーチボール状，もしくは矢印に附着した時計や砂時計で表現される。

使用例

各キーワードを記したボックスにカーソルを重ね合せると，その種類のカーソルに変化します：

• auto
• crosshair
• default
• pointer
• move
• text
• wait
• help
• url("colorful-blue-pointer.cur"), pointer

• e-resize
• ne-resize
• nw-resize
• n-resize
• se-resize
• sw-resize
• s-resize
• w-resize

アウトライン（outline: 輪郭線）

GUI環境ではフォーカス状態をユーザに伝えるために "アンカー"，"入力フィールド"，"ボタン" などの周囲に輪郭線（outline）を描画する場合があります。アウトラインの各プロパティを用いると，任意の要素に対して輪郭線を描画させて，その部分を際立てさせられます。

ユーザによる操作を受けつける環境であれば，たとえば動的にアウトラインを制禦させることも可能です。

アウトラインは文書整形に影響しない（つまりボックスモデルにおいて，アウトラインのスペースは確保されない）ので，アウトラインは隣接する要素のボックスと重ねられるかもしれません。したがって制作者は，豫め 'margin' などで餘白を調整して置くとよいかもしれません。

outline-width（輪郭線の幅）

プロパティの解説

値	<border-width> | inherit
初期値	medium
適用	あらゆる要素
継承性	なし
パーセント値	受けつけない
メディアグループ	visual，interactive

輪郭線の幅について指定します。値については <border-width> と同様です。

下記の各入力フィールドは，:focus疑似クラスにより，動的に変化します。

outline-color（輪郭線の色）

プロパティの解説

値	<color> | invert | inherit
初期値	invert
適用	あらゆる要素
継承性	なし
パーセント値	受けつけない
メディアグループ	visual，interactive

輪郭線の色として <color> もしくは，背景との境界を反転させる 'invert' を指定します。

下記の各入力フィールドは，:focus疑似クラスにより，動的に変化します。

outline-style（輪郭線の種類）

プロパティの解説

値	<border-style> | inherit
初期値	none
適用	あらゆる要素
継承性	なし
パーセント値	受けつけない
メディアグループ	visual，interactive

輪郭線の種類について指定します。値については <border-style> と同様です； 'hidden' は除外。

下記の各入力フィールドは，:focus疑似クラスにより，動的に変化します。

outline（輪郭線の簡略表記プロパティ）

プロパティの定義

値	[<'outline-color'> || <'outline-style'> || <'outline-width'>] | inherit
初期値	個別のプロパティを参照
適用	あらゆる要素
継承性	なし
パーセント値	受けつけない
メディアグループ	visual，interactive

これは簡略化表記であり，三つのプロパティ 'outline-color'，'outline-style' および 'outline-width' の各値を一箇所にまとめて指定できます。このうち少くとも一つの値を指定するか，複数の値を空白類文字で区切ります。順序は問われません。

これを用いると，まづ輪郭線のプロパティはすべて初期値にされ，そして指定値にわりあて直されます。

下記の各入力フィールドは，:focus疑似クラスにより，動的に変化します。