このページの本文へ

DESIGN ゼロから始めるレスポンシブWebデザイン入門 ― 第6回

メディアクエリーの設定とグリッドデザインの導入

2012年07月09日 11時35分更新

菊池 崇/Web Directions East

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

この連載が本になりました!

本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。

レスポンシブWebデザイン
マルチデバイス時代のコンセプトとテクニック

定価:2,625円 (本体2,500円)/形態:B5変 (232ページ)
ISBN:978-4-04-886323-0

 前回までで幅320pxの画面を基準としたCSSが完成しました。今回は、タブレットやデスクトップなどの大きなスクリーンでも閲覧しやすいように、メディアクエリーを使ってCSSを切り替えるようにします。また、大画面用のレイアウトのためにグリッドデザインの考え方も導入します。

メディアクエリーの設定

 レスポンシブWebデザインでは、「メディアクエリー」を使って画面幅に応じてCSSを切り替えます。メディアクエリーとは、デバイスの画像解像度・ウィンドウの幅・向きなどの指定条件にあわせて別々のCSSを適用できる機能です。

 メディアクエリーを使ったCSSの切り替えでは、CSSを切り替える条件である「ブレイクポイント(Break Point)」を決め、それぞれの条件に沿ったスタイルシートを記述していきます。

ブレイクポイントの決定

 ブレイクポイントとは、メディアクエリーによってCSSを切り替える条件となるポイントのことで、ブラウザーのウィンドウ幅(px)で考えます。デバイスに依存しないのがレスポンシブWebデザインの原則ですが、ユーザーが使うであろうデバイスを念頭に、以下の表のようにブレイクポイントを決めます。

対象デバイスのイメージブレイクポイント備考
iPhoneのポートレート(縦向き)320pxデフォルトのCSS
iPhoneのランドスケープ(横向き)480px
iPadのポートレート768px
デスクトップPC1024px

 「枝豆隊」の場合はシンプルなサイトですので、ブレイクポイントを768pxと1024pxに設定します。幅767pxまではデフォルトのレイアウト(1段組み)のままで、幅768px〜1023pxのときは1段組のまま文字を左寄せに、1024px以上のときはレイアウトを2段組にしてコンテンツの位置や画像サイズを変えてみましょう。

2-5-zu01.png
480px未満、480px以上768px未満、768px以上1024px未満のブレイクポイントしたときのレイアウト表示

 ブレイクポイントを以上のように設定したので、それぞれのブレイクポイントごとにメディアクエリーを指定していきます。

画面幅768px以上の指定

 画面幅768px以上、1024px未満の場合、以下のように指定します。


@media screen and (min-width : 768px){
/* ここに768px〜1023pxまでのCSSを記述*/ 
}

 メディアクエリーの中に書いたCSSは条件に合致する場合にのみ適用されます。すでに書いてある幅320px用のCSSの後に768px用のメディアクエリーを書けば、画面幅が768pxの場合にのみCSSを上書きできます。

 枝豆隊では文字を左寄せに変更するだけですので、以下のように記述します。

サンプル1[CSS:style.css]


/*768px*/
@media screen and (min-width : 768px){
#contents { text-align : left}
}

 これで、768〜1023pxの場合にのみ、#contents内のテキストが左寄せになります。実際にブラウザーの横幅を768pxにして表示すると図のようになります。

2-5-zu02.png
768pxで表示したところ。中央寄せだった文字が左寄せになる

画面幅1024px以上の指定

 画面幅1024px以上の場合にだけCSSを適用したい場合は以下のように指定します。


@media screen and (min-width : 1024px) {
/* ここに1024px以上のCSSを記述*/ 
}

 1024px以上では、ここまでの1段組みのレイアウトから2段組のレイアウトへ大幅に変更します。少し複雑ですので詳しく解説しましょう。

Web Professionalトップページバナー

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

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

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

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

ランキング