フッターのCSS
アコーディオン部分が終わったら、コンテンツ領域のCSSは完成です。次に、フッターのCSSを設定します。フッターのHTMLは次のように変更されています。
<div data-role="footer" data-theme="z">
<small>Copyright © 2011 ASCII MEDIA WORKS. All rights reserved.</small>
</div>
↓
<div data-role="footer" data-theme="z" class="ui-footer ui-bar-z" role="contentinfo">
<small>Copyright © 2011 ASCII MEDIA WORKS. All rights reserved.</small>
</div>
上のHTMLに対して次のようなスタイルを適用します。
/*
.footer
-------------------*/
.ui-body-z .ui-footer{
background-image:url("./images/footer-background.jpg");
background-size:100% 64px;
height:64px;
}
.ui-body-z .ui-footer small{
margin-top:40px;
font-size:10px;
color:#504510;
text-align:center;
display:block;
}
.ui-body-z .ui-footer small:before{
content:url("./images/footer-reef.png");
padding-right:1em;
}
基本的なCSSなので特に難しい点はないでしょう。背景画像はヘッダーと同じようにbackground-sizeを利用してデバイスの横幅にフィットさせています。
フッターのデザイン
詳細ページのモーダルウィンドウ
最後に、詳細ページで画像をタップすると表示されるモーダルウィンドウです。モーダル部分のHTMLは次のようになっています。
<div data-role="page" id="img" class="modal" data-theme="z">
<a href="#detail" data-rel="back"><img src="./images/image01.jpg" alt=""></a>
</div>
↓
<div data-role="dialog" id="img" class="modal ui-page ui-body-z ui-dialog ui-page-active" data-theme="z" data-url="img" tabindex="0" role="dialog" style="min-height: 821px; ">
<a href="" class="ui-link" data-transition="pop" data-direction="reverse"><img src="./images/image01.jpg" alt=""></a>
</div>
これに対して次のようなCSSを適用します。
/*
.modal
-------------------*/
.ui-body-z.modal{
background-image:url("./images/background.jpg");
}
.ui-body-z.modal a{
position:absolute;
left:50%;
top:50%;
}
.ui-body-z.modal a img{
margin-top:-50%;
margin-left:-50%;
max-width:100%;
max-height:100%;
}
a要素に対してposition:absoluteのletf:50%とtop:50%、img要素に対してmargin-top:-50%とmargin-left:-50%を指定することで画像を中央に表示しています。また、画像がウィンドウからはみ出さないように、max-width:100%とmax-height:100%をそれぞれ指定しています。
画像をタップするとモーダルウィンドウで拡大した画像が表示される
以上で、サンプルサイトが完成しました。完成したサイトは以下から閲覧できます。
CSSを高度にカスタイズすることで、jQuery Mobileでも独自デザインのスマートフォンサイトを制作できます。
実務ではまる落とし穴：
iPhoneで横向きにすると拡大される！
サンプルサイトをiPhoneで開き、端末をlandscapeモード（横向き）にすると、ページが拡大されて表示されます。
この問題はiPhoneの仕様で、meta要素のviewportを次のように変更すると問題を回避できます。
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
これでlandscapeモードでも拡大されず、画面幅にぴったりフィットして表示されます（サンプル3）。
viewportを変更してlnadscapeで確認した状態
ただし、viewportに「maximum-scale=1」を指定すると、ピンチイン／ピンチアウト操作によるページの拡大・縮小ができなくなるデメリットがあります。事前にどちらを優先するか決めておく必要があるでしょう。
著者：西畑一馬（にしはた かずま）
to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「Web制作の現場で使う jQueryデザイン入門」（アスキー・メディアワークス刊）がある。
鍋坂 理恵 (なべさか りえ）
Photo and Design sonsun代表。香川県生まれのWebデザイナー。Web制作会社にてWebデザイン、各種制作を経て独立。Webサイトの企画・デザイン・制作を行っている。Web Desgining 2011年4月号、2011年2月号、4月号にてCSS3の記事執筆。Webridge Kagawa／CSS Nite in TAKAMATSU副代表。Web制作者・担当者向けセミナー開催に携わっている。
