目次
プロパティ名: | 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に変換 |
このプロパティは、ポインティングデバイスに対して表示するカーソルの種類を指定する。値は次の意味を持つ:
:link,:visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer }
この例は、すべてのハイパーリンク(訪問したか否かに関係なく)上のカーソルに外部のSVGカーソルを設定する。SVGカーソルをサポートしないユーザーエージェントは、単純に次の値へ飛び、"hyper.cur"カーソルの使用を試みる。そのカーソル形式もサポートされない場合、ユーザーエージェントは次の値へ飛び、単純に'pointer'カーソルをレンダリングする。
注。 システム色は、CSS3カラーモジュールで廃止されている。[CSS3COLOR]
テキストや背景などに事前に定義された色の値を割り当て可能に加えて、CSS2は、著者にオペレーティングシステムのグラフィック環境に統合する方法で色を指定することができる名前付けした色の値の集合を導入した。
対応する値を持たないシステムに対して、指定値は、最も近いシステム値またはデフォルトの色にマッピングすべきである。
以下は、色に関連するCSSプロパティの追加の値および値の一般的な意味を挙げる。任意の色のプロパティ(例えば、'color' や 'background-color')は、次のいずれかの名前を取ることができる。これらは大文字と小文字が区別しないが、読みやすさのために、以下のような大文字混じりの名前の使用を推奨する。
たとえば、段落の前景色と背景色をユーザーのウィンドウの前景色と背景色と同じに設定するには、次のように記述する:
p { color: WindowText; background-color: Window }
色について、著者は、ユーザーのシステムリソースの使用する方法でフォントを指定してもよい。詳細は'font'プロパティを参照されたい。
ときには、スタイルシートの著者は、ボタン、アクティブなフォームフィールド、イメージマップなどのビジュアルオブジェクトの周りにアウトラインを作成することを望んでもよい。CSS 2.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}
スクリプトは、リフローを起こすことなく、動的にアウトラインの幅を変更するために用いられてもよい。
グラフィカルユーザーインターフェイスは、ページ上の要素がフォーカスを持つことをユーザーに伝えるために要素の周囲にアウトラインを使用してもよい。このアウトラインは任意のボーダーに加えており、オンとオフのアウトラインの切り替えは、文書にリフローを引き起こすべきではない。フォーカスは、文書におけるユーザーの対話の主体となる(たとえば、テキストを入力する、ボタンを選択する、など)。インタラクティブなメディアグループをサポートするユーザーエージェントは、フォーカスがどこにあるかを追跡しなければならず、また、フォーカスを表わさなければならない。これは、:focus疑似クラスと組み合わせて動的なアウトラインを使用して行なわれてもよい。
たとえば、要素がフォーカスを持つ際に要素の周りに太い黒線を描き、かつアクティブ時に太い赤線を描くために、次の規則は使用されてもよい:
:focus { outline: thick solid black }
:active { outline: thick solid red }
CSSワーキンググループは、文書の拡大または文書の一部がスタイルシートを通して指定されるべきではないと考える。ユーザーエージェントは、さまざまな方法でそのような拡大(たとえば、大きな画像、大きな音など)をサポートしてもよい。
ページを拡大する際、ユーザーエージェントは配置された要素間の関係を維持すべきである。たとえば、漫画はオーバーレイテキスト要素をもつ画像で構成されてもよい。このページを拡大する場合、ユーザーエージェントは漫画の吹き出し内のテキストを保持すべきである。