18 利用者インタフェース

18.1 カーソル'cursor' 特性)

'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
適用対象:  すべての要素
継承:  する
パーセント値:  N/A
メディア:  視覚メディア, 対話式メディア

この特性は,ポインティング装置に表示されるカーソルの型を指定する。値には次の意味がある。

auto
UAは,現在の文脈に基づいて,表示するカーソルを決定する。
crosshair
単純な十字線。例えば, "+"記号に類似する短かい線分などである。
default
プラットフォーム依存のデフォルトカーソル。矢印としてレンダリングされることが多い。
pointer
カーソルはリンクを示すポインタである。
move
対象が動かせることを示す。
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
辺が動かせることを示す。例えば, 'se-resize'のカーソルは,ボックスの右下隅色移動が始ま る場合に使用される。
text
選択されるテキストを示す。I-バーとしてレンダリングされることが多い。
wait
プログラムがビジーであり,利用者は待機することが望ましいことを示す。時計又は砂時計と してレンダリングされることが多い。
help
カーソルが指すオブジェクトに利用できることを示す。疑問符又は吹出し線としてレンダリン グされることが多い。
<uri>
利用者エージェントは,URIが指定する資源からカーソルを検索する。利用者エージェントがリス トの先頭にある最初のカーソルを操作することができない場合,二番目のカーソル等を操作しよう と試みるのがよい。利用者エージェントが利用者定義のカーソルをいずれも操作できない場合,リ ストの末尾にある一般的カーソルを使用しなければならない。

例:

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

18.2 色に関する利用者の好み

あらかじめ定義された色値をテキスト,背景等に割り当てることができる以外に, CSS2により,文書作成者は利用者の図形環境に統合するという方法で,色を指定することができる。 利用者の好みを考慮するスタイル規則には次の利点がある。

  1. 利用者が定義した外観及び感覚に適合するページを生成する。
  2. 現在の利用者の設定が身体障害に関連する場合,よりアクセスしやすいページを生成する。

システム色に定義される値の集合は,あらゆる値を網羅することを意図している。システムに対応する値がない場合は,最も近似するシステム属性又はデフォルト色に指定値を対応付けるのがよい。

次は,色関連のCSS属性及びその一般的な意味について,付加的な値を列挙したものである。い ずれの色特性 ( 'color' 又は 'background-color'など)も次の名前を一つとる ことができる。これらは大文字及び小文字を区別しないが,より読み易くするために,後述するよ うに大文字及び小文字を混在させることを推奨する。

ActiveBorder
活性ウィンドゥの境界線。
ActiveCaption
活性ウィンドゥの標題。
AppWorkspace
複数の文書インタフェースの背景色。
Background
デスクトップの背景。
ButtonFace
三次元表示要素の書体色。
ButtonHighlight
三次元表示要素の暗影。光源から離れている辺に関するもの。
ButtonShadow
三次元表示要素の影となる色。
ButtonText
押しボタン上のテキスト。
CaptionText
標題,サイズボックス 及びスクロールバーの矢印ボックスのテキスト。
GrayText
グレー(使用不可)テキスト。この色は,現在の表示ドライバが濃いグレーをサポートしない場 合は#000に設定される。
Highlight
制御で選択される項目。
HighlightText
制御で選択される項目のテキスト。
InactiveBorder
非活性ウィンドウの境界。
InactiveCaption
非活性ウィンドウの標題。
InactiveCaptionText
非活性標題のテキストの色。
InfoBackground
ツールの助言情報制御の背景色。
InfoText
ツールの助言情報制御のテキスト色。
Menu
メニューの背景。
MenuText
メニューのテキスト。
Scrollbar
スクロールバーのグレー領域。
ThreeDDarkShadow
三次元表示要素の暗影。
ThreeDFace
三次元表示要素の書体の色。
ThreeDHighlight
三次元表示要素の強調色。
ThreeDLightShadow
三次元表示要素の光源色。光源に直面する辺に関するもの。
ThreeDShadow
三次元表示要素の影。
Window
ウィンドウの背景。
WindowFrame
ウィンドウのフレーム。
WindowText
ウィンドウ内のテキスト。

例:

例えば, 段落の前景の色及び背景の色を利用者のウィンドウと同じに設定するためには,次のよう に書く。

P { color: WindowText; background-color: Window }

18.3 フォントに関する利用者の好み

色の場合と同様に, 文書作成者は利用者のシステム資源を利用する方法でフォントを指定して よい。詳細については, 'font'特性を参照。

