picture要素の使い方

<picture>
  <source
    srcset="
            https://877.design/demo/picture/graph_v@350w.jpg,
            https://877.design/demo/picture/graph_v@700w.jpg 2x"
    media="(max-width:500px)">
  <source
    srcset="
            https://877.design/demo/picture/graph@500w.jpg,
            https://877.design/demo/picture/graph@1000w.jpg 2x"
    media="(min-width:501px)">
  
  <img src="https://877.design/demo/picture/graph_v@350w.jpg" alt="">

</picture>

関連記事:
HTMLのpicture要素で最適な画像を表示する方法

あけましておめでとうございます2024

旧年中は大変お世話になりありがとうございました。相変わらず、楽しく忙しく充実した1年になりました。なんと、、Webを2年もほったらかしにしてしまってたことに今気づきました。反省・・・ 本年もますます一層頑張りますので、よ・・・

2021年のバナナ

今日は12月31日、2021年もあとわずかになりました。今年こそは余裕を持って締め括る予定が、結局20時すぎてました😇 今年もたくさん、いろいろな仕事ができて、充実しすぎた1年になりました。今年も頑張ったと言い切れる。今・・・

2020年のバナナ

今日は12月31日、2020年もあと数時間になりました。 今年はたくさんまさかなことがありました。東京オリンピックがなくなったり、、、仕事が減ったり、、、いきつけのラーメン屋さんがなくなってしまったり、、、「仕事がなくな・・・

  • あけましておめでとうございます2024
  • 2021年のバナナ
  • 縦方向中央に配置したいとき、align-items:center;が効かないときに確認すること
  • WordPressでカスタムタクソノミー一覧ページがリダイレクトされたときのメモ
  • HTMLのpicture要素でレスポンシブに対応した画像を読み込む
  • imgのsrcsetでレスポンシブで最適な画像を設定する方法
  • 2020年のバナナ
  • 要素を中央に表示したい!CSSでtext-align:center が効かないときに確認すること
  • スマホで100vhを使うと、アドレスバーの高さ分はみでてしまう
  • flexboxでページ全体のレイアウトを作ってみる
© b. All rights reserved.