このページの本文へ

DESIGN 西畑一馬のjQuery Mobileデザイン入門 ― 第10回

jQuery MobileのCSSを変更してテーマをカスタマイズ

2011年10月17日 13時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

 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を作成することで、オリジナルカラーのテーマを利用できます。

書影

書籍では「jQuery Mobile 1.0」正式版に対応し、内容を全面的に改訂。新たなカスタマイズサンプルや書き下ろしコラムも多数追加し、制作現場ですぐに役立つ1冊になっています。ペーパープロトタイプができるUIカード付き。

jQuery Mobile
スマートフォンサイト デザイン入門

本体 2,380円+税、B5変形判224ページ(オール4色刷)
ISBN:978-4-04-870669-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング