CSS/MediaQueries

Media Queries

メディアクエリーとは、出力媒体の種類やサイズに応じて、適用する CSS を選択変更できる機能のことです。スマホ、タブレット、PCと、異なるデバイスごとにフレキシブルに要素のレイアウトを変更するレスポンシブデザインには欠かせない機能です。

メディアタイプ

HTMLの link 要素・style 要素、CSS の @import、@media において出力媒体を指定するもので、以下のようなものがあります。

• all：全デバイスに適用
• screen：ディスプレイに適用
• print：プリンタに適用
• speech：スピーチシンセサイザに適用
  ：

その他＞Google:html media属性

メディアタイプの記述例

• HTML link要素

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

• CSS @import

  @import url('print.css') print;

• CSS @media

  @media print {
      nav{ display: none; }
  }

  
  
  
  

メディア特性

HTMLの link 要素・style 要素、CSS の @import、@media において指定可能な出力媒体の特性値を記述するためのもので、以下のようなものがあります。

• max-width：表示領域の最大幅（これ以下の場合に適用）
• min-width：表示領域の最小幅（これ以上の場合に適用）
• max-height：表示領域の最大高さ（これ以下の場合に適用）
• min-height：表示領域の最小高さ（これ以上の場合に適用）
• orientation：portrait（縦）/ landscape（横）
• max-resolution：最大解像度（これ以下の場合に適用）
• min-resolution：最小解像度（これ以上の場合に適用）
  ：

その他＞ Google:CSS メディア特性

メディア特性の記述例

• HTML link要素

   <link rel="stylesheet" href="mobile.css" media="screen and ( max-width:640px)">

• CSS @import

  @import url('mobile.css')  screen and  ( max-width:640px );

• CSS @media

  @media screen and  ( max-width:640px ) {
      nav{ display: none; }
  }

  
  
  
  

具体的な使用方法については ResponsiveDesign のページをご覧下さい。