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を変更してテーマをカスタマイズ (1/3)](https://cdn-ak-scissors.b.st-hatena.com/image/square/d2bd49fa4962e5a28da38d03d21ec96d972ed2e5/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2011%2F05%2F20%2F294576%2Fl%2F7286b800eb7db8e4.jpg)