制作の流れお知らせ・ブログよくある質問お問い合わせ2023.06.16ブログ画面幅ごとに画像を出し分ける方法レスポンシブデザインで、画面幅によって表示させる画像を変更したいときはありませんか?そのような場合、下記のように<picture>要素を用いることで、CSS無しで画像の出し分けを実現することができます。これにより、画面幅によるレイアウトの変更に対してより柔軟に対応できるようになります。src="images/img-small.jpg"></picture>この場合、画面幅が・860px以上:img_large.jpg・400px~860px:img_mid.jpg・400px以下もしくは<picture>要素がサポートされていない:img_small.jpgの画像が読み込まれます。・<picture>要素内の<img>要素は必須です。これを記述しないと画像が表示されません。・ブラウザが<picture>要素をサポートしていない場合、もしくは<source>要素の条件を満たさない場合は<img>要素が表示されます。・<img>要素は一番最後に記述しましょう。<img>要素の後に<source>要素が書かれた場合、無視されます。以上が、画面幅ごとに画像を出し分ける方法になります。最後までご覧いただきありがとうございます。無料相談・お問い合わせまずはお気軽にご相談ください。MAEDAでは無料相談を実施しています。