18.4 動的な輪郭線'outline' 特性)

スタイルシートの文書作成者が,ボタン,活性フォームフィールド,画像マップ等の視覚オブ ジェクトを強調するために,その周囲に輪郭線を生成したいと考えることもある。CSS2の輪郭線が 境界と異なる点を次に示す。

  1. 輪郭線はスペースをとらない。
  2. 輪郭線は長方形でなくてもよい。

輪郭線特性は,これらの動的な輪郭線のスタイルを制御する。

'outline'
値:  [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
初期値:  個々の特性を参照
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア, 対話式メディア
'outline-width'
値:  <border-width> | inherit
初期値:  medium
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  メディア, 対話式メディア
'outline-style'
値:  <border-style> | inherit
初期値:  none
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア, 対話式メディア
'outline-color'
値:  <color> | invert | inherit
初期値:  invert
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア, 対話式メディア

輪郭線特性を用いて生成される輪郭線はボックスに"重ねて"描画される。即ち,輪郭線は常に前 面に描画され,対象となるボックス又はその他のすべてのボックスの位置又はサイズに影響しない。 そのため,輪郭線の表示又は非表示によって,再流し込みが生じることはない。

輪郭線は 境界辺のすぐ外側に描画される。

輪郭線は長方形でなくてもよい。例えば,要素が複数行に分割される場合は,輪郭線は,要素の ボックスをすべて囲む最小の輪郭線となる。 境界とは異なり, 輪郭線は行ボックスの末尾又は先頭で も描画されるが,常に十分な連動が保たれている。

'outline-width'特性は 'border-width'と同じ値を使用することができる。

'outline-style'特性は 'border-style'と同じ値を使用することができる。た だし,'hidden'が不当な輪郭線スタイルである場合を除く。

'outline-color'は, キーワード'invert'をはじめとするすべての色を指定することができ る。 'Invert'は画面上の画素の色反転を実行する。これは,背景色にかかわらず,フォーカス境界 を確実にレンダリングするための一般的なトリックである。

'outline'特性は簡略記述特性であり, 'outline-style', 'outline-width' 及び 'outline-color'の三つをすべて設定する。

備考:輪郭線はすべての辺で同じである。境界とは異なり,'outline-top' 特性又は 'outline-left'特性は存在しない。

この規定は,輪郭線が複数重なる場合,それをどのように描画するか又はボックスの一部が他の 要素の背面に隠れる場合に,輪郭線をどのように描画するかは定義しない。

備考: フォーカス輪郭線はフォーマットに影響しない,即ち,ボックスモデルには輪郭線のためのスペー スが存在しないため,輪郭線はページ上のその他の要素とうまく重なる場合がある。

例:

ここでは,BOTTON要素の周囲に太い輪郭線を描画する例を示す。

BUTTON { outline-width : thick }

再流し込みを起こさずに,輪郭線の幅を動的に変更するため,スクリプトを使用する。

18.4.1 輪郭線及びフォーカス

図形による利用者インタフェースは,要素の周囲に輪郭線を施して,利用者にページ上の どの要素が フォーカスを有するかを知らせてもよい。 これらの輪郭線は,境界とは全く別であり,輪郭線の表示又は非表示の切換えによって,文書を再流し込が生じないことが望ましい。フォーカスは,テキストを入力したり,ボタンを選択するなど,文書の 利用者対話の主体である。 対話式メディアグループをサポートする利用者 エージェントは,フォーカスがどこに存在するかを追跡し,同時にフォーカスを表示しなければな らない。この場合,:focus 擬似クラスを動的な輪郭線と併用すればよい。

例:

例えば, 要素がフォーカスを有する場合,その要素の周囲に太い黒線を描画し,要素が活性化し ている場合に太い赤線を描画するには,次の規則を使用することができる。

:focus  { outline: thick solid black }
:active { outline: thick solid red }

18.5 拡大表示

CSS作業グループは,スタイルシートで文書又はその一部の拡大表示を指定しないほうがよいと 考えている。利用者エージェントは,画像を大きくする,音声を大きくする等,別の方法でこれを 実現してもよい。

ページを拡大する場合, UAは位置指定された要素間の関係を保持するのがよい。例えば,こま 割り漫画がテキスト要素を重ねた画像色作成されてもよい。利用者エージェントは,このページを 拡大する場合,漫画の吹き出しの中にテキストが収まるようにするのがよい。