18 ユーザーインターフェイス

目次

注: この仕様の複数の節は、他の仕様によって更新されている。置換された仕様および節のリストの詳細は、最新のCSS Snapshotにおける"Cascading Style Sheets (CSS) — 公式の定義"を参照されたい。

CSS Working Groupはまた、CSS level 2 revision 2 (CSS 2.2).を開発している。

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 | progress ] ] | inherit
初期値:  auto
適用対象:  すべての要素
継承:  yes
パーセンテージ:  利用不可
メディア:  visual, interactive
算出値:  指定値のとおり、ただし任意の相対URLは絶対URLに変換

このプロパティは、ポインティングデバイスに対して表示するカーソルの種類を指定する。値は次の意味を持つ:

auto
ユーザーエージェントが現在のコンテキストに基づく表示カーソルを決定する。
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
プログラムがビジー状態でユーザーが待機すべきことを示す。多くの場合、時計または砂時計のようにレンダリングされる。
progress
進行状況インジケータ。プログラムは、いくつかの処理を実行し、ユーザーがまだプログラムと対話してもよいという点で'wait'とは異なる。多くの場合、回転するビーチボールや、時計や砂時計をもつ矢印のようにレンダリングされる。
help
ヘルプは、カーソルの下のオブジェクトに対して利用できる。多くの場合、疑問符またはバルーンとしてレンダリングされる。
<uri>
ユーザーエージェントは、URIで指定されるリソースからカーソルを取得する。ユーザーエージェントは、カーソルのリストの最初のカーソルを処理できない場合、2番目の処理を試みるべきである(以降も同様)。ユーザーエージェントが任意のユーザー定義のカーソルを処理できない場合、ユーザーエージェントはリストの最後の一般的なカーソルを使用しなければならない。カーソルに対する内在の大きさは、背景画像として計算される。ただし、ユーザーエージェント定義の矩形は'background-image'プロパティに対する座標系を設置し、矩形の代わりに使用される。このユーザーエージェント定義の矩形は、ユーザーエージェントのオペレーティングシステム上で典型的なカーソルのサイズに基づくべきである。結果として生じるカーソルのサイズがこの矩形内に収まらない場合、矩形内に収まるまで、ユーザーエージェントは比例的に結果のカーソルを縮小してもよい。

例:


:link,:visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer }

この例は、すべてのハイパーリンク(訪問したか否かに関係なく)上のカーソルに外部のSVGカーソルを設定する。SVGカーソルをサポートしないユーザーエージェントは、単純に次の値へ飛び、"hyper.cur"カーソルの使用を試みる。そのカーソル形式もサポートされない場合、ユーザーエージェントは次の値へ飛び、単純に'pointer'カーソルをレンダリングする。

18.2 システム色

注。 システム色は、CSS3カラーモジュールで廃止されている。[CSS3COLOR]

テキストや背景などに事前に定義された色の値を割り当て可能に加えて、CSS2は、著者にオペレーティングシステムのグラフィック環境に統合する方法で色を指定することができる名前付けした色の値の集合を導入した。

対応する値を持たないシステムに対して、指定値は、最も近いシステム値またはデフォルトの色にマッピングすべきである。

以下は、色に関連するCSSプロパティの追加の値および値の一般的な意味を挙げる。任意の色のプロパティ(例えば、'color''background-color')は、次のいずれかの名前を取ることができる。これらは大文字と小文字が区別しないが、読みやすさのために、以下のような大文字混じりの名前の使用を推奨する。

ActiveBorder
アクティブウィンドウのボーダー。
ActiveCaption
アクティブウィンドウのキャプション。
AppWorkspace
多数の文書インターフェイスの背景色。
Background
デスクトップの背景。
ButtonFace
3次元表示要素の表面色。
ButtonHighlight
3次元表示要素の(光源から離れて直面する辺の)ハイライト色。
ButtonShadow
3次元表示要素の影の色。
ButtonText
プッシュボタンのテキスト。
CaptionText
キャプション、サイズボックス、およびスクロールバーの矢印ボックスにおけるテキスト。
GrayText
灰色の(無効な)テキスト。現在のディスプレイドライバが無地の灰色をサポートしない場合、この色は#000に設定される。
Highlight
コントロール内で選択された項目。
HighlightText
コントロール内で選択された項目のテキスト。
InactiveBorder
非アクティブウィンドウのボーダー。
InactiveCaption
非アクティブウィンドウのキャプション。
InactiveCaptionText
非アクティブタイトルキャプションのテキスト。
InfoBackground
ツールチップコントロールの背景色。
InfoText
ツールチップコントロールにおけるテキスト色。
Menu
メニューの背景。
MenuText
メニューの文字。
Scrollbar
スクロールバーの灰色の領域。
ThreeDDarkShadow
3次元表示要素の暗い影。
ThreeDFace
3次元表示要素の表面色。
ThreeDHighlight
3次元表示要素のハイライト色。
ThreeDLightShadow
3次元表示要素の明るい色(光源に面した辺)。
ThreeDShadow
3次元表示要素の暗い影。
Window
ウィンドウの背景。
WindowFrame
ウィンドウのフレーム。
WindowText
ウィンドウのテキスト。

例:

たとえば、段落の前景色と背景色をユーザーのウィンドウの前景色と背景色と同じに設定するには、次のように記述する:


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

