HTML 5.1 ざっくりとしたまとめ

Pocket

2016年11月1日付でW3CがHTML5.1を勧告しました。
ブラウザ側の対応はまだまだですが、こんなことがHTMLでできるようになったということだけでも知っておこうと思い、ざっくりとまとめました。

ちなみに、HTML5からの変更差分はこちらにまとめられています

imgのsrcset属性やpicture要素によるレスポンシブイメージ

これまでは、PCやスマートフォン、タブレットなど各端末用のイメージをスクリプトで切り替えていましたが、これをHTMLで完結できるようになりました。
レスポンシブな画像を実装できる新しい仕組みの一つがsecret属性です。

imgタグにsrcset属性を追加すると、ピクセル密度に応じて、倍率と代替する画像パスを複数リストアップすることができます。
srcset属性の書き方は、こんな感じです。

<img src="images/small.jpg" srcset="
  images/small.jpg 1x, 
  images/medium.jpg 2x, 
  images/large.jpg 3x">

srcset属性の値は、カンマ区切りで書いていきます。
イメージのパスの後に半角スペースを挟んで1x2x3xといった感じで倍率をかきます。これは倍率だけでなく、100w200wという感じで横幅を指定することもできます。

レスポンシブな画像を実装できる新しい仕組みのもう一つは、picture要素です。
picture要素を使う場合はこんな感じです。

<picture>
  <source media="(min-width: 960px)" srcset="large.jpg" />
  <source media="(min-width: 480px)" srcset="medium.jpg" />
  <img src="small.jpg" alt="" />
</picture>

pictureタグは、複数のsourceタグと1個のimgタグを挟み込むことで、あらゆる画面サイズ・解像度で様々な画像を表示することが可能になります。
sourceではsrcsetが利用でき、またmedia部分にメディアクエリを指定することが可能です。
picture要素とsource要素を使用する事で、任意の条件に応じた異なる画像を提供する事ができます。

右クリックのメニューを独自に作れるmenuタグとmenuitemsタグ

menu要素のtype属性にcontextを指定すると、右クリックで表示されるコンテキストメニューに対応するようになりました。その時に表示する各メニューをmenu要素の子要素としてmenuitem要素で指定します。

<menu type="context" id="menu">
  <menuitem label="hello" onclick="alert('hello')">
  <menuitem label="hoge hoge" onclick="alert('hoge hoge')">
</menu>

スクリプトなしexpanderを実現できるdetailsタグとsummaryタグ

ある要素をクリックするとその用語の詳細情報など表示されるやつが、HTMLのみで実装できるようになりました。
こんな感じのやつです。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-01-01-19-45-25
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-01-01-19-45-36

これは、detailsタグの子要素にsummaryタグとpタグを置くことできます。
実際のマークアップはこんな感じです。

<details>
  <summary>
    Web
  </summary>
  <p>
    WWW / World Wide Web / ワールドワイドウェブ Webとは、インターネット上で標準的に用いられている、文書の公開・閲覧システム。 文字や画像、動画などを一体化した文書をネット上で公開・配布したり、また、それを入手・閲覧することができる。
  </p>
</details>
<details>
  <summary>
    ティムバーナーズリー
  </summary>
  <p>
    ティモシー・ジョン・バーナーズ=リーは、イギリスの計算機科学者。ロバート・カイリューとともにWorld Wide Webを考案し、ハイパーテキストシステムを実装・開発した人物である。また、URL、HTTP、HTML の最初の設計は彼によるものである。
  </p>
</details>

そのほかにも様々なものが追加されていますが、これまでのHTMLよりもHTML単体でできることが増えてきたなといった感じです。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>