CSS3 Pre-Reference



appearance

要素の外観

試す

サンプル

それぞれインタフェースが表示されていれば正しいです。

以下はdivの場合。

appearance: icon;
appearance: window;
appearance: desktop;
appearance: workspace;
appearance: document;
appearance: tooltip;
appearance: dialog;
appearance: button;
appearance: push-button;
appearance: hyperlink;
appearance: radio-button;
appearance: checkbox;
appearance: menu-item;
appearance: tab;
appearance: menu;
appearance: menubar;
appearance: pull-down-menu;
appearance: pop-up-menu;
appearance: list-menu;
appearance: radio-group;
appearance: checkbox-group;
appearance: outline-tree;
appearance: range;
appearance: field;
appearance: combo-box;
appearance: signature;
appearance: password;

以下はinputの場合。

コメントする


対応ブラウザ

Firefox
1.0~
Chrome/Safari
3.0~
Opera
まだ
InternetExplorer
まだ

パラメータ

normal | icon | window | desktop | workspace | document | tooltip | dialog | button | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menu | menubar | pull-down-menu | pop-up-menu | list-menu | radio-group | checkbox-group | outline-tree | range | field | combo-box | signature | password
初期値 normal
適用 すべての要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS3 Basic User Interface Module#4.1.5. :required and :optional

解説

要素の外観を指定します。外観を指定するのがCSSじゃないの?という感じですが、このプロパティはその要素がどのような見た目のフォーム部品なのか、ハイパーリンクなのか、それとも普通のテキストなのかを指定します。

CSS2までは、フォーム部品の本当に見た目のみで機能を実装することができませんでしたが、CSS3からはフォームの機能も実装させることができるようになっています。そのため、値が物凄く大量になっています。

以下、大雑把に解説しますが、実際にはかなり細かな指定があります。

icon
MacOSやWindowsのアイコンです。アイコンのイメージとラベルのセットです。
window
ウィンドウ類です。
desktop
デスクトップです。
workspace
一般的なウィンドウです。
document
ドキュメント情報を表示するウィンドウです。MacOSでいう”Finder”、Windowsでいう”エクスプローラー”が該当します。
tooltip
ヘルプを表示する際のツールチップです。
dialog
ダイアログです。アラート表示などで表示されるものです。
button
ボタン類です。テキストによってラベリングされた、ユーザーが選択可能な小さなオブジェクトを指します。
push-button
一般的なボタンです。<input type="button">と同じインタフェースです。
hyperlink
ハイパーリンクです。<a href="">~</a>と同じインタフェースです。
radio-button
ラジオボタンです。<input type="radio">と同じインタフェースです。
checkbox
チェックボックスです。<input type="checkbox">と同じインタフェースです。
menu-item
Windowsのメニューのような階層型のメニューです。HTMLにはありません。
tab
ダイアログなどでよく見られるタブです。
menu
メニュー類です。
menubar
メニューバーです。この中にメニューを配備します。
pull-down-menu
プルダウンメニューです。クリックするまではメニューラベルのみの表示で、クリックされるとサブメニューをずらっと表示します。
pop-up-menu
ポップアップメニューです。右クリックなどのユーザーアクションで表示されるメニューで、通常は非表示です。
list-menu
メニューのリストです。
radio-group
ラジオボタンのグループです。HTMLでいう<fieldset>のような感じです。
checkbox-group
チェックボックスのグループです。HTMLでいう<fieldset>のような感じです。
outline-tree
エクスプローラ風の左の▼、+や-をクリックすることで折り畳めるツリー型コントロール。
range
範囲指定のコントロールを表示します。<input type="range">と同じインタフェースです。
field
値を入力するためのフォーム部品類です。
combo-box
コンボボックスを表示します。<select>と同じインタフェースです。
signature
署名を入力するフィールドです。
password
パスワードを入力するフィールドです。入力された値は「*」にしたり「●」にしたりしてブラインドされます。

トラックバック

投稿されたコメント