スマホ/タブレット/パソコンで別々の画像を振り分けて表示させる

ウェブデザインではスマートフォンは基本的に縦型のディスプレイ、パソコンは基本的に横型のディスプレイとして制作するため、CSSのobject-fitなどを使っても画像がうまく収まらないことがあります。そういったとき、デバイスごとに適切な画像を表示させる方法を覚えておきましょう！

CONTENTS

サンプル
HTML
CSS
JavaScript
さいごに

WordPressの表示速度No1！
初心者からからプロフェッショナルまで使えるロリポップサーバーは月額550円から！

サンプル

サンプルを見てみましょう。

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で実装することでもできる…と思いますが、めちゃ面倒なので最近ではこの方法を使うことが多いです。

自分の知識がクライアントの要望の妨げにならないように、しっかりと覚えておきましょうー！