Viewportを調整する
メディアクエリーを使ってページの幅は調整できましたが、実際にiPhoneで確認してみると右側に余白がある状態で表示されます。これはViewportにより、デフォルトでは横幅980ピクセルの仮想ウィンドウを縮小した状態で表示されるためです（関連記事）。
そこで、次のような記述をhead要素に追加して、Viewportを適切な値に設定します。
<meta name="viewport" content="width=680; initial-scale=0.47; user-scalable=yes">
スマートフォン専用サイトではwidthをdevice-widthに設定しましたが、今回はCSS（iphone.css）で設定した値と同じ680ピクセルに固定しています。基本的にはこれでディスプレイが680ピクセル想定になり、正しく表示されるはずですが、iPhoneでは初期の倍率を指定する「initial-scale」の値を「1」にすると、widthの指定が無効になります。これはどうやらiPhoneのバグのようです。そこで、現状ではinitial-scaleは320/680*100=47%で「0.47」と指定しておきます（Androidでもこのままで正しく表示されました）。また、「user-scalable」を「yes」に設定しているので、ユーザーが自由に拡大できます。
見出しとナビゲーションを兼用するパネル
スマートフォン向けのiphone.cssでは左カラムを非表示にしたので、この状態ではページ内にナビゲーションが存在していません。スマートフォン向けのナビゲーションを新たに作成しても構いませんが、今回は1ページのみのサイトなので、見出しとナビゲーションを兼用するパネル型のUIを実装してみましょう。本文をいったん隠しておき、各見出し部分をタップすると本文が縦方向に展開して表示されるようにします。
アコーディオンパネルでタイトルとナビゲーションを兼用する
まず、次のようなCSSで本文を隠します。
article:not(.display) {
display: none;
}
HTMLでは本文をarticle要素でマークアップしているので、基本的にはarticleのdisplayプロパティをnoneに変更するだけです。ただし、「はじめに」という項目の本文だけは最初から表示させておきたいので、「はじめに」のartilce要素には「display」というclass名を付けておき、CSS3の:notセレクターを使って.displayを除外しています。
続いて、JavaScriptを使って見出し部分をタップしたときの処理を記述します。今回はjQueryを利用して記述します。
$('h2').click(function() {
$(this).next().slideToggle('fast');
});
h2要素をクリックしたとき、HTMLで自身（this）の次に登場する要素（ここではarticle要素）を、スライドダウンのエフェクトで表示させます。これによって、非表示だった本文部分がスライドしながら表示されます。slideToggle()は表示／非表示を交互に切り替えるメソッドですので、もう一度タップすると今度は本文が隠れます。こうして、見出しとナビゲーションを兼用するパネルができました。
タイトル画像を調整する
「iPhone/Android Webサイト制作出張セミナー」のサイトは、タイトル画像をページ幅いっぱい（幅948ピクセル）で作成してあるので、そのままではスマートフォンで表示しきれません。そこで、以下のようにスマートフォン向けに幅665ピクセルに縮小したタイトル画像を用意します。
PCサイト用の画像。948ピクセルで作成
スマートフォン用の画像。幅665ピクセルで作成
次に、jQueryを使って画像を切り替える処理を記述します。
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) {
$('h1>img').attr('src', '_images/ttl_main_mini.png').attr('width', '665').attr('height', '217');
}
条件分岐のプログラムは前回解説したとおり、スマートフォンからのアクセスをユーザーエージェントを見て判別しています。条件に合致した場合に、h1要素内のimg要素、つまりタイトル画像のsrc、width、height属性をそれぞれ書き換えています。
CSSを使った画像の切り替え
本文ではjQueryを使った方法を紹介しましたが、CSSとメディアクエリーを使って切り替えることもできます。その場合は、HTMLではスマートフォン用とPC用のタイトル画像を並べて配置して、スタイルシートで隠しておきます。たとえば、class属性に「iphone」と指定して、displayプロパティで非表示にします。
<h1>
<img src="_images/ttl_main.png" alt="1日集中！ iPhone/Android Webサイト制作出張セミナー" width="948" height="309">
<img class="iphone" src="_images/ttl_main_mini.png" alt="1日集中！ iPhone/Android Webサイト制作出張セミナー" width="665" height="217">
</h1>
.iphone {
display: none;
}
次に、メディアクエリーで読み込んだスマートフォン専用のスタイルシート（iphone.css）で、.iphoneのdisplayプロパティを変更します。
.iphone {
display: block;
}
同時に、PC用のタイトル画像を非表示にします。
h1>img {
display: none;
}
「>」はCSS3のセレクターで、「一番初めの子要素」という意味です。ここでは、h1要素内で初めに登場するimg要素、つまりPC向けのタイトル画像に絞り込めます。
これで、タイトル画像をPCとスマートフォンとで切り替えられました。ただし、この方法はCSSが利用できない環境（音声ブラウザーなど）ではタイトルが2回存在することになり、あまり好ましくありません。スクリプト言語が利用できない環境などでの妥協策として利用しましょう。
PHPを使った画像の変更
本文では、スマートフォン用の画像を別途用意していましたが、PHPなどのサーバーサイドのスクリプト言語を利用すると、より柔軟な運用ができます。たとえばPHPには画像をプログラムで加工できる「GDライブラリ」という仕組みがあり、画像のサイズをプログラムだけで変更できます。
GDライブラリの利用方法はサーバーの設定によって異なり、利用方法も高度なのでここでの説明は割愛します。ほかにも、FlickrやPicasaなどのオンラインアルバムサービスのAPIを使ったり、WordPressなどのCMSと組み合わせたりして、画像サイズを自動的に変更する方法もあります。
