メディアクエリー
メディアクエリーとは、スマホ・タブレット・パソコンなど、
画面の大きさや種類に応じてCSSを切り替える方法のこと！
よく使用するメディアクエリー一覧
スマホ
@media screen and (max-width: 600px) {
/* スマホ用のスタイル */
}
タブレット
@media screen and (min-width: 601px) and (max-width: 960px) {
/* タブレット用のスタイル */
}
よく使うブレイクポイント（目安）
| デバイス | 幅（px） |
|---|---|
| スマホ | 600px未満 |
| タブレット | 600px〜 |
| ノートPCなど | 1000px〜 |
メディアクエリーの際は、下記の設定は必ず記載しておこう！
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
| 属性 | 意味 |
|---|---|
width=device-width |
端末の画面幅に合わせてレイアウトを調整するよ、という指示。 |
initial-scale=1.0 |
ページを最初に表示したときのズーム倍率を「そのまま（等倍）」にする設定。 |
srcsetについて
srcsetとは、
📱「小さい画面には小さい画像」
💻「大きい画面や高解像度にはキレイな画像」を
ブラウザが自動で選んで表示してくれる仕組み！
srcset指定方法
1.ピクセル密度にあった画像だけ読み込ませる
<img
src="img.jpg"
srcset="img.jpg 1x, img@2x.jpg 2x"
/>
- 📱 普通の画面（昔のPC） →
img.jpg - 📱 2倍の高解像度画面（IPhone、高解像度モニターなど） →
img@2x.jpg
2.画像サイズを指定する
<img
src="image-600.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w"
sizes="(max-width: 600px) 400px, 800px"
alt="サンプル画像"
/>
こちらのほうがよく使われるので、詳しくみていこう！👾
✅ src 通常の画像（フォールバック用）
src="image-600.jpg"
→ もしブラウザが srcset に対応してなかった場合はこれを使う
✅ srcset レスポンシブ画像の主役！
srcset="image-400.jpg 400w, image-800.jpg 800w"
-
image-400.jpg→ 幅 400ピクセル用 の画像 -
image-800.jpg→ 幅 800ピクセル用 の画像
✅ sizes 画面幅に応じて、
どのくらいのサイズで画像が表示されるのか をブラウザに伝える部分！
sizes="(max-width: 600px) 400px, 800px"
- 画面の幅が 600px以下なら → 画像は 400pxで表示
- それ以外は（= 601px以上は）→ 画像は 800pxで表示
3. 条件に合致した時に使う画像について詳細に指定する方法
こちらがよく使われるので、おさえましょう！👾
<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属性が指定されていないということは、「上記のタグの条件がどれも満たされなかった場合（つまり、画面幅が768px未満の場合）、この画像を使ってね」というデフォルトの条件として扱われます。
- ここがポイントです。
- もし1番目の
<source>タグの条件（min-width: 768px）が満たされなかった場合、ブラウザはこの2番目の<source>タグを評価します。特に条件がないため、このlogo-sp.pngが採用されます。
imgタグ
-
src="logo-pc.png":- これはフォールバック（代替）画像です。
- 古いブラウザなど、
<picture>要素をサポートしていないブラウザは、<source>タグを無視して、この<img>タグだけを読み込みます。また、何らかの理由でどの<source>タグの画像も読み込めなかった場合にも、この<img>タグの画像が表示されます。
未来の自分のために、誰かのためにこの記事が役に立てば幸いです✨🧚🏻