このページの本文へ

CSS+jQueryでクロスデバイスサイトを作ろう (2/4)

2010年10月18日 10時01分更新

文●たにぐちまこと/H2O Space.

  • この記事をはてなブックマークに追加
本文印刷

メディアクエリーでページ幅を調整する

 「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端末の幅と高さ
orientationportraitまたはlandscapeでブラウザーの縦横のどちらが長いかを指定する。スマートフォンにおいては本体の向きが縦か横かを判別できる
aspect-ratio、device-aspect-ratio幅と高さの比
colorデバイスの色数の表示能力
color-index端末のカラーテーブルのエントリ数
monochromeモノクロームフレームバッファにおける階調数
resolution端末の解像度
scanTVでの操作処理方法を指定する(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) {
}


この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く