働く若者
働く若者
働く若者
ロゴマーク

画像の出し分け

img タグに width/height を追加している。

スライドのHTMLソースを以下のように記述して画面幅によって画像を出し分けている。

<picture>
  <source type="image/webp" media="(min-width: 641px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1.webp">
  <source type="image/webp" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.webp">
  <source type="image/webp" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.webp">
  <source type="image/jpeg" media="(min-width: 641px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1.jpg">
  <source type="image/jpeg" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.jpg">
  <img src="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.jpg" alt="働く若者" width="400" height="233">
</picture>

カルーセルのHTMLソースを以下のように記述して画面幅によって画像を出し分けている。

<picture>
  <source type="image/webp" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.webp">
  <source type="image/webp" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.webp">
  <source type="image/jpeg" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.jpg">
  <img src="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.jpg" alt="働く若者" width="400" height="233">
</picture>

新着情報

VK Blocks Pro
アイコンメニュー 横並び・縦並び (VK パターンライブラリ)
カスタマイズ
商品画像を使用したメガメニューのカスタマイズ事例③
WordPress
画像とテキストを左右に並べてレイアウトするやり方の比較
カスタマイズ
商品画像を横並びで配置したカスタマイズ事例
商品画像を使用したメガメニューのカスタマイズ事例②
カスタマイズ
商品画像を2列に配置したカスタマイズ事例
商品画像を使用したメガメニューのカスタマイズ事例①
カスタマイズ
開催日を過ぎたイベントを自動的に削除するカスタマイズ

カルーセル

働く若者
働く若者
働く若者
働く若者
働く若者
働く若者