メディアクエリーでページ幅を調整する
「iPhone/Android Webサイト制作出張セミナー」のサイトは横幅が950pxあるので、画面が小さく解像度の低いスマートフォンで表示すると、文字が非常に小さく見づらくなります。
そこで、次のような専用のCSSを用意し、iPhone/Androidから閲覧した場合は左カラム（ナビゲーションメニュー）を非表示にし、右カラム（メインカラム）だけを表示するようにします。
#wrap {
width: 680px;
}
#areaSub {
display: none;
}
#content {
width: 650px;
}
左カラムは非表示に、右カラムと全体の幅を狭く変更する
ナビゲーション部分（#areaSub）のdisplayプロパティを「none」にすることで非表示にし、メインカラム（#content）や外側の枠（#wrap）の幅をスマートフォンに合わせて狭めます。外側の枠の横幅はiPhone 3GSの解像度（320ピクセル）に合わせるのが理想ですが、今回は680pxに設定して、後ほどViewportで画面サイズに合わせて縮小して表示します。
このCSSは、「メディアクエリー」を使ってスマートフォンから閲覧された場合にのみ適用します。
メディアクエリーとは
メディアクエリーは、出力する媒体（PC、印刷など）や画面解像度などの条件に合わせてスタイルを適用できるCSS3の機能です。メディアクエリーの指定方法はいくつかありますが、今回はCSSファイルにリンクするlink要素のmedia属性を使います。
まず、前に作成したiPhone/Android向けのスタイルを「iphone.css」などのファイルに書き込んで保存します。このファイルにリンクするにはhead要素に次のように記述します。
<link rel="stylesheet" href="_css/iphone.css">
メディアクエリーを使ってスマートフォンだけを対象に適用するには、media属性を付加して次のように記述します。
<link rel="stylesheet" href="_css/iphone.css" media="only screen and (max-device-width: 480px)">
この記述によってiphone.cssは、「画面への表示でかつ、端末の解像度が480px以下の場合」にのみ読み込まれます。max-device-widthは「媒体特性」と呼ばれる設定項目の1つで、以下のような種類があります。
| width、height | 解像度。PCのブラウザーなどの場合はウィンドウサイズで変化する |
| device-width、device-height | 端末の幅と高さ |
| orientation | portraitまたはlandscapeでブラウザーの縦横のどちらが長いかを指定する。スマートフォンにおいては本体の向きが縦か横かを判別できる |
| aspect-ratio、device-aspect-ratio | 幅と高さの比 |
| color | デバイスの色数の表示能力 |
| color-index | 端末のカラーテーブルのエントリ数 |
| monochrome | モノクロームフレームバッファにおける階調数 |
| resolution | 端末の解像度 |
| scan | TVでの操作処理方法を指定する（progressiveなど） |
| grid | グリッドベースの端末であることを示す |
これらの値を組み合わせて、スタイルを適用する対象を複雑な条件で絞り込めます。
なお、メディアクエリーを使ったlink要素は、メディアクエリーを解釈できないIE6～8ではそのまま読み込まれてしまう場合があります。そこで、以下のようにコンディショナルコメントを記述し、ブラウザーがIE以外の場合にだけ読み込むようにします。
<!--[if !IE]>-->
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="_css/iphone.css">
<!--<![endif]-->
メディアクエリーのそのほかの利用方法
今回はlink要素でメディアクエリーを利用しましたが、以下のような方法でCSSファイル内でも利用できます。
@importで適用する
CSS内で他のファイルを読み込む@importでは、次のようにメディアクエリーを利用できます。
@import url(color.css) screen and (max-device-width: 480px);
@mediaで利用する
CSSプロパティの定義部分では、@mediaでメディアクエリーを利用できます。
@media (max-device-width: 480px) {
}
