【毎朝1時間】プログラミング初心者のオヤジが、Web制作とセールスライティングを学んで、案件をゲットするまでのブログ

コーディングの知識がほとんどないオヤジが独学で仕事をゲットするまでの日記です。目標は、売れるLPを企画からデザイン、コーディングまでできるオヤジです。

#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