テーマシステム概要
jQuery Mobileに含まれる全てのレイアウトやウィジェットは、統一感のあるテーマをサイトやアプリケーションに実装するための新しいオブジェクト指向CSSフレームワークが適用されています。このテーマシステムはjQuery UIの ThemeRoller に近いものですが、幾つかの重要な進化を遂げています。
- 画像ではなく CSS3 の角丸、影落とし、グラディエーションなどを活用しているため、テーマファイルが軽量になりサーバ負荷を軽減しています。
- テーマは複数の スウォッチ を含みます。これはヘッダバー、コンテンツ、ボタンなどを自由に作成し、組み合わせられるものです。これにより、よりリッチなデザインが可能になります。
- この 無制限テーマ システムにより、テーマごとに26種類までの見本を用意でき、ほぼ無限の組み合わせでデザイン可能です。
- 全ての背景に CSS3のグラディエーション を用いることで、ファイルサイズを劇的に小さくし、サーバの負荷を軽減しました。
- 携帯端末で利用頻度の高い シンプルなアイコンのセット を含め、スプライトを用いることで画像を軽くしています。
テーマローラー
独自テーマをつくる最も簡単な方法は テーマローラー を使うことです。テーマをデザインし、カスタムCSSファイルとしてダウンロードすることが出来ます。あとはプロジェクトに取り込むだけで動作します。
テーマとスウォッチ
テーマシステムの鍵は、色とテクスチャが、paddingなどの構造的なスタイルから分離されていることにあります。これによりテーマの色やテクスチャはスタイルシートで定義されるだけで、テーマの各所で組み合わせられて反映されるようになります。
各テーマは、フォント・ファミリーやオーバーレイへの影付け、ボタンやボックスの角の丸さなど、いくつかのグローバル設定を持っています。また、バーやコンテント・ブロック、ボタン、リストアイテム、文字の影などに、複数パターンのスウォッチを持つことも可能です。
jQuery Mobileのデフォルトテーマは、5種類のスウォッチを含んでいます。各見本には a,b,c,d,e の文字が割り当てられています。ウィジェット横断で適用されるスウォッチのマッピングを作成するには、次のような慣習に従ってください。スウォッチ「a」は、最優先で適用されるものです(デフォルトテーマでは黒)。「b」は2番目のレベル(青)。そして「c」は多くの場面でデフォルトで使うであろう基本レベルのもの(グレー)。「d」は第2レベルの代替、「e」はアクセントになる見本です。テーマは更にアクセントの色や特別な状況下で用いるための追加の見本を持つことができます。例えば「f」として赤いバーとボタンの見本を用意しておき、エラーの時に適用するなどが可能です。
バー
デフォルトのテーマは、次の5種類のバーを含んでいます。
初期状態では、フレームワークは「a」の見本を全てのヘッダやフッタに適用します。他の見本色を使うならば、ヘッダやフッタ要素に data-theme 属性を追加し、適用したい文字(“b“や“d“など)を指定します。詳しくは [[[バーのテーマ]]] を参照してください。
コンテンツ部分
テーマはまた、ヘッダ色などとあわせたコンテンツ部分のスウォッチも含んでいます。
コンテンツ部分に対して特に指定が無ければ、フレームワークはヘッダの“a“に対して最もコントラストの調和する“c“を適用します。結果、次のような感じになります。
Default Header
Default Theme Content Header
This is the default content color swatch and a preview of a link.
Button詳しくは コンテンツのテーマ 参照のこと。
リストとボタン
各見本は、リストやボタンのようなインタラクティブな要素のスタイルも含んでいます。
notextile..
ボタンの見本も含まれて居ます。各ボタンのスタイルには、通常状態、ホバー/フォーカス、押されている状態が定義されています。
初期状態では、どのボタンも自動的に親要素の見本指定に従って設定されます。以下のように、各ボタンに指定を行わなくても親の色にあわせてカメレオンのように色を従えます。
このような挙動により、テーマや見本の切り替えが容易に行えるようになります。フォームに含まれるボタンなども、同様に親要素に従います。
もし強調などのため親要素と異なる色を適用したい場合、代わりの見本色を data-theme=“a” のように指定することで実現できます。こうした指定がされると、恣意的な設定を活かすためにフレームワークは親要素のテーマが変わっても子要素のそれを上書き設定しません。
詳しくは ボタンのテーマ を参照してください。
共通の “アクティブ” 状態
jQuery Mobileは、テーマ全体で単一の “active” というスウォッチ (デフォルトテーマでは明るい青) を持っています。これは選択状態にあることを示し、ウィジェットに指定されたスウォッチに関係なく同じものが用いられます。これはまた、ナビゲーションやフォームコントロールで選択状態を示す必要がある場合にも使われます。テーマのスウォッチシステムはユーザに分かりやすいデザインを提供できるよう設計しているため、スウォッチごとに上書きすることは出来ないようになっています。この設定はスタイルシートの ui-btn-active に記述されています。
アイコン
設定可能な ボタンのアイコン がフレームワークには含まれています。アイコンのダウンロードサイズを軽減するため、jQuery Mobileではアイコンを白で描き自動的に半透明の黒い丸で囲み、背景とコントラストが出るようにしています。
テーマクラス
カラースウォッチを data-theme 属性で指定することは、テーマシステムを活用したひとつの方法です。しかしまた、直接クラス指定を通じてスウォッチの色やテクスチャ、フォントなどをマークアップすることも可能です。これは特に、独自のレイアウト要素やUI用ウィジェットを作る場合に便利な方法です。以下に、いくつかの使用頻度の高いテーマクラスを挙げておきます。しかしテーマのスタイルシートには、これより遙かに多い設定がされています。
ui-bar-(a-z)- ツールバーのスタイルを定義します。通常は、paddingなど構造を定義した ui-bar クラスと共に指定されます。
ui-body-(a-z)- コンテンツ部分のスタイルを定義します。通常は、paddingなど構造を定義した ui-body クラスと共に指定されます。
ui-btn-up-(a-z)- ボタンやクリック可能な要素のスタイルを定義します。通常は ui-btn-hover-(a-z) や ui-btn-down-(a-z) のような、相互に作用するクラスとセットで使われます。また、選択状態や"on"の状態を示すため ui-btn-active を使います。
ui-corner-all- テーマ全体で使われる外枠の角を丸くするスタイルを定義します。グループ化されたアイテムやグループ化されたアイテムなどに適用されます。他にも角を丸くする関連の追加クラスがいくつかあります。たとえば ui-corner-tl (左上のみ)、-top (上側)、-left (左側)などの具合です。また、ボタン用の角丸定義クラスも別にあります。名前の付け方は "corner" を "btn-corner" に差し替えるだけで、後は同じです。たとえば ui-corder-all は ui-btn-corner-all のようになります。
ui-shadow- テーマ全体で使われる、要素へのドロップシャドウ定義をCSSの box-shadow プロパティを使って行います。
ui-disabled- 使用不可状態の見た目や動作を定義しています。通常は透明度を30%ほどにして、カーソルが変わらないようにし、マウス操作をキャンセルするため pointer-events: none; を設定しています。
テーマを上書きする
テーマの拡張は、開始点にするには少々手ごわいですが、独自デザインを追加するなどのカスタマイズを加えることはサイトやアプリをユニークなものにします。すべてがCSSにより制御されていますので、手を加えたい箇所をWebのインスペクターツールなどを使ってスタイルを特定することは簡単です。テーマの追加には、外部スタイルシートを用意して head 要素の構造スタイルとテーマスタイルを取り込んでいる箇所の 後 に追加することをお勧めします。これによって、ライブラリがバージョンアップした際にも追加定義を失わずに更新可能になります。
テーマについて
各コンポーネントのテーマについての記述は、次のページを参照してください。
- ページのテーマ
- ツールバーのテーマ
- コンテンツのテーマ
- ボタンのテーマ
- フォームのテーマ
- リストビューのテーマ