TOP

コーディング

#codestep 初級編1 portfolio「画像のmedia属性」

ご依頼内容

 <div id="mainvisual">
<picture>
<source media="(max-width: 600px)" srcset="img/mainvisual-sp.jpg">
<img src="img/mainvisual-pc.jpg" alt="テキストテキストテキスト">
</picture>
</div>

mediaリソースの志向するメディアのメディアクエリ。この属性は <picture> 要素の内部でのみ使用します。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/source

CSSJavaScriptを使用していないことに注目をしてください。ポイントは、media属性です。media属性の値には、CSSのメディアクエリーで使用する値と同様の値を記載することができます。img要素には、デフォルトの画像ファイルを、そして2つのsource要素は、各media属性の値にマッチした条件下で使用される画像のファイルが指定されています。

https://www.internetacademy.jp/blog/ja/2016/04/20160417-hiroki.html