<picture>要素の使い方・サンプルコード
Sara
<picture>
<picture>要素は、<img>要素と <source>要素を子要素として持ち、画面サイズや端末に応じて表示する画像を切り替えることができます。
<picture> 要素を使わずに <img>要素の srcset 属性を使うこともできます。
属性
グローバル属性
全ての HTML 要素に共通して使用できるグローバル属性はこちら
使用例
ブラウザは <source> 要素に指定した media 属性から適切な画像を選択します。
適切なものがない場合とブラウザが非対応の場合は <img> 要素に指定した画像を表示します。
以下のサンプルでは
- ビューポート幅が 640px 以下の場合は img/640.png
- それ以外の場合は img/1024.png
を表示します。
ブラウザが対応していない場合は img/1024.png が表示されます。
<picture>
<source srcset="img/640.png"
media="(max-width: 640px)">
<img src="img/1024.png" alt="画像" />
</picture>対応ブラウザ
関連するタグ
Subscribe
0 Comments
古い順
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！
