CSS - @media

トップ > CSSリファレンス > @media

概要

ルール名 @media
構文
@media ( condition ) [and ( condition )]... [, ...]
@media media_type [and ( condition )]... [, ...]

説明

@media により、スタイルシートを適用する条件を指定することができます。例えば、スマートフォンサイズの場合と、PCディスプレイサイズの場合で、適用するスタイルシートを変更することができます。

メディアタイプ

出力の対象メディアを指定します。下記の例では、em要素を、ディスプレイ(screen)の場合は赤色、印刷(print)の場合は太字で出力します。

CSS
@media screen {
  em { color: red; }
}
@media print {
  em { font-weight: bold; }
}

メディアタイプには下記などがあります。screenprint 以外はまだ対応ブラウザは少ないようです。

メディアクエリ

@media に続けて、下記の様に条件を記述することもできます。条件には andnot を指定できます。カンマ(,)は or の意味になります。

CSS
/* 幅が 767px 以下であれば */
@media (max-width:767px) { ... }

/* 幅が 768px 以上であれば */
@media (min-width:768px) { ... }

/* 幅が 768px以上 1200px以下であれば */
@media (min-width:768px) and (max-width:1200px) { ... }

/* カラーディスプレイまたはモノクロ印刷であれば */
@media screen and (color), print and (monochrome) { ... }

条件には下記などの属性を指定することができます。(min-/max-) とあるものは、min-width, max-width などのように最少/最大のプレフィックスをつけることができます。

特性min-/max-説明
width表示の横幅。連続メディアの場合はスクロールバーを含むビューポートの横幅。ページ型メディアの場合はページボックスの横幅。
height表示の高さ。連続メディアの場合はスクロールバーを含むビューポートの高さ。ページ型メディアの場合はページボックスの高さ。
device-width表示の横幅。連続メディアの場合は画面の横幅。ページ型メディアの場合はページシートの横幅。
device-height表示の高さ。連続メディアの場合は画面の高さ。ページ型メディアの場合はページシートの高さ。
orientationheightwidth より大きければ portrait、さもなくば landscape
aspect-ratioheight に対する width の比率。
device-aspect-ratiodevice-height に対する device-width の比率。
colorカラーコンポーネントのビット数。カラーでない場合は 0。
color-indexカラー参照テーブルの項目数。
monochrome白黒デバイスの1ピクセルあたりのビット数。カラー端末の場合は 0。
resolution解像度(例:300spi)。
scanTVの走査方式。progressive など。
gridTTY や電話ディスプレイなどの固定文字幅グリッド端末であれば 1、さもなくば 0。
CSS
/* 横幅が 767px 以下であれば */
@media (max-width:767px) { ... }

/* 高さが 600px 以上であれば */
@media (min-height: 600px) { ... }

/* 画面が縦長であれば */
@media (orientation: portrait) { ... }

/* カラー端末であれば */
@media (color) { ... }

/* モノクロ端末であれば */
@mdeia (monochrome) { ... }

/* 解像度が 300dpi 以上であれば */
@media (min-resolution: 300dpi) { ... }

IE8対応

IE8 はメディアクエリに対応していませんが、下記を利用することで擬似的にメディアクエリを実現することができます。

HTML
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年12月27日
http://www.tohoho-web.com/css/rule/media.htm