このページの本文へ

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

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

文●菊池 崇/Web Directions East

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

【Follow up】メディアクエリーを使いこなす

 メディアクエリー(Media Queries)は、デバイスの画像解像度やブラウザーのウィンドウサイズ・向きなどの指定条件にあわせて別々のCSSを適用するCSS3の機能です。

 CSS 2.1ではMedia Type(メディアタイプ)によって、CSSを適用するメディア(スクリーン、プリンターなど)を指定できました。たとえば、以下のように記述すると指定したCSSをパソコンの画面にだけ適用できます。

■HTMLのlink要素を利用してメディアタイプを指定する方法


<link rel="stylesheet" href="styles.css" media="screen">

■@mediaを利用してスタイルシート内でメディアタイプを指定する方法


@media screen { /* ここにCSSを記述 */ }

 メディアタイプにはscreen以外にも以下の表のような値が指定できます。

メディアタイプ意味
allすべてのデバイス
auralスピーチ
braille点字
embossed点字文書
handheldモノクロームの携帯電話
printプリンター
projectionプロジェクター
screenパソコンの画面
ttyテレタイプライター(ドット印字)
tvテレビ

 CSS3のメディアクエリーは、このメディアタイプをベースに、デバイスのウィンドウサイズやデバイスの向きなどの細かな条件を設定できるように拡張したものです。

メディアクエリーの指定方法

 メディアクエリーは、メディアタイプと同様に「link要素」と「@media」を利用した2つの方法で記述できます。

■link要素を利用する場合


<link rel="stylesheet" href=”desktop.css" media="[not|only]メディアタイプ[and](デバイスの条件)" />

■@mediaを利用する場合


@media [not|only]メディアタイプ[and](デバイスの条件){}

 メディアクエリーでは、「メディアタイプ」で指定しているデバイスの機能や状態を記述し、条件分岐文のように「真」か「偽」を判定してCSSを振り分けます。条件は「not」「only」「and」などのキーワードを使って記述します。キーワードの意味は下の表を参考にしてください。

キーワード意味
notではない
onlyのみ
andかつ

 「デバイスの条件」は、表のようなプロパティと値を対にして指定します。

プロパティ意味指定できる値
widthウィンドウの幅CSSで定義されている長さ(em/ex/ch/cm/mm/in/px/pt/pc)
heightウィンドウの高さCSSで定義されている長さ(em/ex/ch/cm/mm/in/px/pt/pc)
device-widthデバイスの実際のスクリーンの幅CSSで定義されている長さ(em/ex/ch/cm/mm/in/px/pt/pc)
device-heightデバイスの実際のスクリーンの高さCSSで定義されている長さ(em/ex/ch/cm/mm/in/px/pt/pc)
orientationオリエンテーションportrait または landscape
aspect-ratioウィンドウの縦横比widthとheightの比率(スラッシュ区切り)
device-aspect-ratioデバイスの縦横比widthとheightの比率(スラッシュ区切り)
colorカラーのビット数
color-indexカラーのチャンネル数
monochromeモノクロの諧調数
resolution解像度dpi/dpcm
scan走査線progressive または interlace
gridグリッドベースのデバイスdpi/dpcm

 widthやheightなどのプロパティには、「min-」(以上)または「max-」(以下)の接頭辞を付けられます。たとえば、パソコンのスクリーンで、デバイスのウィンドウサイズの横幅が500px以上の場合にdesktop.cssを適用するには以下のように書きます。


<link rel="stylesheet" href=”desktop.css" media="screen and (min-width:500px)" />

 パソコンのスクリーンかつデバイスのウィンドウサイズの横幅が500px以上、またはカラーかつプロジェクターの場合に、desktop.cssを適用するには以下のように書きます。


<link rel="stylesheet" href=”desktop.css" media="screen and (min-width:500px),projection and (color)" />

 パソコンのスクリーンかつデバイスのウィンドウサイズの横幅が500px以上でない場合、desktop.cssを適用するには以下のように書きます。


<link rel="stylesheet" href=”desktop.css" media="not screen and (min-width:500px)" />

 @mediaを利用してCSSドキュメント内にメディアクエリーを書く場合も条件の書き方は同じです。パソコンのスクリーンかつデバイスのウィンドウサイズの横幅が480px以上の場合に{ }内のCSSを適用するには以下のように書きます。


@media screen and (min-width : 480px;){
/*CSSを記述する*/}

 @mediaルールを利用する場合は、1枚のスタイルシートの中に複数のウィンドウサイズ向けのスタイルシートを記述します。link要素を利用して複数ファイルを読み込む方法に比べて、@mediaの方がHTTPリクエストの回数が少なく、ページの読み込みが早くなります。スマートフォンなどのモバイルデバイスを対象にする場合は、@mediaを使って書きましょう。

効率のいいメディアクエリーの書き方

 メディアクエリーは、「モバイルファースト」の考え方に沿って、スマートフォンなどの小さなスクリーンサイズ向けから記述します。

2-5-zu09-2.png

メディアクエリーの記述の順番

 メディアクエリーを指定していない部分のCSSには、最小幅0px以上のスタイルシートを指定します。スマートフォンに最適化したレイアウトの指定に加えて、デスクトップを含めたデバイスで共通で利用される、フォントの色や背景色などのベースとなるスタイルも指定します。

2-5-zu10.png

効率のよい記述の考え方

 メディアクエリーを使ったスタイルシートでは、メディアクエリーを指定していないデフォルトのスタイルシートとの差分を記述していきます。たとえば、1024px以上ではウィンドウサイズが大きくなるので、floatなどレイアウトに関連する指定を追加します。


@charset "utf-8";
/*最小幅0px以上*/
@media screen and (min-width:480px){
/*最小幅480px以上の指定*/
}
@media screen and (min-width:768px){
/*最小幅768px以上の指定*/
}
@media screen and (min-width:1024px){
/*最小幅1024px以上の指定*/
}

 ブラウザーはメディアクエリーの@media内のスタイルシートをすべて読み込んでいると考えられていますが、実際にはブラウザーは最初の@media screen and (min-width:px)の部分のみを読み込み、その後の読み込みを判定しています。たとえば、ウィンドウ幅が480px未満の場合、ブラウザーは以下の指定を読み込みません。


@media screen and (min-width:480px){}
@media screen and (min-width:768px){}
@media screen and (min-width:1024px){}

 メディアクエリーを効率よく記述することで、無駄なスタイルシートを読み込ませる必要がなくなります。

著者:菊池 崇(きくち・たかし)

著者近影

Web Directions East LLC代表。allWebクリエイター塾講師。米国にてマーケティングを専攻修了。貿易会社を経て、allWebにてXHTML+CSS基礎講座、XHTML+CSS中級講座、XHTML+CSS上級講座、microformats講座などの講師。オーストラリア、米国、カナダなどで開催されている世界的に有名なカンファレンス「Web Directions」の日本版である「Web Directions East」の発起人。

前へ 1 2 3 次へ

この連載の記事

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

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

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