ウェブデザインではスマートフォンは基本的に縦型のディスプレイ、パソコンは基本的に横型のディスプレイとして制作するため、CSSのobject-fitなどを使っても画像がうまく収まらないことがあります。そういったとき、デバイスごとに適切な画像を表示させる方法を覚えておきましょう！
サンプル
サンプルを見てみましょう。
See the Pen
Untitled by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.
CodePenにアクセスしてウインドウのサイズを変えてみると分かりやすいかもしれません。
HTML
HTMLはこんな感じです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<picture>
<source srcset="https://iroirodesignlab.com/wp-content/uploads/2024/02/sp.jpg" media="(max-width: 30rem)" />
<source srcset="https://iroirodesignlab.com/wp-content/uploads/2024/02/tablet.jpg" media="(max-width: 64rem)" />
<img src="https://iroirodesignlab.com/wp-content/uploads/2024/02/pc.jpg" alt="" />
</picture>
</body>
</html>
キーとなるのは<source>で、media属性にメディアクエリをあらかじめ付けておき、ディスプレイサイズに応じて出力される画像を振り分けます。
上記の例では、ディスプレイサイズが30rem(480px)以下だとスマートフォン用の画像、30remから64rem(1024px)まではタブレット用の画像、64rem以上では何も指定していない<img>要素のパソコン用の画像が表示されるようになっています。
CSS
CSSはSCSSを使っています。
picture {
source,
img {
width: 100%;
}
}
ボックスの大きさに対して100%で表示されるようにしておくのがおすすめです。
JavaScript
JavaScriptは使っていません。
さいごに
画像の出力を振り分けるのは、CSSのメディアクエリを使ったりjQueryのresizeを使ってif/elseで実装することでもできる…と思いますが、めちゃ面倒なので最近ではこの方法を使うことが多いです。
自分の知識がクライアントの要望の妨げにならないように、しっかりと覚えておきましょうー！
