webサイト制作の勉強｜2023年11月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

srcsetを使ってimg要素の画像を切り替える

webサイト制作 HTML

img要素の表示方法は3通り

１.「max-width:100%」を使ったフルードイメージ
設定は一番簡単、幅と同じ比率で高さも低くなる

２.「object-fit」幅も高さも自由に指定、img要素の親要素に表示させたい幅と高さを指定、img要素には「object-fit:cover」と幅と高さの指定が必須、object-positonを使う事で画像の表示位置を変更可。「aspect-ratio」と合わせて使う事で利便性が向上。

3.「srcset」を使うと、画面幅によって表示させるimg要素を切り替える事が出来る。

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイスによって適切なimgが表示させられます。

srcsetとは

  • srcsetはHTML5で策定された新属性
  • この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる

-IEでは使うことが出来ない(http://caniuse.com/#search=srcset)

picture要素

picture要素を使うと、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分けることが可能です。
picture要素は複数のsource要素と一つのimg要素で構成されます。source要素には3つの属性が指定可能です。
※必ずimg要素が必要です

source要素

source要素は、 要素、 

<picture>
<!--641px以上の時に表示したい画像の指定-->
<source media="(min-width:641px)" srcset="img/pc.jpg 960w" sizes="100vw">
<!--640px以下の時に表示したい画像の指定-->
<img media="(max-width:640px)" srcset="img/sp.jpg 640w" sizes="100vw" alt="">
</picture>
  • media属性(メディアクエリ)
  • srcset属性
  • sizes属性
media属性

mediaにはcssと同じようにmax-widthやmin-widthを指定します。例えば768pxまでPC用画像を表示したかったら以下のように指定します

media="(min-width:760px)"
srcset属性

srcsetには画像ファイルのパスと画像ファイルの横幅を指定します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」では無く画像自体の横幅です。横幅の単位はpxでなくw（幅記述子）を用います。

srcset="img/main1.jpg 960w"
sizes属性

表示する画像の横幅はsizes属性に記述します。メディアクエリーと組み合わせて複数の横幅が指定可能です。
例：ディスプレイ幅が960px以上の時は画像幅は960px、それ以下ではディスプレイ幅と同じ画像幅で表示したい場合は次のように記述します。

sizes="(max-width:960px) 100vw, 960px"

※cssでフルードイメージや%指定がされている場合は以下のように簡易的な物でも表示出来ます。

sizes="100vw"

size属性を省略した場合

  • bodyが1200px以上の時は1200px幅のpc用画像を画面中央に表示
  • bodyが1200px~768pxの時はpc用画像をフルードで表示
  • bodyが767px以下の時はsp用画像をフルードで表示
<picture>
<!--768px以上の時に表示したい画像の指定-->
<source media="(min-width:768px)" srcset="pc.jpg 1200w">
<!--767px以下の時に表示したい画像の指定-->
<img srcset="sp.jpg 767w" alt="">
</picture>
size属性を指定した場合
  • bodyが1200px以上の時は1200px幅のpc用画像を画面中央に表示
  • bodyが1200px~960pxの時はpc用画像をフルードで表示
  • bodyが959px~768pxの時はタブレット用画像をフルードで表示
  • bodyが767px以下の時はsp用画像をフルードで表示

※imgにフルードイメージの設定を必ず指定

<body>
<picture>
<!--960px以上の時に表示したい画像の指定-->
<source media="(min-width:960px)" srcset="pc.jpg 1200w" sizes="1200px">
<!--959~641pxの時に表示したい画像の指定-->
<source media="(min-width:641px)" srcset="tablet.jpg 960w" sizes="100vw">
<!--640px以下の時に表示したい画像の指定-->
<img srcset="sp.jpg" sizes="100vw" alt="">
</picture>
</body>


https://yachin29.github.io/felica/srcset/yachin29.github.io