読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQuery Mobileでテーマを利用する。サイトデザインをGUIで設定できるThemeRollerについて。

<スポンサーリンク>

jQuery Mobileのスウォッチ

jQuery Mobileにはテーマというのが用意されていて、テーマにはスウォッチを設定することができる。
テーマにスウォッチを設定することで、簡単にデザインを適用することができるようになっている。

スウォッチとはヘッダ/フッタ/コンテンツ部分やボタンの背景などの、パーツごとに個別の設定可能ないろの組み合わせのこと。
スウォッチはデフォルトでは標準のテーマが使用される。
標準のテーマというのは、下にも書いてあるa〜eの5つのスウォッチのことで、スウォッチごとにデフォルトの背景色などが異なる。
ヘッダ/フッタにはスウォッチ「a」が適用される。コンテンツ部分にはスウォッチ「c」が適用される。
aは黒の背景。cはグレーである。
簡単に並べると・・・

  • a:最も強調したい部分のこと。デフォルトは黒。
  • b:2番目のレベル。デフォルトは青。
  • c:基本レベル。デフォルトはグレー
  • d:bの代替。デフォルトは薄いグレー。
  • e:アクセントとして使用。デフォルトは黄色。

スウォッチを設定する方法

各要素にスウォッチを設定するには、data-theme属性にスウォッチ名を指定する。

<div data-role="page" data-theme="a">

みたいな感じ。

jQuery MobileのThemeRollerを使えば、GUIjQuery Mobileのテーマを設定できる。

jQuery Theme Roller
いじっているとなんとなく分かるんだけど、左側の「A」「B」「C」とかで、スウォッチを選択して、ボタンとかヘッダーの色とかを設定できる。
で、上の方にある「Download」ボタンを押せば、cssをダウンロードできるので、それを使う。

また、上の「Import」ボタンを押せば、自分が今使っているテーマを編集することもできる。

読んだ本

かんたん7ステップ きほんからわかる jQuery Mobileコーディング

かんたん7ステップ きほんからわかる jQuery Mobileコーディング