[72] デバイスに合わせた画像を表示できる picture要素

最終更新日:2019年06月07日  (初回投稿日:2019年06月07日)

<picture>要素は、HTML5.1から追加された要素です。

picture(ピクチャー)はそのまんま「画像」という意味。
<picture>要素は、<video>要素や <audio>要素と同じように、<source>要素を子要素にして、表示する画像の選択肢を作れます。

子要素には <img>要素も使います。
この <img>要素の表示領域に <source>要素で選択肢にした画像ファイルを表示する仕組みです。

使用する要素 <picture> 〜 </picture>
<source>(終了タグはありません)
<img>(終了タグはありません)
<picture>の属性 グローバル属性のみ
<source>の属性 src :組み込むファイルのURL
srcset :記述子を使って画像のリストを作ります
sizes :メディア条件とソースサイズ値のリスト
type :組み込むファイルのMIMEタイプ
media :メディア条件や メディアタイプを指定
グローバル属性

<img>要素の属性については、[71] img要素の srcset属性で画像を切り替えよう をご覧ください。

本日のINDEX
  1. トリミングした画像に差し替えたい時に便利
  2. <source>要素の media属性での切り替え
    1. <source>要素の srcset属性で記述子「x」を使って複数の選択肢を指定
  3. <source>要素で sizes属性 を使う
  4. <source>要素の type属性での切り替え

参考:
HTML 5.2 W3C Recommendation - The picture element
HTML Standard - WhatWG - The picture element
<picture>: 画像要素 - HTML: HyperText Markup Language | MDN
レスポンシブ画像 - ウェブ開発を学ぶ | MDN

トリミングした画像に差し替えたい時に便利

<picture>は、画像の候補をメディア条件で切り替えることができます。
異なるサイズのデバイスで、同じトリミングの画像だと不都合がある時に便利です。

前回の <img>要素の「secset属性」での画像切り替えは、縦横比は同じでサイズの違う画像ファイルを切り替えるのに適していて、今回の <picture>要素は、縦横比まで違う画像ファイルを切り替えるのに適しているんだそうです。

ただ、実際には <img>要素の「secset属性」でも縦横比が違う画像の差し替えはできます。
<img>でそれをやるより <picture>でやったほうが良い理由があって <picture>要素ができたんでしょうね。詳細よくわからないけど。

<source>要素の media属性での切り替え

<picture>要素は、子要素の <source>要素で使う属性によって画像の切り替え方が違います。<source>要素には「media属性」「sizes属性」「type属性」などが使えます。

まずは「media属性」を使ってみましょう。
これは「メディア条件」によって画像を切り替えることができます。

サンプルを用意したので見てみてください。
(クリックで別ウィンドウで開きます)
サンプル1のプレビュー画像

PCの方はウィンドウサイズを広げたり狭めたりしてみてください。画像がウィンドウ幅に合わせて切り替わります。

スマートフォンの方は、縦長にトリミングした幅400px の画像が表示されます。
7.9インチタブレット(幅768px以上)なら横長の大きめの画像が表示されます。

HTMLはこちら。
このコードは、幅が767px以下の画面なら pic_ver400.jpg(縦長の画像)を表示し、そうでなければ <img>要素の pic_hor760.jpg(横長の大きめの画像)を表示するように指定しています。

<picture>
  <source media="(max-width:767px)" srcset="img/pic_ver400.jpg">
  <img src="img/pic_hor760.jpg" alt="紙のひげを持った笑顔の女性"> 
</picture>

<picture>要素内に子要素として<source>要素 <img>要素を入れています。

<source>要素「media属性」で「メディア条件」を指定し、その条件に一致したらに表示する画像ファイルを「srcset属性」で指定しておきます。

*<source>要素では src属性ではなく 必ず srcset属性を使うこと

上のサンプルコードでは <source>要素は1コしか書いていませんが、「メディア条件」が複数あるなら <source>要素も複数指定できます。

