ネストされたリストのテーマ設定

ネストされたリストにページテーマと異なるテーマを適用すると、子ページの表示に一貫性が失われます。この手法では一貫性を維持するテーマ設定方法を解説します。

実装手順

<div id='container' data-role='page' data-theme='a'>
  <header data-role='header' data-theme='a'>
    <h1>映画一覧</h1>
  </header>
  <section data-role='content'>
    <ul data-role='listview' data-header-theme='a' data-theme='b'>
      <li><a href='#'>監督A</a>
        <ul data-theme='a'>
          <li data-theme='b'><a href='#'>作品X</a></li>
          <!-- 追加項目 -->
        </ul>
      </li>
    </ul>
  </section>
</div>

動作原理

親リストにdata-theme='b'を適用し、ネストされたリストに明示的にdata-theme='a'を設定します。各子アイテムにはdata-theme='b'を指定することで、親ページと子ページの背景テーマを統一します。

カスタム背景の適用

アプリケーションに独自の背景スタイルを適用する手法です。

実装手順

<style>
.orange-header {
  background: linear-gradient(#f7e0bb, #f7bd5e);
  border: 1px solid #e3b264;
}
.orange-content {
  background: linear-gradient(#fef9f1, #f2d5a6);
}
</style>

<div data-role='page' class='orange-content'>
  <header data-role='header' class='orange-header'>
    <h1>オレンジ背景</h1>
  </header>
</div>

動作原理

CSSクラスで背景グラデーションを定義し、ページ要素に適用します。ベンダープレフィックス付きのグラデーション定義により、クロスブラウザ対応を実現します。

カスタムフォントの統合

jQuery Mobileのデフォルトフォントをカスタマイズする手法です。

実装手順

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'/>

<style>
@font-face {
  font-family: 'CustomFont';
  src: url('fonts/custom-font.woff');
}
.ui-header h1 {
  font-family: 'Open Sans', sans-serif;
}
.custom-text {
  font-family: 'CustomFont';
}
</style>

動作原理

Google FontsからWebフォントをインポートし、@font-faceでローカルフォントを定義します。要素セレクタでフォントファミリーを指定して適用します。

角丸スタイルのカスタマイズ

UI要素の角丸スタイルを制御する手法です。

実装手順

<div data-role='page'>
  <header class='ui-corner-top'>...</header>
  <div class='ui-corner-tl'>左上角丸</div>
  <div class='ui-corner-br'>右下角丸</div>
  <footer class='ui-corner-bottom'>...</footer>
</div>

動作原理

jQuery Mobileが提供する角丸用CSSクラス（ui-corner-*）を要素に適用します。方向指定クラスで個別の角丸スタイルを制御できます。

グローバルアクティブ状態の上書き

ボタンのアクティブ状態の既定スタイルをカスタマイズする手法です。

実装手順

<style>
.ui-btn-active {
  background: linear-gradient(#a1ff93, #14b800);
  border: 1px solid #137000;
}
.ui-focus {
  box-shadow: 0 0 12px #37bf37;
}
</style>

動作原理

.ui-btn-activeクラスをオーバーライドし、アクティブ状態のグラデーションとボーダーを変更します。フォーカス状態のボックスシャドウも同時にカスタマイズします。

既存カラースウォッチの上書き

ボタンホバー効果のカスタマイズ手法です。

実装手順

<style>
.ui-btn-hover-a {
  background: linear-gradient(#7ad66f, #41a343);
  border-color: #115e00;
}
</style>

動作原理

スウォッチA用のホバークラス.ui-btn-hover-aを再定義します。グラデーションとボーダーカラーを変更することで、ホバー時の視覚効果をカスタマイズします。

ThemeRollerツールの活用

カスタムカラースウォッチを生成するための公式ツールの使用方法です。

操作手順

1. ThemeRollerウェブツールにアクセス
2. カラーピッカーでコンポーネントの色を設定
3. Adobe Kulerパレットから色をインポート可能
4. プレビュー確認後ダウンロード

生成コード構造

<link rel='stylesheet' href='themes/custom-theme.css'/>
<link rel='stylesheet' href='jquery.mobile.structure.css'/>

活用メリット

構造CSSとテーマCSSを分離することで、テーマのメンテナンス性と拡張性が向上します。生成したテーマは共有リンクで他者と共有可能です。