画面幅によってファーストビュー画像を切り替える方法をメモに残しておきます。

<div class="p-fv">
<picture>
<source media="(min-width: 768px)" srcset="./assets/img/fv.png" />
<img src="./assets/img/sp/fv.png" alt="かっこいいサイトだよ" />
</picture>
</div>

ポイント

• min-width: 768pxはスマホ幅とPC幅のブレークポイントです。

• pictureタグとsourceタグを使用することで、画面幅が768px以上になると、srcsetで設定した画像に切り替わります。

•imgタグで指定した画像は、画面幅が条件に合わない場合や、古いブラウザでpictureタグがサポートされていない場合にデフォルトで表示される画像です。

この方法を使えば、画面幅やデバイスに応じて最適な画像を表示できます。