「メディア条件」が一致しなければ、ブラウザはその <source>をスキップして、次の <source>を調べます。
一致するメディア条件が無ければ、ブラウザは <img>要素の src属性の画像を表示。
ブラウザが <picture>要素に未対応の場合も <img>要素の src属性の画像を表示します。
(未対応ブラウザは IE, Blackberry Browser, Opera Mini - 参考:Can I Use

<source>要素の srcset属性で記述子「x」を使って複数の選択肢を指定

上のサンプルだと、2x, 3x...の高解像度ディスプレイには対応していません。

そこで、<source>要素の srcset属性で、<img>要素のときと同じように「画素密度記述子 x」を使って選択肢を作ることもできます。

サンプルはこちら。(クリックで別ウィンドウで開きます)
サンプル2のプレビュー画像

HTMLはこちら。
(<source>要素は本来1行で書きますが、わかりやすいように改行しています。)

<picture>
  <source media="(max-width:767px)"
          srcset="img/pic_ver400.jpg,
                  img/pic_ver800.jpg 2x,
                  img/pic_ver1200.jpg 3x">
  <source media="(min-width:768px)"
          srcset="img/pic_hor760.jpg,
                  img/pic_hor1520.jpg 2x">
  <img src="img/pic_hor760.jpg" alt="紙のひげを持った笑顔の女性"> 
</picture>

最初の <source>要素は、メディア条件で「幅が 767px以下(スマホ用)」とし、縦長にトリミングした画像を 1x用、2x用、3x用の解像度で用意して「カンマ(,)」で区切って並べています。
記述子を省略すれば「1x」になるので、1x用のリストでは記述子を省略しています。(3、7行目)

2つ目の <source>要素は、先程のサンプルでは省略していましたが、ここでは解像度による選択肢を入れたいので書いています。
メディア条件を「幅が 768px以上(タブレット以上のつもり)」として、横長のワイドな画像を指定。(サンプルでは 3xは書かなかったけど、必要なら追加して)

<img>要素は必ず書く。そして最後に書きます。
例え <img>要素で指定する画像を <source>要素ですでに指定してたとしても、<img>要素が無ければ何も表示されません。<img>要素の表示領域を使って画像を表示するので。

また、<img>要素を先頭に持ってきてもNG。
その後に <source>要素が続いていても、ブラウザは最初にある <img>要素の src属性の画像を表示して、その後の記述は無視します。

<source>要素で sizes属性を使う

<img>要素の「sizes属性」の使い方と同じように、<picture>要素の 子要素<source> で「sizes属性」を使うことができます。

サンプルをご覧ください。
PCの方はウィンドウサイズを広げたり狭めたりしてみてください。画像がウィンドウ幅に合わせて切り替わります。
(クリックで別ウィンドウで開きます)
サンプルのプレビュー画像

HTMLはこちら。<img>要素での使い方と同じです。

<section>
  <picture>
    <source srcset="img/berries640.jpg 640w,
                    img/berries750.jpg 750w,
                    img/berries1200.jpg 1200w"
             sizes="(max-width: 640px) 100%,
                    (max-width: 750px) 100%,
                    100%">
    <img src="img/berries1200.jpg" alt="黄色いベリー">
  </picture>
</section>

<source>要素の type属性での切り替え

<source>要素の type属性で、画像フォーマットの違う画像を選択肢にできます。

下のコードは、ロゴマークの画像を、SVG、WebP、 PNGファイルの3種類で指定しています。

<picture>
  <source type="image/svg+xml" srcset="logo.svg">
  <source type="image/webp" srcset="logo.webp"> 
  <img src="logo.png" alt="ロゴマーク">
</picture>

<source>要素の type属性で、それぞれの画像ファイルの MIMEタイプを指定。
ブラウザは上から順に試して、対応しているフォーマットがあれば表示し、それ以降を無視します。
<source>要素で表示できるフォーマットがなければ、<img>要素の PNGを表示するので、安心していろいろなフォーマットを指定できます。

<img>要素には type属性が無いので(ただし <img>要素でも SVG, WebPを普通に貼れますが)、コレが <picture>要素のいちばん力を発揮する使い方かもしれませんね。

次回予告

次回はまた CSS に戻って、text-decoration-skipプロパティを見てみましょう。
これは Text Decoration Module Level 4 で登場するプロパティで、テキストに対してライン装飾をスキップ(中断)させる方法を指定します。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2019/10 | 11
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.