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

ARCHIVES/KNOWLEDGE/WEB DESIGN

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

給付金で最大54万円OFF！独学では手に入らないウェブスキルが身に付く日本初のW3C認定スクールが無料カウンセリング受付中！

サンプル

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

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

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

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