はじめに
メディアクエリを用いて、画面横幅によってCSS、画像を変更する手法を備忘録として残します。
本記事では、メディアクエリ、メディア特性とは何かについては割愛させていただきます。
画面横幅によってCSSを変更する
メディアクエリを用いて、画面横幅が指定条件を満たす場合、指定したCSSを適用させる。
スタイルシートに@media screen and (メディア特性) {指定したいCSS}のように記述すれば、メディア特性で指定した条件が満たされた場合、指定したいCSSを適用させることができる。
今回、画面横幅によってCSSを変更したいため、メディア特性に画面横幅の条件を指定する。
実装例を下記に示す。
/* 画面横幅が指定した値以下の場合、pタグのフォントサイズを12pxに適用 */
@media screen and (max-width: 450px) {
p {
font-size: 12px;
}
}
/* 画面横幅が指定した範囲内の場合、pタグのフォントサイズを14pxに適用 */
@media screen and (min-width: 451px) and (max-width: 700px) {
p {
font-size: 14px;
}
}
/* 画面横幅が指定した値以上の場合、pタグのフォントサイズを18pxに適用 */
@media screen and (min-width: 701px) {
p {
font-size: 18px;
}
}
画面横幅によって表示する画像を変更する
pictureタグを用いて、画面横幅によって画像を出し分ける。
-
pictureタグ内に１つ以上のsourceタグと1つのimgタグを記述する。 -
sourceタグは、特定条件下で表示したい画像を指定する際に使用する。media属性とsrcset属性を利用して、画像の表示条件と表示したい画像を指定する。-
media属性で、画像の表示条件（メディアクエリ）を指定。 -
srcset属性で、条件を満たした場合に表示させる画像のパスを指定。
-
-
imgタグには、sourceタグで指定した条件を満たさなかった場合に表示する画像を指定する。- 注意点として、
pictureタグ内に必ずimgタグを指定する必要がある。
- 注意点として、
実装例を下記に示す。
<picture>
<!-- 画面横幅が600px以下の場合、img/sp.jpgを表示 -->
<source media="(max-width: 600px)" srcset="img/sp.jpg">
<!-- 上記条件に当てはまらない場合）、img/default.jpgを表示 -->
<img src="img/default.jpg">
</picture>