jQuery Mobile ウィジェットにスタイルを指定するクラス

公開日：2014年10月10日
最終更新日：2014年11月8日

jQuery Mobile ではウィジェットにスタイルを適用するクラスが用意されています。どのウィジェットにも共通で使えるクラスと、ボタンなど特定のウィジェットに使うクラスがあります。この記事ではjQuery Mobile で用意されているクラスの一覧を示します。

«次の特集記事» jQuery Mobile テーマの基本的な仕組み
«前の特集記事» jQuery Mobile ウィジェットにオプションを指定するデータ属性

jQuery Mobile 特集記事一覧

【コンテンツ】

グローバルクラス
ボタンクラス
アイコンクラス
テーマクラス
グリッドクラス

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

グローバルクラス

どんなウイジェットにも指定できるクラスです。

クラス	説明
ui-corner-all	要素に角丸をつける
ui-shadow	要素に影をつける
ui-overlay-shadow	要素にオーバーレイの影をつける
ui-mini	小さいサイズにする

ボタンクラス

バージョン1.4からボタンはデータ属性ではなく、すべてクラスでデザインするようになっています。

クラス	説明
ui-btn	ボタンとしてスタイルする要素に指定する。
ui-btn-inline	インライン要素としてボタンを表示する。これによりボタンはテキストの長さに応じた幅で横に並ぶ。
ui-btn-icon-top	アイコンをテキストの上に表示する。
ui-btn-icon-right	アイコンをテキストの右に表示する。
ui-btn-icon-bottom	アイコンをテキストの下に表示する。
ui-btn-icon-left	アイコンをテキストの左に表示する。
ui-btn-icon-notext	テキストは表示されずアイコンだけのボタンになる。
ui-shadow-icon	アイコンに影をつける。
ui-btn-[a-z]	適用するスウォッチ。デフォルトは "a"

アイコンクラス

アイコンはさまざまな要素に使われます。
アイコンクラス名は、「ui-icon-」の後ろにアイコンの種類を示すアイコン名を付加し、a要素と button要素はこのクラスをつけてアイコンを表示します。
なお要素の中には data-icon属性を使って、「data-icon="アイコン名"」のように指定するものもあります。

クラス	説明	アイコン
ui-icon-action	アクション
ui-icon-alert	注意、警告
ui-icon-arrow-d	下向き矢印
ui-icon-arrow-d-l	左下向き矢印
ui-icon-arrow-d-r	右下向き矢印
ui-icon-arrow-l	左向き矢印
ui-icon-arrow-r	右向き矢印
ui-icon-arrow-u	上向き矢印
ui-icon-arrow-u-l	左上向き矢印
ui-icon-arrow-u-r	右上向き矢印
ui-icon-audio	オーディオ、サウンド、スピーカー
ui-icon-back	バック
ui-icon-bars	3本の水平線
ui-icon-bullets	3本のブレット付き水平線
ui-icon-calendar	カレンダー
ui-icon-camera	カメラ、撮影
ui-icon-carat-d	下向き山括弧
ui-icon-carat-l	左向き山括弧
ui-icon-carat-r	右向き山括弧
ui-icon-carat-u	上向き山括弧
ui-icon-check	チェック
ui-icon-clock	クロック
ui-icon-cloud	クラウド
ui-icon-comment	コメント
ui-icon-delete	削除
ui-icon-edit	編集
ui-icon-eye	eyeマーク
ui-icon-forbidden	禁止
ui-icon-forward	フォワード
ui-icon-gear	ギア、設定
ui-icon-grid	グリッド
ui-icon-heart	ハート
ui-icon-home	ホーム
ui-icon-info	インフォメーション
ui-icon-location	ロケーション
ui-icon-lock	ロック
ui-icon-mail	メール
ui-icon-minus	マイナス、閉じるボタン
ui-icon-navigation	ナビゲーション
ui-icon-phone	電話
ui-icon-plus	プラス、開くボタン
ui-icon-power	電源
ui-icon-recycle	リサイクル
ui-icon-refresh	リフレッシュ
ui-icon-search	検索
ui-icon-shop	店、ショッピング
ui-icon-star	星、お気に入り
ui-icon-tag	タグ
ui-icon-user	ユーザー、プロフィール
ui-icon-video	ビデオ

テーマクラス

スウォッチを適用するクラスです。最後にスウォッチを指定する１文字のアルファベットを付加します。
デフォルトでは "a" と "b" ２つのスウォッチが用意されていますが、カスタムスウォッチを用意するなら a～zまで26種類の文字を指定することが可能です。

クラス	説明
ui-bar-[a-z]	ツールバーに適用するスウォッチ。
ui-body-[a-z]	コンテンツブロックに適用するスウォッチ。リストアイテム、ポップアップ、開閉式コンテンツ、ローダー、スライダー、パネルに指定する。
ui-btn-[a-z]	ボタンに適用するスウォッチ。
ui-group-theme-[a-z]	コントロールグループ、リスト、開閉式コンテンツセットに適用するスウォッチ。
ui-overlay-[a-z]	オーバーレイ(背景)に適用するスウォッチ。
ui-page-theme-[a-z]	ページに適用するスウォッチ。

グリッドクラス

グリッドレイアウトを構成するときに使うクラスです。

クラス	説明
ui-grid-a	２カラムのグリッドコンテナに指定する。
ui-grid-b	３カラムのグリッドコンテナに指定する。
ui-grid-c	４カラムのグリッドコンテナに指定する。
ui-grid-d	５カラムのグリッドコンテナに指定する。
ui-block-[a-e]	グリッドコンテナに含める子要素に順番に指定する。