見出し画像
Photo by chiyoizmo

画面の大きさで表示画像を変更する(HTML/CSS)

高菜こんぶ

こんな感じのを一番シンプルな方法で行います
↓これが大きな画面で見たとき

こっちが小さい画面で見たとき

ではコードを紹介

HTML

<body>
    <center>
        <img class="pc" src="PC.jpg" alt="PC表示" width="50%">
        <img class="sp" src="スマホ.jpg" alt="スマホ表示" width="50%">
    </center>
</body>

CSS

/* 大きな画面で見た時 */
/* クラスpcを表示し、クラスspは非表示 */
.pc {
  display: block;
}

.sp {
  display: none;
}

/* 画面サイズが600px以下になったとき */
/* クラスpcを非表示にしてクラスspを表示 */
@media only screen and (max-width: 600px) {
  .pc {
    display: none;
  }

  .sp {
     display: block;
  }
}

@mediaというものを使えば可能です
今回は600px以下になれば＠mediaの中の処理が実行されるようになっています
一番シンプルというか基本的な書き方をご紹介しました

よかったらフォローお願いします
変なアカウント以外はフォロバさせていただきます


この記事が気に入ったらサポートをしてみませんか？