18.3 フォントのユーザー優先権

色について、著者は、ユーザーのシステムリソースの使用する方法でフォントを指定してもよい。詳細は'font'プロパティを参照されたい。

18.4 動的アウトライン:'outline'プロパティ

ときには、スタイルシートの著者は、ボタン、アクティブなフォームフィールド、イメージマップなどのビジュアルオブジェクトの周りにアウトラインを作成することを望んでもよい。CSS 2.1のアウトラインは、以下の点でボーダーと異なる。

  1. アウトラインは、スペースを取らない。
  2. アウトラインは、非矩形であってもよい。

アウトラインのプロパティは、動的なアウトラインの見栄えを制御する。

'outline'
値:  [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
初期値:  個々のプロパティを参照
適用対象:  すべての要素
継承:  no
パーセンテージ:  利用不可
メディア:  visual, interactive
算出値:  個々のプロパティを参照
'outline-width'
値:  <border-width> | inherit
初期値:  medium
適用対象:  すべての要素
継承:  no
パーセンテージ:  利用不可
メディア:  visual, interactive
算出値:  絶対長さ、アウトラインスタイルが'none'場合は'0'
'outline-style'
値:  <border-style> | inherit
初期値:  none
適用対象:  すべての要素
継承:  no
パーセンテージ:  利用不可
メディア:  visual, interactive
算出値:  指定される
'outline-color'
値:  <color> | invert | inherit
初期値:  invert
適用対象:  すべての要素
継承:  no
パーセンテージ:  利用不可
メディア:  visual, interactive
算出値:  指定される

アウトラインのプロパティで作成したアウトラインはボックスの"上"に描画される。すなわち、アウトラインは常に手前にあり、ボックスまたはその他のボックスの位置や大きさには影響しない。したがって、アウトラインの表示または抑制は、リフローまたはオーバーフローを発生させない。

アウトラインは、ボーダー辺のすぐ外側から描画されてもよい。

アウトラインは、非矩形であってもよい。たとえば、要素が複数行にわたって改行される場合、アウトラインはすべての要素ボックスを囲む最小のものとなる。ボーダーとは対照的に、アウトラインは行ボックスの先頭または末尾で開かれていないが、可能であれば、常に完全に接続される。

'outline-width'プロパティは、'border-width'と同じ値を受け入れる。

'outline-style'プロパティは、'hidden'が正当なアウトラインスタイルでないことを除いて、'border-style'と同じ値を受け入れる。

'outline-color'は、キーワード'invert'と同様にすべての色も受け入れる。'Invert'は画面上のピクセルの色の反転を実行することを期待する。これは、背景色に関係なくフォーカスのボーダーが可視であることを保証するための一般的なトリックである。

適合ユーザーエージェントは、画面上のピクセルの色の反転をサポートしないプラットフォーム上の'invert'値を無視してもよい。ユーザーエージェントが'invert'値をサポートしない場合、'outline-color'プロパティの初期値は'border-top-color'プロパティの初期値と類似する、'color'プロパティの値となる。

'outline'プロパティは略式プロパティで、'outline-style''outline-width''outline-color'の3つすべてを設定する。

注。 アウトラインはすべての辺で同じである。ボーダーとは対照的に、'outline-top'や'outline-left'プロパティは存在しない。

この仕様は、複数の重複するアウトラインが描画される方法や、どのようにアウトラインが他の要素の後ろに部分的に隠されるボックスに描画されるかを定義しない。

注。 アウトラインは整形に影響しない(すなわち、スペースはボックスモデルで除去されない)ため、アウトラインはページ上の他の要素と重なるかもしれない。

例:

BUTTON要素の周囲に太いアウトラインを描画する例は次のとおり:


button { outline : thick solid}

スクリプトは、リフローを起こすことなく、動的にアウトラインの幅を変更するために用いられてもよい。

18.4.1 アウトラインとフォーカス

グラフィカルユーザーインターフェイスは、ページ上の要素がフォーカスを持つことをユーザーに伝えるために要素の周囲にアウトラインを使用してもよい。このアウトラインは任意のボーダーに加えており、オンとオフのアウトラインの切り替えは、文書にリフローを引き起こすべきではない。フォーカスは、文書におけるユーザーの対話の主体となる(たとえば、テキストを入力する、ボタンを選択する、など)。インタラクティブなメディアグループをサポートするユーザーエージェントは、フォーカスがどこにあるかを追跡しなければならず、また、フォーカスを表わさなければならない。これは、:focus疑似クラスと組み合わせて動的なアウトラインを使用して行なわれてもよい。

例:

たとえば、要素がフォーカスを持つ際に要素の周りに太い黒線を描き、かつアクティブ時に太い赤線を描くために、次の規則は使用されてもよい:


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

18.5 拡大表示

CSSワーキンググループは、文書の拡大または文書の一部がスタイルシートを通して指定されるべきではないと考える。ユーザーエージェントは、さまざまな方法でそのような拡大(たとえば、大きな画像、大きな音など)をサポートしてもよい。

ページを拡大する際、ユーザーエージェントは配置された要素間の関係を維持すべきである。たとえば、漫画はオーバーレイテキスト要素をもつ画像で構成されてもよい。このページを拡大する場合、ユーザーエージェントは漫画の吹き出し内のテキストを保持すべきである。