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

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

      2017/01/10   hatano

CSSでのメディアクエリの使い方

CSSファイルでは、下記のような記述になります。
{ }内にセレクタとプロパティを記述します。
CSSファイル内にいくつメディアクエリのブロックを記述してもかまいません。
注意点として、media only screen and ( 内の半角スペースは省略してはいけません。


	/* sp用 */
	@media only screen and (max-width: 767px){ }
	/* pc用 */
	@media only screen and (min-width: 768px){ }
	

比較としてHTMLファイルでの記述は下記のようになります。


<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)">

HTMLと同様、他のメディアタイプを同時に指定ができます。HTMLと同様、カンマで区切って指定します。
下記は、screenとprintを指定した場合です。


/* pc用 */
@media only screen and (min-width: 768px), print{ }

only, andキーワード

only

コード内のonlyは、省略可能です。
onlyを付けるとメディアクエリに対応していないブラウザで、指定を無視させることができます。

and

複数のサイズを指定することで◯◯px〜◯◯pxというように範囲の指定が可能です。
下記は、768px以上、900px以下の指定です。


@media only screen and (min-width: 768px) and (max-width: 900px){ }

メディアクエリの指定をどちらで行うか

ここまで、HTMLでの使用方法とCSSでの使用法用を紹介してきました。
どちらを使用するかの決まりはありませんが、下記の理由でCSSでの使用をオススメします。

  • HTMLでの指定だとファイル数が増えるため管理がしづらくCSSの読み込みも遅くなる。
  • メディアクエリに非対応のブラウザでもメディアクエリが利用できるJavascriptのライブラリが使用できない。