1. トップページ
  2. ブログ
  3. 制作系
  4. W3C、HTML5.1の仕様を決...

どうもwebメディアプランナーの才木です。
2016年11月1日、W3CがHTML5.1を勧告として公開しました。これは2014年10月28日のHTML5の勧告から約2年ぶりの勧告となります。

さっきから勧告と何度も唱えていますが、勧告とは何を意味するのでしょうか。
この記事では勧告の意味、バージョンアップの中で注目される追加について書いていきます。

「HTML5.1を勧告」の勧告とは何か?

この勧告とはHTMLのバージョンアップのフローの最終段階にあたり、「完全に仕様が決定し、規格文書が発表される状態」この状態のことを指します。
ウェブの人間からすれば、勧告となった場合新しい規格に準拠する為、今までの仕様からの変更点などよく目を通しておく必要があります。

HTML5.1で追加された注目の要素 picture

HTML5.1は、HTML5のマイナーバージョンアップデートとなるため、大きな変化があるわけではありません。しかし要素、属性、DOM定義などと割と広い範囲に仕様の追加や変更があり、HTML5で定義しきれなかった部分の仕様変更となるようです。(実際にHTML5へのアップデート時に全てのアップデートは間に合わず、2014年と2016年2回に分けてアップデートするといった内容の発表をしています。)

追加された機能の中で僕が最も注目しているのは、画像サイズを簡単に変更可能な「picture要素」です。
今まではPCやスマートフォンで、ピクセル密度の高い端末(Retinaディスプレイやスマホ)は全ての画像に2倍の画像(面積比は4倍)を適応することで対応してきました。
しかし2倍以上のピクセル密度を持った端末の登場等倍のサイズで綺麗なのにわざわざ2倍の画像を読み込む問題があり、
今回正式に採用されたということでうれしいですね!

例えば、PCには大きい画像、スマートフォンには小さい画像を表示させたい場合、画像を埋め込む「img要素」を使用すると表示画像の切り替えが面倒ですが、メディアリソースを指定する「source要素」をpicture要素に複数持たせるだけで、端末に応じた画像を表示させることができます。またRetina対応なども可能です。

使用イメージ

 <picture>
  <source media="(max-width: 500px)" srcset="pecodesignSP.jpg, pecodesignSP@2x.jpg 2x">
  <img src="pecodesign.jpg" srcset="pecodesign.jpg 2x" alt="ペコデザイン">
  </picture>

このサイトでは、すでにモダンブラウザで先行してsrcsetなどの指定が出来たので使用していますが、まだ取り組んでいないという方は是非チャレンジしてみて下さい。