jQuery UIのCSSの構造について
レイアウトヘルパー
| class名 |
説明 |
| .ui-helper-hidden |
display:noneを適用します。 |
| .ui-helper-hidden-accessible |
ページ外に配置することで、見ることは出来ないがアクセスすることが出来る要素を提供します。 |
| .ui-helper-reset |
padding, margins, text-decoration, list-styleなどのスタイルをリセットします。 |
| .ui-helper-clearfix |
親要素にfloatを囲むためのプロパティを適用します。
|
| .ui-helper-zfix |
オーバーレイが必要な際に、iframe要素にfixを指定します。
|
ウィジットコンテナ
| class名 |
説明 |
| .ui-widget |
ウィジットを内包する全てのコンテナに適用されるクラスで、
font-family、font-sizeのスタイルをウィジットに割り当てます。
また、Windowsブラウザが継承するスタイルを打ち消すために、子要素であるフォーム要素に同じfont-familyとfont-size:1emを適用します。
|
| .ui-widget-header |
ヘッダーコンテナに適用されるクラスです。
この要素と子要素それぞれに、テキスト、リンク、アイコンを適用します。
|
| .ui-widget-content |
コンテンツコンテナに適用されるクラスです。
この要素と子要素それぞれに、テキスト、リンク、アイコンを適用します。
(親要素、または兄弟要素のヘッダーにも適用することが出来ます。)
|
状態
| class名 |
説明 |
| .ui-state-default |
ボタン式の要素に適用されるクラスです。( "clickable default" )
|
| .ui-state-hover |
ボタン式の要素がマウスオーバーされた際に適用されるクラスです。( "clickable hover" )
|
| .ui-state-focus |
ボタン式の要素がフォーカスされた際に適用されるクラスです。( "clickable hover" )
|
| .ui-state-active |
ボタン式の要素が押された(mousedown)際に適用されるクラスです。( "clickable active" )
|
指示・指摘
| class名 |
説明 |
| .ui-state-highlight |
選択されている、またはハイライトされている要素に適用されるクラスです。( "highlight" )
|
| .ui-state-error |
エラーメッセージを表示するコンテナに適用されるクラスです。( "error" )
|
| .ui-state-error-text |
テキストをエラー用の文字色にします。(背景色は除く)
フォームのラベルや子要素に、エラーを適用したいアイコンがある場合に使用されます。
|
| .ui-state-disabled |
無効化したいUI要素に半透明な暗めのレイヤーを適用します。
既に何かしらのスタイルが適用されている要素で使用してください。
|
| .ui-priority-primary |
UIボタンが階層を必要とする場合、priority-1ボタンに適用されます。
太字のテキストを適用します。
|
| .ui-priority-secondary |
UIボタンが階層を必要とする場合、priority-2ボタンに適用されます。
通常のウェイトのテキストと僅かな透明度をボタンに適用します。
|
アイコン
| class名 |
説明 |
| .ui-icon |
アイコン要素の基盤となるクラスです。
寸法を16pxの四角形にし、内部テキストを隠し、背景に一連のアイコンのスプライト画像を適用します。
.ui-iconクラスは親コンテナに応じて、異なるスプライトの背景画像を適用します。
例えば、ui-state-defaultのコンテナ内の.ui-icon要素には、ui-state-default用のアイコン色が適用されます。
|
| .ui-icon-{アイコンタイプ}-{補助説明}-{方向} |
上記のように規則に沿ったclassが用意されていて、表示したいアイコンのclassをui-iconクラスの後ろに付け足します。
例えば、.ui-icon-triangle-1-eといったclassが用意されています。
jQuery UIのアイコン一覧を確認してください。
|
角丸
| class名 |
説明 |
| .ui-corner-tl |
左上のコーナーを角丸にします。(top, left)
|
| .ui-corner-tr |
右上のコーナーを角丸にします。(top, right)
|
| .ui-corner-bl |
左下のコーナーを角丸にします。(bottom, left)
|
| .ui-corner-br |
右下のコーナーを角丸にします。(bottom, right)
|
| .ui-corner-top |
上側のコーナーを角丸にします。
|
| .ui-corner-bottom |
下側のコーナーを角丸にします。
|
| .ui-corner-right |
右側のコーナーを角丸にします。
|
| .ui-corner-left |
左側のコーナーを角丸にします。
|
| .ui-corner-all |
全てのコーナーを角丸にします。
|
オーバーレイとシャドウ
| class名 |
説明 |
| .ui-widget-overlay |
画面全体に縦横100%のオーバーレイが適用されます。
|
| .ui-widget-shadow |
右上のコーナーを角丸にします。(top, right)
|
Back to top
© 2010 - 2017 STUDIO KINGDOM