HTML5.1勧告での変更点の紹介

標準

先月始めの11月1日、W3C(World Wide Web Consortium;ワールド・ワイド・ウェブ・コンソーシアム)からHTML5.1を勧告する文書が公開されました。今回はHTML5.1に搭載された新機能がとても便利なものが多かったと個人的に思ったので、まとめていきます。また、利用できるブラウザについてはCan I use…?で調べて、一般的なPC用のブラウザについての情報についてのみ紹介しています。(※編集当時の情報です。)

picture要素

img要素にpictureやsource属性が追加されました。これを使うことで、低解像度環境で画像を表示させたい時、例えばトリミングなどして見やすくした画像を表示させることが出来ます。実際にChromeで試してみました。

しっかりと分岐されているのが分かります。以下のようにHTMLを記述すると実装できます。

<picture>
   <source media="screen and (max-width: 980px)" srcset="small.png">
   <img src="large.png" alt="#">
</picture>

source要素のmedia属性で指定しているmax-widthはメディアクエリで解像度の指定ができるので便利です。メディアクエリと同様、source要素は複数追加することが出来ます。この機能はIE以外の全てのブラウザで利用できます。

sizes属性とsrcset属性

sizes属性とsrcset属性はimg要素に対して追加されたもので、組み合わせて使うことで閲覧環境によってブラウザが判断した上で、最適な画像を読み込んでくれるように切り替えることが出来ます。

<img src="large.png"
     sizes="50vw"
     srcset="small.png 320w, smaller.png 640w">

sizes属性ではビューポート(≒ブラウザの横幅)の何%で画像を表示させたいかを指定します。単位のvwは「Viewport Width」の略です。また、srcset属性では「画像のパス 表示させたい解像度(単位:w)」をコンマ繋ぎで記述します。利用例1では採寸基準がブラウザ幅の50%になるので、620pxの時に320wの画像、1280pxの時に640wの画像を表示するように出来ます。また、sizes属性にはメディアクエリを使うことが出来、以下のように更に細かい分岐が可能になります。

<img src="large.png"
     sizes="(max-width: 640px) 100vw, 50vw"
     srcset="smaller.png 320w, small.png 640w">

利用例2ではsizes属性にメディアクエリを加えました。これをすることで、640px以下の環境では採寸基準はブラウザ幅の100%、それ以上では50%になり、これによってスマホ版とデスクトップ版とでカラム数を異なるものにしたいという望みをより簡単に、より最適に実現させることが出来るようになりました。しかしながら、この属性はIEには対応していません。そんな時はpicturefillというライブラリを使うことで解決することが出来ます。

また、srcset属性には相対的な比率を「*.png 1x, *.png 2x」という感じで記述する方法がありますが、この記述を採用した場合はsizes属性を使用することは出来ません。今回は詳しい説明を省きます。

details要素とsummary要素

details要素とsummary要素が追加されたことで、難解な用語を簡単にHTMLだけを使って表示させることが出来るようになりました。

<details>
   <summary>詳細見出し</summary>
   <p>簡単にHTMLだけを使って詳しい説明ができます。</p>
</details>

記述法は至って簡単で、上記の通りです。この記述だけで以下のサンプルのように簡単に説明するための展開タブが実装できます。※IE、Edgeは利用できません。


 

詳細見出し

簡単にHTMLだけを使って詳しい説明ができます。

 


sortable属性

table要素にsortable属性を追加することが出来るようになりました。これによって、テーブルの中でもその列のものがソート出来るのか出来ないのかをブラウザー側に示すことが出来ますが、現段階ではどのブラウザでもソートするまでの機能を実装しているものはありません。しかし、将来的にはソート出来るブラウザが登場するものと見られ、これからの発展が期待されます。ここでは、実際のソースを掲載します。

<table sortable="sortable">
   <thead>
     <tr>
       <th sorted="1">名前</th>
       <th sorted="2">数学Ⅲ</th>
       <th>物理</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Aくん</td>
       <td>73</td>
       <td>83</td>
     </tr>
     <tr>
       <td>Bくん</td>
       <td>52</td>
       <td>43</td>
     </tr>
   </tbody>
</table>

menu要素とmenuitem要素

これらを使うことで、JavaScriptなどを一切利用せずにHTMLのみでコンテクストメニュー(右クリックメニュー)を展開させることが出来ます。この要素は現在はFirefoxしか対応していませんが、順次Chromeなどのブラウザでも利用できるようになる予定です。また、対応していないブラウザが殆どの為、現在実装するとそのまま出てきてしまいますので、CSSなどで隠すようにしてください。

<p contextmenu="context-menu">
   ここを右クリック<!--// 反応する領域を定義 //-->
</p>

<menu type="context" id="context-menu">
   <menuitem type="checkbox" checked="true">チェック1</menuitem>
   <menuitem type="checkbox">チェック2</menuitem>
   <menuitem type="checkbox" disabled>無効化</menuitem>
   <menuitem type="command" onclick="alert('押されました。')">コマンド</menuitem>
   <menuitem type="radio" name="radio" checked="true">ラジオ1</menuitem>
   <menuitem type="radio" name="radio">ラジオ2</menuitem>
</menu>

サンプルを実装すると以下のようになります。Firefoxで見てみてください。


ここを右クリック


最後に/補足

ここまでHTML5.1での追加要素を説明してきましたが、一部に過ぎません。この他にもAPI関連やイベント関連などたくさんあります。また、追加ではなく変更されたものや、廃止されたものもあります。これからHTML5.2や5.3がリリースされるのではないかというのが世間一般の予測ですが、これから更にHTMLが便利になっていくことを考えるととても楽しみです。

投稿者プロフィール

yoshipc
コンピューター関連を得意としています。PHPが専門です(尚、技量はお察し)。このブログとMastodonのインスタンスを運営・管理しています。よろしくお願いいたします。

コメントを残す

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