メディアクエリ

レスポンシブWebデザインではメディアクエリを用いて各種デバイスへ切り替えます。
メディアクエリを使用することで、画面サイズに最適なスタイルを適応させることができます。

CSS3メディアクエリとは

CSS2のメディアタイプではscreenやprintなどのメディアタイプを利用してメディアごとにスタイルシートを指定することができました。

<link rel="stylesheet" href="print.css" media="print">

このソースのmedia=”print”のprintがメディアタイプにあたります。このメディアタイプに当てはまるデバイスのときに指定されたCSS(ここではprint.css)を読み込みます。つまり上記のソースでは「プリント出力のときにprint.cssを読み込む」という命令が実行されます。

CSS3のメディアクエリは、このメディア機能をより拡張して細かな指定を行えるようにしたいものです。メディアタイプとメディア特性に関する条件を調べる式から構成されます。

<link rel="stylsheet" href="pc.css" media="screen and (min-widht:960px)">

このソースではメディアタイプがSCREEN、、メディア特性はmini-widthとなります。
「デバイスがスクリーンで表示領域の幅が960以上の場合にPC.cssを読み込む」という命令が実行されます。

メディアタイプ

CSS2で定義されているメディアタイプには以下のような種類があります。

メディアタイプ デバイスの種類
screen スクリーン
tty テレタイプなどの文字幅が固定されているデバイ
tv 家庭用テレビ
projection プロジェクタ
handheld 携帯電話(フィーチャーフォン)
print プリンタ出力
braille 点字出力ディスプレイ
emboss 点字出力プリンタ
aural 音声ディスプレイ
all すべてのデバイス

メディア特性

CSS3で定義されているメディア特性は以下の通りです。また一部を除くメディア特性には、

  • 最大値を表すmax-前置修飾子
  • 最小値を表すmin-前置修飾子

をつけて使用することができます。

メディア特性 情報 max- / min-の使用
width 表示領域(ビューポート)の幅
height 表示領域(ビューポート)の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
×
aspect-ratio 表示領域のアスペクト比
devaice-aspect-ratio デバイスのアスペクト比
color カラー環境での色ビット数
color-index 端末で対応する色のパレット数
monochrome 白黒・グレイスケール環境での色ビット数
resolution 解像度
scan テレビでの走査方式
×
grid 文字格子メディアか否かの指定
×

Internet Explorer8以下でメディアクエリを動かすには

Internet Explorer8以下ではメディアクエリに対応していません、しかしrespond.jsやcss3-mediaqueries-jsなどのJavaScriptを使用することで対応させることができます。

 

>>テスト環境を考える

広島 ホームページ制作 フィズコミュニケーションズ