深掘り！メディアクエリを使いこなそう - ウルトラ先生のレスポンシブWebデザイン教室

もっと強力な「変身の呪文」をマスターしよう！

やあ、未来のWeb魔法使い！前のページでは、メディアクエリが「もし画面がこの条件なら、この見た目にしてね！」と指示を出す「変身の呪文」だってことを学んだね。

基本の呪文 @media screen and (max-width: 600px) { ... } はもうバッチリかな？今回は、このメディアクエリをもっともっと使いこなすために、呪文のバリエーションや、組み合わせのテクニックを詳しく見ていくよ。これで、君のWebサイトはさらに自由自在に変身できるようになるはずだ！

メディアクエリの構成要素（もう一度おさらい）

基本の形はこうだったね。

@media [メディアタイプ] and ([メディア特性]: [値]) {
  /* ここにCSSスタイルを書く */
}

この「メディアタイプ」と「メディア特性」には、実は色々な種類があるんだ。順番に見ていこう！

１．メディアタイプ (Media Types) – どんな「場所」で変身する？

メディアタイプは、「このスタイルをどんな種類のデバイス（場所）に適用しますか？」を指定するものだよ。

screen (スクリーン): パソコン、タブレット、スマートフォンの画面など、いわゆる「画面」で表示されるときに使うよ。これが一番よく使うメディアタイプだね！
print (プリント): Webページを印刷するときや、印刷プレビューで見るときに適用されるスタイルだよ。

この箱は、画面では普通に見えるけど、印刷しようとすると…？

（ヒント：このページのCSSには、印刷時にはこの箱やヘッダーが表示されないようにする魔法がかかっているよ！ブラウザの印刷プレビューで確認してみてね。）

例えば、印刷するときは背景色をなくしてインクを節約したり、ナビゲーションメニューを非表示にして本文だけを印刷しやすくしたりできるんだ。
```
@media print {
  body {
    background-color: white; /* 背景は白 */
    color: black;           /* 文字は黒 */
  }
  .sidebar {
    display: none; /* サイドバーは印刷しない */
  }
}
```
all (オール): すべてのメディアタイプに適用されるよ。メディアタイプを特に指定しない場合と同じような動きになることが多いね。
speech (スピーチ): スクリーンリーダー（画面の情報を読み上げてくれるソフト）のような、音声でWebページを伝えるデバイス用のスタイルだよ。これはちょっと専門的なので、今は「そんなのもあるんだな」くらいでOK！

２．メディア特性 (Media Features) – どんな「条件」で変身する？

メディア特性は、「どんな条件のときにスタイルを変えますか？」という具体的な条件を指定するところだよ。前のページでは幅の特性 max-width を使ったね。他にもたくさんあるんだ！

幅 (width) の仲間たち

画面の幅に関する条件は、レスポンシブデザインで一番よく使うよ！

特性	意味	書き方の例	「こんなとき！」というイメージ
`width`	ビューポートの幅がピッタリこの値のとき	`(width: 768px)`	「画面幅がちょうど768pxのときだけ！」 (あまり使わない)
`min-width`	ビューポートの幅がこの値以上のとき (その値を含む)	`(min-width: 768px)`	「画面幅が768px以上のとき、つまりタブレットやPCサイズのとき！」 (モバイルファーストでよく使う)
`max-width`	ビューポートの幅がこの値以下のとき (その値を含む)	`(max-width: 767px)`	「画面幅が767px以下のとき、つまりスマホサイズのとき！」 (デスクトップファーストでよく使う)

ブレークポイント (Breakpoints): この min-width や max-width で指定する幅の値を「ブレークポイント」って呼ぶよ。Webサイトのデザインが「パキッ」と変わる（breakする）点（point）だからだね。どの値をブレークポイントにするかは、Webサイトのデザインや内容によって変わってくるけど、よく使われるのは、代表的なスマホ、タブレット、PCの画面幅を参考にすることが多いよ。（例：320px, 480px, 600px, 768px, 992px, 1200pxなど）でも、一番大切なのは「デバイスのサイズ」に合わせるんじゃなくて、「コンテンツ（中身）がキレイに見えるかどうか」で決めることなんだ。

高さ (height) の仲間たち

幅と同じように、ビューポートの高さで条件を指定することもできるよ。

height: 高さがピッタリこの値のとき。
min-height: 高さがこの値以上のとき。
max-height: 高さがこの値以下のとき。

幅ほど頻繁には使われないけど、例えば「画面の高さがすごく低いときだけ、ヘッダーを小さくする」みたいな使い方ができるね。

向き (orientation) – 画面は縦？横？

スマートフォンやタブレットは、縦向き (portrait) にも横向き (landscape) にもできるよね。この向きによってスタイルを変えることができるんだ。

(orientation: portrait): 画面が縦向きのとき。
(orientation: landscape): 画面が横向きのとき。

この箱の色は、画面の向きで変わるよ！

（スマートフォンやタブレットで見て、端末を回転させてみてね！PCのブラウザ開発ツールでもシミュレートできるよ。）

/* 縦向きのときのスタイル */
@media screen and (orientation: portrait) {
  .my-element { background-color: lightblue; }
}
/* 横向きのときのスタイル */
@media screen and (orientation: landscape) {
  .my-element { background-color: lightgreen; }
}

解像度 (resolution) – 画面のキレイさで変身！

最近は、同じ画面サイズでも、すごく高精細（こうせいさい：きめ細かい）なディスプレイ（Retinaディスプレイとか4Kディスプレイとか）が増えてきたよね。 resolution という特性を使うと、そんな画面の解像度に応じてスタイルを変えることができるんだ。

min-resolution: [値]dpi や min-resolution: [値]dppx

