CSSの作成
まずはヘッダーのCSSから作成しましょう。前に記述したHTMLは次のような内容でした。
■サンプル1[HTML]
<div data-role="page" id="index" data-theme="z">
<div data-role="header" data-theme="z">
<h1>HOUSEPLANT STORE</h1>
<h2>I LOVE HOUSEPLANT</h2>
<p>sample text sample text sampletext sample text sample text sample text</p>
</div>
(中略)
</div>
ところが、このページをSafariで開き、開発者メニューからWebインスペクタを起動すると、次のように表示されます。
Webインスペクタで確認したHTML
前のHTMLと比べると、class属性をはじめとするさまざまな属性が追加されているのが分かります。
jQuery Mobileは、カスタムデータ属性などの値に応じてJavaScriptでHTMLの内容を書き換え、実際に表示されるページを生成しています。場合によっては、原型をとどめないほどHTMLが書き換えられることもありますので、CSSはWebインスペクタなどで実際のHTMLを確認しながら記述しましょう。
- 参考：Safariの開発者メニューでスマートフォン開発
- http://blog.webcreativepark.net/2011/05/12-213145.html
ヘッダーのCSSは次のようになります。
■サンプル2[CSS]
/*
.ui-header
-------------------*/
.ui-body-z .ui-header{ ……【1】
background-image:url("./images/header-background.jpg");
-webkit-background-size:100% 104px; ……【2】
background-size:100% 104px; ……【2】
position:relative;
height:104px;
z-index:1;
}
.ui-body-z .ui-header::before{ ……【3】
content:url("./images/header-flag.png");
position:absolute;
left:5px;
top:0;
}
.ui-body-z .ui-header::after{ ……【3】
content:url("./images/header-reef-s.png");
position:absolute;
right:0px;
bottom:15px;
}
.ui-body-z .ui-header h1{ ……【4】
text-indent:-9999px;
background-image:url("./images/logo.png");
width:192px;
height:15px;
min-height:15px;
padding:0;
margin:23px auto 4px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2){ ……【4】
.ui-body-z .ui-header h1{
background-image:url("./images/logo@2.png");
-webkit-background-size:192px 15px;
background-size:192px 15px;
}
}
.ui-body-z .ui-header h2{
color:#6f5b00;
font-weight:normal;
font-size:12px;
text-align:left;
margin:0 auto;
width:192px;
}
.ui-body-z .ui-header p{
font-size:12px;
color:#4c8d00;
margin:0 125px 0 15px;
}
.ui-body-z .ui-content{
position:relative;
margin-top:-40px;
z-index:2;
}
/*
#index .ui-header
-------------------*/
#index.ui-body-z .ui-header{ ……【5】
background-image:url("./images/header-background-top.jpg");
background-size:100% 170px;
height:170px;
}
#index.ui-body-z .ui-header:after{
content:url("./images/header-reef.png");
bottom:20px;
}
#index.ui-body-z .ui-header h1{
margin-bottom:18px;
}
#index.ui-body-z .ui-header h2{
width:auto;
margin:0 auto 5px 15px;
}
#index.ui-body-z .ui-content{
margin-top:-50px;
}
少しずつ分割してポイントを解説します。ヘッダー全体に関わる部分から見てみましょう。
●.ui-body-zを起点にする
CSSセレクターは「.ui-body-z .ui-header」といった具合に、冒頭に「.ui-body-z」を付けて記述していきます【1】。
.ui-body-z .ui-header{ ……【1】
この.ui-body-zは、data-theme属性「z」を指定しているときにページ要素に自動的に付加されるclass属性です。.ui-body-zを起点にすることで、他のテーマ（たとえばdata-theme属性「a」）を適用したいときに、オリジナルテーマである「z」が干渉してデザインが崩れるのを防げます。
●背景画像の調整
【2】では、端末の向きによって画面幅が変わるスマートフォンの特性に対応するため、ヘッダーの背景に「background-size:100% 104px;」を指定しています。
-webkit-background-size:100% 104px; ……【2】
background-size:100% 104px; ……【2】
background-sizeプロパティは、背景画像のサイズを設定するCSS3のプロパティで、2つの値を与えると幅と高さを個別に設定できます。background-size:100% 104pxと指定すると、背景画像の幅は要素に対して100%に調整され、高さは104pxで固定されます。
多くのスマートフォンのブラウザーでは、portrait（縦向き）のときは横幅320pxで表示されますが、landscape（横向き）にすると端末のディスプレイサイズによって横幅がおおよそ400〜550px程度に変わります。あらかじめ横幅500px程度の大きな背景画像を用意しておく方法もありますが、今回は横幅320pxの画像を使い、横幅が広がったときはそのまま引き伸ばして、読み込むファイルサイズを軽くしています。
landscape時は引き伸ばして表示する
●before擬似要素／after擬似要素による画像の挿入
【3】では、ヘッダーの左上にある旗のマークの画像と、右下にある葉っぱのマークの画像をcontentプロパティで追加しています。
.ui-body-z .ui-header::before{ ……【3】
content:url("./images/header-flag.png");
position:absolute;
left:5px;
top:0;
}
.ui-body-z .ui-header::after{ ……【3】
content:url("./images/header-reef-s.png");
position:absolute;
right:0px;
bottom:15px;
}
iPhoneやAndroidでは、CSS3のセレクターである「::before」（before擬似要素）や「::after」と（after擬似要素）を利用し、要素の前後にcontentプロパティで画像やテキストを追加できます。
このとき、.ui-headerに「position:relative」を指定しておくと、追加した画像は「position:aboslute」で絶対位置が指定できます。HTMLは触らずに、画面の横幅に左右されない画像を配置できます。
●Retina displayへの対応
【4】は、iPhone 4のRetina displayに対応するためのCSSです。Retina displayとはiPhone 4に搭載されている超高解像度ディスプレイのことで、iPhone 3GS以前（320×480px）に比べて倍の解像度（640×960px）の画像を描画できます。
.ui-body-z .ui-header h1{ ……【4】
text-indent:-9999px;
background-image:url("./images/logo.png");
width:192px;
height:15px;
min-height:15px;
padding:0;
margin:23px auto 4px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2){ ……【4】
.ui-body-z .ui-header h1{
background-image:url("./images/logo@2.png");
-webkit-background-size:192px 15px;
background-size:192px 15px;
}
}
iPhone 4はiPhone 3GS以前と同じ画像でも問題なく表示しますが、Retinaディスプレイ専用の画像を用意することでより鮮明に表示します。以下の2つの画像の表示を比較すると、専用の画像を用意したほうが非常に鮮明に表示できるのが分かります。
Retina displayに対応した場合（左）と対応しない場合（右）
Retinaディスプレイに対応するには、CSS3のメディアクエリーを利用して、min-device-pixel-ratioが「2」の端末に対してのみCSSを適用します。min-device-pixel-ratioは端末のピクセル密度を表す値で、iPhone 4やAndroid端末の高解像度端末（IS03など）では値が「2」になります。min-device-pixel-ratioはベンダープリフィックスを付ける必要がありますので注意してください。
@media only screen and (-webkit-min-device-pixel-ratio: 2){
/*device-pixel-ratioが2の場合の指定*/
}
メディアクエリーの条件に合致する場合（min-device-ratioが2の場合）は、通常とは別の倍の解像度の画像を指定し、background-sizeで通常サイズに縮小することで、Retinaディスプレイに対応した画像が表示できます。
.ui-body-z .ui-header h1{
text-indent:-9999px;
background-image:url("./images/logo.png");/*通常サイズの画像*/
width:192px;
height:15px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2){
.ui-body-z .ui-header h1{
background-image:url("./images/logo@2.png");/*倍の解像度の画像*/
-webkit-background-size:192px 15px;/*通常サイズ*/
background-size:192px 15px;/*通常サイズ*/
}
}
なお、Android端末では「device-pixel-ratio」が1.5のデバイスも多数存在しますが、1.5倍の解像度では計算値が複雑になるので、「device-pixel-ratio」が2の場合だけ指定するのが一般的です。
また、Retinaディスプレイに対応すると倍の解像度の画像が表示されることになるので、ファイルサイズは元の画像の4倍近くになり、読み込みに時間がかかってしまいます。そのため、ロゴ部分など、どうしても綺麗に見せたいところだけ対応するとよいでしょう。
●特定ページに対するCSSの指定
#index.ui-body-z .ui-header{ ……【5】
background-image:url("./images/header-background-top.jpg");
background-size:100% 170px;
height:170px;
}
今回のサンプルでは、トップページと詳細ページのヘッダーの内容が異なるので、詳細ページ向けのスタイルは「.ui-body-z」から始まるセレクターに記述し、トップページ向けのスタイルは「#index.ui-body -z」から始まるセレクターに記述することでCSSを上書きしています。ページIDを利用してスタイルを切り分けるテクニックは便利ですので、覚えておくとよいでしょう。
以上でヘッダー部分のCSSは完成しました。
