画面サイズに合わせた CSS を適用する、CSS のメディアクエリ (media query)
ウェブページを印刷すると、画面で見たよりも印刷に適したページが印刷された、という経験があるかたもいると思います。
画面で見たウェブページと印刷したときの違い。
これがなぜ発生するかというと、スタイルシートを指定する場合にメディアを指定してあり、スクリーン用の CSS と印刷用の CSS を使い分けているのです。
こうしたメディア指定は CSS2 で導入されました。
具体的には画面の CSS には media="screen" を、印刷用の CSS には media="print" を指定します。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
type="text/css"
href="cssmedia-test-desktop.css"
media="screen"/>
<link rel="stylesheet"
type="text/css"
href="cssmedia-test-printer.css"
media="print"/>
</head>
<body>
<h1>Hello, world!</h1>
<p>ここでは CSS
のメディア指定についてテストします。 </p>
</body>
</html>
こうすると、スクリーン上で次のように表示されているときでも・・・
印刷 (プレビュー) では次のように表示されたりします。
こうした見え方の違いはそれぞれの CSS で指定しているのです。
CSS3 のメディアクエリー
CSS3 ではメディアの指定方法がよりきめ細かく指定できるようになりました。
先に具体例を見てください。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
type="text/css"
href="cssmedia-test-mobile.css"
media="screen and (max-width:350px)"/>
<link rel="stylesheet"
type="text/css"
href="cssmedia-test-desktop.css"
media="screen and (min-width:351px)"/>
</head>
<body>
<h1>Hello, world!</h1>
<p>ここでは CSS の
メディアクエリ (media query) についてテストします。 </p>
</body>
</html>
スタイルシートの指定場所を抜き出すと次の部分です。
<link rel="stylesheet"
type="text/css"
href="cssmedia-test-mobile.css"
media="screen and (max-width:350px)"/>
<link rel="stylesheet"
type="text/css"
href="cssmedia-test-desktop.css"
media="screen and (min-width:351px)"/>ここでは同じく screen メディアに対する CSS を指定していますが、上側の CSS 指定は max-width を 350px に、下側は min-width を 351px に、それぞれ指定しています。
前者は screen メディアでかつ最大幅 350px の時 (すなわちそれ以下の幅の時) に CSS ファイルである cssmedia-test-mobile.css を使用することを指定しています。
後者は screen メディアでかつ最小幅 351px の時 (すなわちそれ以上の幅の時) に CSS ファイルである cssmedia-test-desktop.css を使用することを指定しています。
具体的には上記のページを表示したときに次のように表示されているとします。
画面の幅を狭くしていき、350px 以下になったときに次のように表示されます。
このように CSS3 ではメディアのタイプだけではなく、メディアの条件まで指定して適切な CSS を適用できます。これをメディアクエリー (media query) といいます。
携帯端末向けのサイトを構築する場合はメディアクエリを上手に利用して、各種端末に適合するようにします。