前回の続きで、jQuery Mobileのスタイルを実際に書き換えてみたいと思います。
data-theme=""をjQuery Mobileで用意されているアルファベット以外を使えば
cssはまっさらなな状態になるんですね。

htmlを用意

ソースは基本的にhtml5で記述。
jQuery Mobileにカスタムデータ属性を用いてヘッダー、コンテンツ、フッターを定義します。

 

  

		

			
uiのスタイルを変えたい。
		
		

			
コンテンツの内容
		
		

			
copyright@shiovo
		
	

実際ブラウザに表示された状態でソースを見てみると
下記のようにbodyとヘッダー、フッターに「ui-body-s」「ui-bar-s」というdeta-themaで指定したテーマに合わせたクラスが自動で付与されています。

cssの上書き

あとは適当なcssファイルを用意して、お好きなデザインを適用させましょう。

.ui-body-s{
	background-color:#333;
	color:#fff;
	
}
.ui-bar-s{
	background: -moz-linear-gradient(top, #990, #066);
	background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));
	color:#fff;
}

jQuery MobileのUIをガッツリ使うけど、色見などを少しカスタマイズしたい場合はこれでいけるんじゃないでしょうか。
逆にテンプレート感を出さずバリバリデザインしたい場合は data-role="header"などのカスタム属性を指定しないのが良いのかなぁ。
まだまだ何が正解か手さぐり状態です。