WEB基礎之:CSSユーザーインタフェーススタイル
ユーザーインタフェースのスタイル
1.カーソル
cursor:default
を選択します.
属性値
説明
General
auto
ブラウザは、現在のコンテンツに基づいてポインタスタイルを決定します.たとえば、コンテンツがテキストの場合はtextスタイルを使用します.
General
default
デフォルトのポインタは、通常矢印です.
General
none
ポインタなしでレンダリング
リンクおよびステータス
context-menu
ポインタの下に使用可能なコンテンツディレクトリがあります.
リンクおよびステータス
help
指示ヘルプ
リンクおよびステータス
pointer
接続に浮遊する場合、通常は手
リンクおよびステータス
progress
プログラムのバックグラウンドは忙しいが、ユーザーはインタラクティブである(waitとは逆).
リンクおよびステータス
wait
プログラムが多忙で、ユーザーは対話できない(progressとは逆).アイコンは一般的に砂時計または時計です.
選択
cell
選択可能なセルを示します
選択
crosshair
クロスポインタ、通常はビットマップのボックス選択を示します.
選択
text
選択可能な指示テキスト
選択
vertical-text
垂直テキストが選択可能であることを示します
ドラッグ&ドロップ
alias
コピーまたはショートカットが作成されます
ドラッグ&ドロップ
copy
コピー可能な指示
ドラッグ&ドロップ
move
懸濁された物体は移動可能である
ドラッグ&ドロップ
no-drop
現在位置は捨てることができず、WindowsまたはMac OS Xの「no-dropはnot-allowedと同じ」である.
ドラッグ&ドロップ
not-allowed
実行できません
ドラッグ&ドロップ
grab
キャプチャ可能.grabとgrabbingは比較後期にサポートされます.ブラウザ互換テーブルを参照してください.
ドラッグ&ドロップ
grabbing
キャプチャ中
サイズ変更およびスクロール
all-scroll
要素は任意の方向にスクロール(平行移動)することができる.Windowsでは、「all-scrollはmoveと同じ」です.
サイズ変更およびスクロール
col-resize
要素は幅をリセットできます.通常は、中央に縦線で分割された左右の2つの矢印としてレンダリングされます.
サイズ変更およびスクロール
row-resize
要素は高さをリセットできます.通常は、中央に横線で分割された上下2つの矢印としてレンダリングされます.
サイズ変更およびスクロール
n-resize
北は移動されます.
サイズ変更およびスクロール
e-resize
東は移動されます.
サイズ変更およびスクロール
s-resize
南は移動されます.
サイズ変更およびスクロール
w-resize
西は移動されます.
サイズ変更およびスクロール
ne-resize
北東に移動されます.
サイズ変更およびスクロール
nw-resize
北西に移動します.
サイズ変更およびスクロール
se-resize
南東に移動されます.たとえば、エレメントボックスの南東隅が移動されるときにse-resizeを使用します.
サイズ変更およびスクロール
sw-resize
南西に移動します.
サイズ変更およびスクロール
ew-resize
東西両方向のサイズ変更
サイズ変更およびスクロール
ns-resize
南北双方向のサイズ変更
サイズ変更およびスクロール
nesw-resize
東北南西双方向再設定サイズ
サイズ変更およびスクロール
nwse-resize
西北東南双方向再設定サイズ
拡大・縮小
zoom-in
表示を拡大
拡大・縮小
zoom-out
指示は縮小可能
グラフィックカーソル
cur()
カスタムカーソルアイコン
2.アウトライン
borderとoutlineは似ていますが、outlineは空間を占有せず、要素コンテンツの周りに描画されます.仕様によれば、outlineは通常矩形であるが、非矩形であってもよい.
2.1輪郭スタイルの設定
outline-style:属性は、要素プロファイルのスタイルを設定するために使用されます.属性値
説明
none
デフォルト.輪郭なし.
dotted
輪郭は一連の点である.
dashed
輪郭は一連の短線である.
solid
輪郭が実線である
double
輪郭は2本の隙間のある線である.
outline-widthは線と空間の総和である.groove
輪郭が凹んでいる
ridge
groove :輪郭が凸状である.inset
輪郭は埋め込み状を呈する.
outset
inset :輪郭が突出する.2.2輪郭幅
outline-widthプロパティは、要素の輪郭の厚さを設定するために使用されます.要素プロファイルは、borderの外周にある要素の周囲に描かれた線です.属性値
説明
thin
ユーザーエージェントによって異なります.通常、デスクトップブラウザの
1px(Firefoxを含む)と同等である.medium
ユーザーエージェントによって異なります.通常、デスクトップブラウザの
3px(Firefoxを含む)と同等である.thick
ユーザーエージェントによって異なります.通常、デスクトップブラウザの
5px(Firefoxを含む)と同等である.length
輪郭の太さの値を指定します.
2.3輪郭色の設定
outline-colorの属性は、要素の輪郭の色を設定ために使用する.属性値
説明
輪郭の色、規則は
invert
反色、輪郭の表示を確認するために用いる.注意すべてのブラウザがこのプロパティをサポートするわけではありませんが、そうでない場合は無効です.
2.4要約
/* outline 、 ， 。 */
outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
/* */
outline: solid;
/* | */
outline: #f66 dashed;
/* | */
outline: inset thick;
/* | | */
outline: green solid 3px;
/* */
outline: inherit;
outline: initial;
outline: unset;