（ちょっとメモ）CSSの @import と @media（メディアクエリ）

前回は <link>要素内でスタイルシートのメディアを切り替えをしました。
今回は、CSSファイル内で @import や @media を使って CSSを切り替えてみよう。

本日のINDEX

1. CSSの @-規則（CSS At-rules）
2. @importで複数のCSSファイルをまとめる
   1. 複数のCSSファイルを1つにまとめる
   2. @import でメディアタイプ別に CSSを切り替える
   3. @import でデバイス別に CSSを切り替える
3. @media で条件によって CSSを切り替える
   1. @media でメディアタイプ別に CSSを切り替える
   2. @media でデバイス別に CSSを切り替える
   3. メディアクエリの演算子について
   4. メディアクエリを使ったサンプル
4. HTMLに貼るときは media属性は省略で

CSSの @-規則（CSS At-rules）

@import と @media は、CSSの「@-規則（At-rules）」に属するルールです。
（参考：@-規則 - CSS | MDN）

@-規則 にはこのほかに、@charset、@supports、@font-face など いろいろあります。
@charset は CSSファイルの 文字エンコード を定義するもので、すでに [12-1] CSSを外部ファイルにしよう で使っています。
@supports は、CSSのベンダープレフィックスに替わるもの（？）として、（ちょっとメモ）CSS の ベンダープレフィックス についてで紹介しています。
@font-face は、Webフォントを指定するときに使います。

今回は @import と @media を使います。

@importで複数のCSSファイルをまとめる

@import は、CSSファイル内に ほかのCSSファイルをインポートできます。

CSSファイルは、用途に合わせて複数作ることがあるので、それを1つにまとめることができれば、そのファイルのみを HTMLに <link>要素で書けば済みます。

複数のCSSファイルを1つにまとめる

複数のCSSファイルを @import で1つにまとめるサンプルです。
このCSSファイルでは、4つの他のCSSファイルをまとめています。

@charset "UTF-8";
@import url("css/reset.css");
@import url("css/grid.css");
@import url("css/layout.css");
@import url("css/responsive.css");

下記のように url( ) を省略して URLの中身だけ書くこともできます。引用符（" "）は必要です。

@charset "UTF-8";
@import "css/reset.css";
@import "css/grid.css";
@import "css/layout.css";
@import "css/responsive.css";

ちなみに、WordPress でこの @import を使って「style.css」に 他の CSSファイルをでまとめると便利です。
WordPress の「テーマ」は「style.css」という名前のCSSファイルは必須なので、他のファイルもこの中にぶっ込んでおけば手間いらず。

@import でメディアタイプ別に CSSを切り替える

@import ファイル（複数のCSSファイルをまとめたファイル）内で、メディアタイプを指定することもできます。

@import url("default.css") screen;
@import url("print.css") print;

このように、メディアタイプは最後につけます。
メディアタイプは「,」で区切って複数指定もできます。

@import でデバイス別に CSSを切り替える

スマホやタブレット用のCSSの切り替えも @import を使えます。

@import url("default.css") screen and (min-width: 480px);
@import url("yoko.css") screen and (max-width: 480px) and (orientation: landscape);
@import url("tate.css") screen and (max-width: 480px) and (orientation: portrait);

これでそれぞれの画面幅やデバイスの縦持ちか横持ちかによってCSSが切り替わります。

条件を「and」で繋いでいます。これは「かつ」と言う意味の演算子。どっちの条件を満たす場合にスタイルが適用されます。
その他の演算子については、本記事後半のメディアクエリの演算子についてをご覧ください。

@media で条件によって CSSを切り替える

@media は、「条件付きグループ規則」と言われるものの１つで、条件にあったデバイスに 特定のスタイルを適用できます。

@media でメディアタイプ別に CSSを切り替える

1つのCSSファイル内で、対応メディアを分けて書くことができます。

@media screen {
  body {font: 1rem/1.6em sans-serif}
}
@media print {
  body {font: 12px/1.3em serif}
}

このように、「@media メディアタイプ {　〜　}　」という形で { } 内にスタイルの指定をします。条件（この場合はメディアタイプ）に合致した場合はその { } 内のスタイルが適用されるというわけです。。
メディアタイプは「,（カンマ）」で区切って複数指定することもできます。

@media でデバイス別に CSSを切り替える

<link>要素でも同じことができましたが、PCやスマホやタブレットなどのデバイスによって CSSを切り替えられます。

この CSSファイル内で @media を使ってデバイス別に スタイルを切り替えることを「メディアクエリ（Media Queries）」とよく言いますが、正確には <link>要素を使っても @import を使ってもメディアクエリです。
「メディアタイプ・メディア特性の条件をチェックしてスタイルを適用する式」をメディアクエリと言うんだって。
参考：Media Queries - W3C Recommendation

@media のサンプルコードです。

@media screen and (max-width: 480px) and (orientation:portrait) {
  /*480px以上のタブレット、縦持ち（portrait）の指定*/
}
@media screen and (max-width: 480px) and (orientation:landscape) {
  /*480px以上のタブレット、横持ち（landscape）用の指定*/
}

上の { } 内のスタイルは、幅が 480px 以下（最大幅が480px）かつ縦持ち（portrait）のデバイスで適用されます。
下のは、幅が 480px 以下かつ横持ち（landscape）のデバイスで適用されます。

メディアクエリの演算子について

「and」は「論理演算子」と呼ばれるもので「かつ」という意味。and で繋いだ条件すべてが満たされる必要があります。

論理演算子には、ほかに「not」「only」があります。そして「,（カンマ）」も使えて「or」と同じ役目です。

not は「...でなければ」適用される条件に使います。
only は「...な場合にだけ」適用される条件に使います。
「,」は「または」。どっちかの条件を満たせば適用されます。

not は他の演算子より、構文上では劣勢です。
例えば下記の2つのコードでは、

@media not all and (monochrome) { ... }
@media not screen and (color), print and (color) { ... }

このように解釈されるんだって。

@media not (all and (monochrome)) { ... }
@media (not (screen and (color))), print and (color) { ... }

メディアクエリを使ったサンプル

メディアクエリを使ったサンプルソースコードです。

#container {
  width:1000px;
  margin:3rem auto 0;
  }
article {
  float:left;
  width:680px;
  }
aside {
  float:right;
  width:280px;
  }
@media screen and (max-width: 1000px) {
#container {
  width:90%;	
  }
article, aside {
  float:none;
  width:100%
  }	
}

PC用スタイルでコンテンツの幅を1000pxにし、デバイス幅が 1000px 以下になったら、幅が全体の90％になるように切り替えています。
また、横並びにしていた <article> と <aside>要素を、デバイス幅が 1000px以下になったら縦に並べてコンテンツの幅いっぱいになるようにしています。

上のサンプルソースは、以前の記事「[18-1] 要素を角丸にしよう（border-radius）」のサンプルのものです。
PCのかたは ウィンドウ幅を変えて確認してみてください。
（クリックで別ウィンドウでサンプルが開きます）

HTMLに貼るときは media属性は省略で

で、こうして作ったCSSは HTMLに<link>要素で読み込ませますが、そのとき media属性は省略でOK。
media属性を省略した場合はデフォルトの「all」になります。CSSファイル内で目的のメディアタイプ・メディア特性を絞っているので大丈夫です。

<head>
  <link rel="stylesheet" href="css/style.css">
</head>

次回予告

次回はまた <link>要素に戻ります。
<link>要素の rel属性「rel="alternate"」で、サイトの他言語版に飛ばす方法を見てみましょう。