HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

3章. メディアクエリの使い方1(Media Queries)

      2017/01/26   hatano

メディアクエリとは

CSS3から導入されたサイズに応じて、CSSを切り替える仕様です。
※Internet Explorerは、9以上から対応。
サンプルのstyle.cssにあった下記のコードがメディアクエリです。
注意点として、media only screen and ( までの半角スペースは省略してはいけません。

この章では、HTMLファイルでのメディアクエリの使い方を紹介し、次の章でCSSファイル内でのメディアクエリの使い方を解説していきます。

メディアクエリの各ブラウザの対応状況
Can I use -Media Queries-

media属性

メディアクエリを解説する前に従来からあるCSSの切り替え方法を解説します。
media属性は、link要素やstyle要素に使用できる属性です。
media属性自体は、CSS3ではなく従来のCSSでも使える属性です。
メディアに応じて、CSSを切り替えることができます。
値は、下記の通りです。

  • all・・・初期値(すべてのメディア)
  • screen・・・PCモニタ
  • print・・・印刷用
  • tv・・・テレビ

下記のコードは、PCで表示する場合は、style.cssを利用し、印刷の場合は、print.cssを使用します。
media属性は、省略可能です。
省略した場合は、media="all"を指定した場合と同じになります。

media属性にメディアクエリを使用する。

media属性にメディアクエリを追加してみます。
768pxをブレイクポイントに指定した場合の記述方法です。
max-widthは「◯◯px以下」、min-widthは「◯◯px以上」となり、767px以下は、sp.cssを使い、768px以上はpc.cssを利用します。

メディアタイプとの併用

他のメディアタイプも併用したい場合は、カンマで区切って指定します。
下記は、pc.cssを印刷でも利用できるように指定した場合です。

広告

 - レスポンシブサイト制作