|
|---|
CSSを駆使することでjQuery Mobileでもオリジナルデザインを実現できますが（関連記事）、フルカスタマイズではかなりの手間がかかります。今回はjQuery Mobileのテーマカラーのみを変更する、手軽なセミカスタマイズの方法を紹介します。
jQuery MobileのCSSを解剖する
テーマカラーをカスタマイズするために、jQuery MobileのCSSがどのように設計されているか、見てみましょう。
jQuery MobileのCSSは、「共通CSS」と「テーマCSS」の2つで構成されています。共通CSSは、要素のサイズや間隔、余白など、ページの構造やレイアウトに関する設定が記述されており、すべてのテーマで共通して利用されます。
一方、テーマCSSは、data-theme属性で指定したテーマ（デフォルトでは「a」～「e」までの5種類）のスタイルを記述したCSSで、指定したテーマに対応する設定のみ適用されます。
jQuery MobileのCSSファイルを見てみると、次のようなコメントが書かれており、共通CSSとテーマCSSでどのようなスタイルが設定されているか確認できます。
■jQuery MobileのCSS[http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.cssより抜粋]
/*!
* jQuery Mobile v1.0rc1
* http://jquerymobile.com/
*
* Copyright 2010, jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
/*!
* jQuery Mobile Framework
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/
/* Swatches */
/* A
-----------------------------------------------------------------------------------------------------------*/
（テーマ「a」のCSS）
/* B
-----------------------------------------------------------------------------------------------------------*/
（テーマ「b」のCSS）
/* C
-----------------------------------------------------------------------------------------------------------*/
（テーマ「c」のCSS）
/* D
-----------------------------------------------------------------------------------------------------------*/
（テーマ「d」のCSS）
/* E
-----------------------------------------------------------------------------------------------------------*/
（テーマ「e」のCSS）
/* Structure */
（共通CSS）
jQuery Mobileでは、共通CSSのスタイル設定を踏まえて、上記の「a」～「e」に相当する独自のテーマCSSを作成することで、オリジナルカラーのテーマを利用できます。
