この間LP制作をした際に、PCとスマホで異なる画像を表示させる機会がありました。

PCとスマホで異なる画像を表示させるコーディングはたまに出てくるので、分からない人は是非マスターしましょう！

【レスポンシブ】PCとスマホで異なる画像を表示させる方法

完成形はこちらです。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

PCとスマホで表示される画像が異なっていることが分かるでしょう。

それでは早速コーディングしていきます。

HTML

<div class="box">
    <div class="img">
        <img src="./image/img1.JPG" alt="" class="pc">
        <img src="./image/img2.JPG" alt="" class="sp">
    </div>
    <div class="text">
        <h2>タイトルが入ります。</h2>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </div>
</div>

親要素boxの中に、imgとtextのclassを持った子要素を用意しました。

そして、PCの時に表示させたい画像に対して”pc”、スマホの時に表示させたい画像に対して”sp”のclassをつけます。

CSS

こちらがレイアウトのCSSです。

.box {
    max-width: 1000px;
    margin: 100px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.img {
    flex-basis: 48%;
}
.text {
    flex-basis: 48%;
}
.text h2 {
    font-size: 25px;
    margin-bottom: 35px;
}
.text p {
    font-size: 18px;
    line-height: 1.5;
}

そしてPCとスマホで画像を切り替えるためのCSSを書きます。

スマホの時に表示させたい画像は、PCの時は表示させないようにします。

// PCとスマホで画像を切り替える
.pc {
    display: block;
}
.sp {
    display: none;
}

最後にスマホの時は、”pc”のclassがついた画像を消し、”sp”のついたclassの画像が表示されるようにします。

// レスポンシブ
@media (max-width: 600px) {
    .box {
        flex-direction: column;
        padding: 0 15px;
    }
    .img {
        margin-bottom: 25px;
    }
    // スマホの時に""sp"がついたclassの画像が表示される
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
}

これでPCとスマホで異なる画像を表示させることが出来ました。