dpi (dots per inch) や dppx (dots per pixel) という単位で指定するよ。例えば、高解像度ディスプレイのときだけ、もっとキレイな画像を表示する、みたいなことができるんだ。（これはちょっと高度なテクニックなので、今は名前だけ覚えておこう！）

アスペクト比 (aspect-ratio) - 画面の縦横比

ビューポートの幅と高さの比率（例: 16:9のワイド画面など）に応じてスタイルを変えることもできるよ。

(aspect-ratio: 16/9): 画面の幅:高さがちょうど16:9のとき。
(min-aspect-ratio: 16/9): 画面の幅:高さが16:9以上のとき (より横長)。
(max-aspect-ratio: 1/1): 画面の幅:高さが1:1以下のとき (正方形かそれより縦長)。

映画の字幕みたいな特別なレイアウトで役立つことがあるかもしれないね。

３．論理演算子 (Logical Operators) – 条件を組み合わせよう！

メディアクエリでは、いくつかの条件を組み合わせて、もっと複雑な「変身の呪文」を作ることができるんだ。そのために使うのが「論理演算子」だよ。

and (アンド): 「～かつ～」という意味。複数の条件をすべて満たしたときにスタイルが適用されるよ。
```
/* 幅が768px以上で、かつ、横向きのとき */
@media screen and (min-width: 768px) and (orientation: landscape) {
  /* スタイル */
}
```
, (カンマ): 「～または～」という意味。コンマで区切られた条件のどれか一つでも満たせばスタイルが適用されるよ。(or と書くわけじゃないから注意してね！)
```
/* 幅が600px以下、または、縦向きのとき (どちらかの条件でOK) */
@media screen and (max-width: 600px), screen and (orientation: portrait) {
  /* スタイル */
}
```
not (ノット): 「～でない場合」という意味。条件を否定するときに使うよ。メディアタイプの前か、メディア特性の括弧の直前に置くんだ。
```
/* カラー表示ではないスクリーンの場合 (例: モノクロディスプレイ) */
@media not screen and (color) {
  /* スタイル */
}
/* 幅が600px以下「ではない」場合 (つまり601px以上の場合) */
@media screen and (not (max-width: 600px)) {
    /* スタイル */
}
```
not は少しややこしいから、最初は min-width や max-width で同じ意味を表せないか考えてみるのがいいかもね。
only (オンリー): 「～だけ」という意味。古いブラウザがメディアクエリを間違って解釈しないようにするために使われたものだけど、今の新しいブラウザではほとんど必要ないよ。@media only screen ... のように書く。歴史的なものとして知っておくくらいで大丈夫。

実践的な使い方・コツ

モバイルファースト？デスクトップファースト？

レスポンシブデザインのスタイルを書くとき、大きく分けて2つのアプローチがあるんだ。

モバイルファースト: 最初にスマートフォンなどの小さい画面用の基本的なスタイルを書いて、そのあと min-width を使って「画面幅が〇〇px以上なら、このスタイルを追加・変更する」という風に、だんだん大きい画面に対応させていく方法だよ。
```
/* まずはスマホ用の基本スタイル */
.menu { width: 100%; font-size: 16px; }

/* タブレットサイズ以上なら (例: 768px以上) */
@media screen and (min-width: 768px) {
  .menu { width: 50%; font-size: 18px; }
}
```
今はこのモバイルファーストがおすすめされることが多いんだ。なぜなら、スマホユーザーがとっても多いし、シンプルなスタイルから始めてだんだん複雑にしていく方が、コードもスッキリしやすいからね。
デスクトップファースト: 最初にパソコンなどの大きい画面用のスタイルを書いて、そのあと max-width を使って「画面幅が〇〇px以下なら、このスタイルに変更する」という風に、だんだん小さい画面に対応させていく方法だよ。
```
/* まずはPC用の基本スタイル */
.menu { width: 300px; font-size: 18px; }

/* タブレットサイズ以下なら (例: 767px以下) */
@media screen and (max-width: 767px) {
  .menu { width: 100%; font-size: 16px; }
}
```

どちらの方法でもレスポンシブデザインは作れるけど、ウルトラ先生はモバイルファーストをおすすめするよ！

コメントを活用しよう！

メディアクエリがたくさん出てくると、CSSファイルが複雑になってくることがある。そんなときは、コメントを使って、どのメディアクエリがどんな範囲のスタイルなのかを分かりやすく書いておくと、後で見返したときや他の人が見たときにとても助かるよ。

/* ===================================
   Base Mobile Styles (モバイル基本スタイル)
   =================================== */
body { /* ... */ }

/* ===================================
   Tablet Styles (タブレット用: 768px以上)
   @media (min-width: 768px)
   =================================== */
@media screen and (min-width: 768px) {
  body { /* ... */ }
}

/* ===================================
   Desktop Styles (デスクトップ用: 992px以上)
   @media (min-width: 992px)
   =================================== */
@media screen and (min-width: 992px) {
  body { /* ... */ }
}

まとめ：メディアクエリは可能性がいっぱい！

メディアクエリの奥深さ、少し感じられたかな？たくさんのメディア特性や論理演算子を組み合わせることで、本当に色々な条件でWebサイトの見た目をコントロールできるようになるんだ。

最初は全部覚えなくても大丈夫！よく使う min-width や max-width、orientation あたりから慣れていって、必要になったときに他の特性も調べて使ってみる、というスタンスでOKだよ。

これで、君の「変身の呪文」のレパートリーはかなり増えたはず！次のページでは、これらのメディアクエリを実際に使って、画面サイズに合わせて要素の配置（レイアウト）を柔軟に変えるテクニックについて学んでいくよ。いよいよ本格的なレスポンシブレイアウトの世界だ！