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

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

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. グローバルクラス
  2. ボタンクラス
  3. アイコンクラス
  4. テーマクラス
  5. グリッドクラス

【記事執筆時の環境】
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 ビデオ

テーマクラス

スウォッチを適用するクラスです。最後にスウォッチを指定する1文字のアルファベットを付加します。
デフォルトでは "a" と "b" 2つのスウォッチが用意されていますが、カスタムスウォッチを用意するなら 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 2カラムのグリッドコンテナに指定する。
ui-grid-b 3カラムのグリッドコンテナに指定する。
ui-grid-c 4カラムのグリッドコンテナに指定する。
ui-grid-d 5カラムのグリッドコンテナに指定する。
ui-block-[a-e] グリッドコンテナに含める子要素に順番に指定する。

jQuery Mobile では、スタイルを適用するのにCSSクラスだけでなくデータ属性を使う場合もあるのがややこしいところです。どちらの方法でも設定可能なケースもあります。やがて統一されていくとは思いますが、その過程では非推奨になるクラスやデータ属性も出てきますので注意しましょう。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