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

メディアクエリとは

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

@media only screen and (max-width: 767px), print { }

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

media属性

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

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

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

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

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

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

<link href="css/sp.css" rel="stylesheet" media="only screen and (max-width: 767px)">
<link href="css/pc.css" rel="stylesheet" media="only screen and (min-width: 768px)">

<link href="css/pc.css" rel="stylesheet" media="only screen and (min-width: 768px), print">