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

最終更新日:2017年11月26日  (初回投稿日: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"」で、サイトの他言語版に飛ばす方法を見てみましょう。

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

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

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

trackback


この記事にトラックバックする(FC2ブログユーザー)

CSSの基本2

さて、此間(こないだ)の[CSSの基本1]では、まずは基本をおさらいと言いながら結構初歩的な内容はすっ飛ばした感が否めず、予定を変更してもうちょい根幹の部分を掘り下げてみようかな〜と。 と言ってもCSS(スタイルシート)が何故必要なの?とか、文書構造に関するHTMLとの関係性なんかはそれなりに詳しく解説してるページをご覧いただくとして・・ 参照:CSSとは?−CSSの基本 by HT...
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
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
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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