HTML・CSSの学び直し📱メディアクエリー編

# メディアクエリー
メディアクエリーとは、スマホ・タブレット・パソコンなど、
画面の大きさや種類に応じてCSSを切り替える方法のこと！

## よく使用するメディアクエリー一覧
### スマホ
```
@media screen and (max-width: 600px) {
  /* スマホ用のスタイル */
}

```
### タブレット
```
@media screen and (min-width: 601px) and (max-width: 960px) {
  /* タブレット用のスタイル */
}
```
### よく使うブレイクポイント（目安）
| デバイス    | 幅（px）      |
| ------- | ---------- |
| スマホ     | 600px未満     |
| タブレット   | 600px〜  |
| ノートPCなど | 1000px〜 |

### メディアクエリーの際は、下記の設定は必ず記載しておこう！
```HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```
| 属性                   | 意味                                   |
| -------------------- | ------------------------------------ |
| `width=device-width` | 端末の画面幅に合わせてレイアウトを調整するよ、という指示。        |
| `initial-scale=1.0`  | ページを最初に表示したときのズーム倍率を「そのまま（等倍）」にする設定。 |

# `srcset`について

`srcset`とは、
📱「小さい画面には小さい画像」
💻「大きい画面や高解像度にはキレイな画像」を
ブラウザが自動で選んで表示してくれる仕組み！

## `srcset`指定方法

### 1.ピクセル密度にあった画像だけ読み込ませる
```HTML
<img 
  src="img.jpg"
  srcset="img.jpg 1x, img@2x.jpg 2x"
/>
```
- 📱 普通の画面（昔のPC） → `img.jpg`
- 📱 2倍の高解像度画面（IPhone、高解像度モニターなど） → `img@2x.jpg`

### 2.画像サイズを指定する
```HTML
<img 
  src="image-600.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="サンプル画像"
/>
```

こちらのほうがよく使われるので、詳しくみていこう！👾

**✅ `src` 通常の画像（フォールバック用）**
```HTML
src="image-600.jpg"
```
→ もしブラウザが `srcset` に対応してなかった場合はこれを使う

**✅ `srcset` レスポンシブ画像の主役！**
```HTML
srcset="image-400.jpg 400w, image-800.jpg 800w"
```
- `image-400.jpg` → 幅 400ピクセル用 の画像
- `image-800.jpg` → 幅 800ピクセル用 の画像

**✅ `sizes` 画面幅に応じて、
どのくらいのサイズで画像が表示されるのか をブラウザに伝える部分！**
```HTML
sizes="(max-width: 600px) 400px, 800px"
```
- 画面の幅が 600px以下なら → 画像は 400pxで表示
- それ以外は（= 601px以上は）→ 画像は 800pxで表示

### 3. 条件に合致した時に使う画像について詳細に指定する方法

こちらがよく使われるので、おさえましょう！👾

```HTML
 <picture>
        <source srcset="logo-pc.png" media="(min-width: 768px)" />
        <source srcset="logo-sp.png" />
        <img src="logo-pc.png" alt="サンプル画像" />
</picture>
```

**🧩 各タグの役割**
| タグ          | 内容                                     |
| ----------- | -------------------------------------- |
| `<picture>` | 条件に合う画像を選ぶための「親」                       |
| `<source>`  | 条件を指定（形式や画面サイズ）して画像を出し分ける。条件が合う順に上から評価される|
| `<img>`     | 条件に合う`source`がなかったときに使う「デフォルト画像」なので**必須**となる|

#### `<picture>`タグ
複数の`<source>`要素と、最終的な`<img>`要素を囲むコンテナです。ブラウザは、この中に書かれた`<source>`要素を上から順に評価し、**最初に条件に合致したものを採用**します。

#### `<source>`タグ (1番目)
- `srcset="logo-pc.png":`
    - この`<source>`で提供される画像ファイルのパスを指定します。

- `media="(min-width: 768px)":`
    - この画像を使うべきメディア条件（Media Query）を指定します。
    - この条件は「ビューポート（画面の幅）が768ピクセル以上の場合」という意味です。

- ブラウザはまずこの`<source>`タグを評価し、「もし画面幅が768px以上だったら、`logo-pc.png`を使おう」と考えます。この条件が満たされれば、この画像が採用されます。

#### `<source>`タグ (2番目)
- `srcset="logo-sp.png"`:
    - こちらも画像ファイルのパスを指定します。
- `media属性がない`:
    - ここがポイントです。`media`属性が指定されていないということは、「上記の<source>タグの条件がどれも満たされなかった場合（つまり、画面幅が768px未満の場合）、この画像を使ってね」というデフォルトの条件として扱われます。
- もし1番目の`<source>`タグの条件（`min-width: 768px`）が満たされなかった場合、ブラウザはこの2番目の`<source>`タグを評価します。特に条件がないため、この`logo-sp.png`が採用されます。

#### `img`タグ
- `src="logo-pc.png"`:
    - これはフォールバック（代替）画像です。
    - 古いブラウザなど、`<picture>`要素をサポートしていないブラウザは、`<source>`タグを無視して、この`<img>`タグだけを読み込みます。また、何らかの理由でどの`<source>`タグの画像も読み込めなかった場合にも、この`<img>`タグの画像が表示されます。
---


未来の自分のために、誰かのためにこの記事が役に立てば幸いです✨🧚🏻