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要素で最適な画像を表示する方法

2020年のバナナ

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

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