継続は力なり＃４３

2020年4月15日 22:20

メディアクエリー

出力する媒体や状態ごとに、適用するCSSを変えることができる表示領域の幅などに応じてCSSを変えられる便利な機能

メディアクエリーとは

link要素やstyle要素には「media属性」が指定できる
media属性は、CSSの適用対象とする出力媒体を限定したい場合に使用するもの

以下が指定できる

・all（全ての機器）
・screen（パソコン画面）
・print（プリンタ）
・projection（プロジェクタ）
・tv（テレビ）
・handheld（携帯機器（画面が小さく回線容量も小さい機器））
・tty（文字幅が固定の端末（テレタイプやターミナルなど））
・speech（スピーチ・シンセサイザー（音声読み上げソフトなど））
・brille（点字ディスプレイ）
・embossed（点字プリンタ）

CSS3での拡張点

出力媒体の種類だけどなくその媒体の「特徴や状態」を示す式も書き込める
例として、ウィンドウの幅が640ピクセルよりも小さければこのCSSを適用し、640ピクセル以上であればこのCSSを適用する、といった指定が可能になる
出力媒体の特徴の特性や状態を式にあらわして適用するCSSを指定できる昨日のことを「メディアクエリー」という

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

指定可能な出力媒体の特徴（メディア特性）には以下のものがある

これらのメディア特性には、CSSのプロパティと同様の書式で値を指定して使う
（値をつけずにメディア特性だけで指定できるものもある）
値にはCSSで指定できるものと同じ単位が指定できる
例として、「min-width:　640px」のように書けば「表示領域の幅が640ピクセル以上」という意味になる

出力媒体の指定

メディアクエリーの書き方について

CSS2.1でも使用可能だった出力媒体は、例として link要素や style要素の media属性で以下のように指定した

例

CSS

media="出力媒体"
media="出力媒体,　出力媒体"

⬇️

CSS

media="screen"
media="screen, print"

メディアクエリーを使用する場合、出力媒体の後に必要な数だけ「and（メディア特性：値）」を追加して条件を加えていく
「出力媒体」と「メディア特性：　値」の式が全て成り立つ場合にのみCSSが適用されることになる
これまで同様にカンマで区切って複数の出力媒体（および and (メディア特性：値)）を指定することもできる

例

CSS

media="出力媒体　and　（メディア特性：　値）"
media="出力媒体　and　（メディア特性：　値）　and　（メディア特性：　値）"
media="出力媒体　and　（メディア特性：　値）　and　（メディア特性：　値）,　出力媒体"

⬇️

CSS

media="screen　and　(min-width: 640px)"
media="screen　and　(min-width: 640px)　and　(max-width: 800px)"
media="screen　and　(min-width: 640px)　and　(max-width: 800px),　print"

＠mediaについて

「＠meia」使った書式を利用すると、CSSのソースコードの中に出力媒体とメディアクエリーの指定を書き込むことができる
特定の出力媒体が特定の状態になっている場合にのみ、その部品の指定を適用させることが可能

CSS

@media　出力媒体　メディアクエリー　{
　　　セレクタ　{　プロパティ：　値；・・・}
　　　セレクタ　{　プロパティ：　値；・・・}
　　　セレクタ　{　プロパティ：　値；・・・}
　　　・・・
}

⬇️

CSS

@media screen and (min-width: 640px) and (max-width: 800px) {
   main { float: none; }
   #sub { float: none; }
   p { font-size: 13px; }
}