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

最終更新日:2019年07月05日  (初回投稿日:2012年06月15日)

前回は <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 は、「条件付きグループ規則」と言われるものの1つで、条件にあったデバイスに 特定のスタイルを適用できます。

@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"」で、サイトの他言語版に飛ばす方法を見てみましょう。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
11 | 2023/12 | 01
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.