忍者ブログ

とりあたまログ

Home > css > Media TypeとMedia Queries

Media TypeとMedia Queries

Media Type


以下のような記述でスタイルシートの対象メディアタイプを特定する。
@import url("fancyfonts.css") screen;
@media print {
/* 印刷用のスタイルシートがここに入る */
}

<link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css" />


認識されるメディアタイプ


handheld:携帯端末
print:ページ素材を対象とした、または印刷プレビューモードの画面表示
screen:主としてコンピュータのカラー画面
他にall, braille, embossed, projection, speech, tty, tvがある。

Media types - CSS 2.1 spec (ja)

Media Queries


メディアクエリは、メディアタイプと、特定のメディア特性に関する条件を比較する0以上の式から構成される。

記述例
<link rel="stylesheet" media="screen and (color)" href="example.css" />

@import url(color.css) screen and (color);


カンマは論理式のORを表し、‘and’キーワードは論理式のANDを表す。
@media screen and (color), projection and (color) { … }


論理式のNOTは、‘not’キーワードで表すことができる。
<link rel="stylesheet" media="not screen and (color)" href="example.css" />


古いユーザーエージェントにスタイルシートを解釈させないために、‘only’キーワードを使用できる。
<link rel="stylesheet" media="only screen and (color)" href="example.css" />


メディア特性


width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid

ほとんどのメディア特性は‘min-’または‘max-’といったオプションの接頭辞を受け入れ、"~以上"や"~以下"という制限を表現できる。

Media Queries (ja)

IEへの対応


css3-mediaqueries.jsを使えばIEでもMedia Queriesが使える。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

拍手[0回]

PR
コメント
お名前
タイトル
メールアドレス
URL
コメント
パスワード

カレンダー

03 2020/04 05
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30

バーコード

ブログ内検索