"地味にスゴい"ってホント!? わかりやすくHTML5.1の追加された新機能を紹介

更新日: 2018年05月25日

プログラミング

HTML5がリリースされて早2年。

HTML5のリリースによって、Webの世界も大きく前進しました。
シンプルなタグで書ける便利な機能がいくつも実装されただけではなく、1999年以来ずっとWebの技術を支えてきたHTML4.01が初めてメジャーアップデートを迎えたからで、あえてHTML5が登場してからは、「このサイトはHTML5で書かれています」と明示するホームページまで存在します。

そこで今回は、HTML5.1で採用された機能の中で特に注目すべき新機能をピックアップしてご紹介します。

補足
ありがたいことに次のHTMLのアップデートまで10年以上も待たなくてもいいようです。2010年10月、Webで使用される各種技術の標準化を推進する為に設立された標準化団体であるW3Cは、HTML5に残された課題を解決するためにHTML5.1の構想を組み立て始めました。最終的には、HTML5.1は、2016年11月1日に「W3C勧告」として正式発表されました。

※参考：W3C勧告

実は"地味スゴ"！ HTML5.1で導入された9つの新機能

1. コンテクストメニューを実装する <menu>タグと<menuitems>タグ

HTML5.1の草案では、

タグに関する2つの要素が導入されました。それがcontextとtoolbarです。contextは右クリックをした時に出てくるメニュー(コンテクストメニュー)に独自のメニューを追加するために使われ、toolbarは親要素と子要素の関係を持つメニューを表示します。
結局、勧告の段階でtoolbarは今回見送られましたが、contextは5.1に採用されることとなりました。

右クリックしてコンテクストメニューを表示させるためには、

タグの中にいくつかの*タグを入れ込んでいきます。タグ*には次のうちどれかをtype属性で指定してあげます。

・checkbox：フォームのチェックボックスと同様、チェックを付けたり外したりが可能
・radio：フォームのラジオボタン同様、複数の選択肢の中から1つを任意に選ぶことが可能
・command：クリックすることで、何らかのアクションを実行することが可能

実際のサンプルを確認してみましょう。
2016年12月1日時点でのFirefoxの最新版「Firefox 49」では、右クリックすることでコンテクストメニューを確認することができます。※Chromeの最新版「Chrome 54」では未対応
　　

▲ サンプルの青いボックスで右クリックすると、

タグでくくった部分がコンテクストメニューに出てきます
　　
タグは、未対応ブラウザで見るとテキストのようになって見えてしまうので、「display: none」を設定するなどして、見えないようにしておく必要があります。

ヘルプを表示したり、関連ページへ移動させたりというアクションも、JavaScriptと組み合わせることで実装できます。対応ブラウザはまだ多いとは言えませんが、アイデア次第で様々な使い方ができそうです。
　　

2. 詳細情報をまとめる <details>タグと<summary>タグ

新しい*

タグ

や

タグ*では、要素をクリックすることで詳細説明を見せたり隠したりする機能が実装されました。こうした機能はこれまでJavaScriptを使って実装されていましたが、HTMLタグとして使えばセマンティックに(意味構造を保持した)コーディングすることが可能です。

実際のサンプルを確認してみましょう。
こちらのサンプルはFirefoxとChromeの両方で確認することができます。

▲ サンプルの*

タグ*でくくったセクションでは、「カレーパンの起源」という見出しをクリックすることで、詳細を見せたり隠したりすることができます

　　
この機能を使えば、商品の詳細情報を掲載して、閲覧したい方が見られるようにすることが可能です。
　　

3. インプットの新しい入力パーツ「month」「week」「datetime-local」

入力フォームでお馴染みの*タグに日付入力に関する新しい種類の入力パーツが登場しました。それが「month」「week」「datetime-local」*の3つです。

*「month」や「week」は、その名のとおり"月"や"週"を入力するために使われます。Chromeでは、両方ともドロップダウンボックスの形で表示され、"月"や"週"を入力することができます。
例えば、「month」では次のサンプルで見るように「2016年12月」の形で表示され、「week」では「2016年第49週」*という形で表示されます。

そしてHTML5.1の草案では、日時を入力する2つのインプットタイプが登場しました。それが*「datetime」と「datetime-local」*です。

「datetime」では異なったタイムゾーンを選択することができますが、「datetime-local」では常にユーザーのタイムゾーンで日時を指定することになります(例：日本＝UTC+09:00)。勧告までの検討段階で、最終的にユーザーがタイムゾーンを考慮しなければならない「datetime」は採用されず、ユーザーも作り手もタイムゾーンを意識しなくてもよい*「datetime-local」*が採用されることとなりました。

「datetime-local」では、「month」や「week」のように年月日を指定する部分と、時間を入力する部分の、2つの部分にわかれています。直接入力のほか、キーボードの矢印キー(「▲」や「▼」キー)でも数字を指定することができます。こうしたフォームの実装も以前はほとんどがJavaScriptで組まれていましたが、HTMLタグで標準装備されると、よりセマンティックなコードで表現できるようになります。
　　

4. レスポンシブ実装も簡単！imgタグの「srcset」属性

HTML5.1では、CSSを使わずにレスポンシブな画像を実装できる新しい「仕掛け」がいくつか採用されました。その一つが*「secret」属性*です。

タグにつく*「srcset」属性*は、様々なピクセル密度に応じて、倍率と代替する画像パスを複数リストアップすることができます。
ブラウザはユーザーが使っているデバイスの標準ピクセル密度や倍率、ネットワーク速度などに応じて適切な画像をピックアップします。
例えば、スマートフォンのような小さいデバイスでは、ネットワークが低速化している時に、自動的に低解像度の画像を表示する、といった具合です。

「srcset」属性は、イメージパスのURLに半角スペースと倍率(1x, 2x, ...)を加えたセットを、カンマ区切りで書いていきます。すごくシンプルに書くと、このような具合になります。

<img src="images/low-res.jpg" srcset="
　　images/low-res.jpg 1x, 
　　images/high-res.jpg 2x, 
　　images/ultra-high-res.jpg 3x">

この場合、ユーザーのピクセル比は1倍で「low-les.jpg」を表示し、2倍に拡大されれば「hi-res.jpg」、3倍以上で「ultra-hi-res.jpg」を表示します。
また、倍率を指定する代わりに、横幅(100w、200w……)を指定することもできます。

<img src="images/low-res.jpg" srcset="
　　images/low-res.jpg 740w, 
　　images/high-res.jpg 960w, 
　　images/ultra-high-res.jpg 1280w">

この場合、横幅の狭いデバイスでは「low-les.jpg」を表示し、960pxで「hi-res.jpg」、1280pxで「ultra-hi-res.jpg」と表示します。
　　

5. imgタグの「sizes」属性

倍率だけではなく、ユーザーが使っているデバイスのスクリーンサイズに応じて表示を変えたい、というケースもあるはずです。
例えば、横幅の広いデバイスでは2カラムでいくつもの画像を並べて表示し、狭いデバイスでは1カラムで画像も1つずつ並べて表示したい、という場合になります。こうした場合は、タグに*「sizes」属性*をつけてください。

「sizes」属性は先ほど紹介した*「srcset」属性と一緒に使用することが可能で、スクリーンの横幅を読み取って、画像自体の倍率を決定することができます。「sizes」属性*ではメディアクエリと長さをセットで指定します。シンプルに書くと、このようになります。

<img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 33.3vw" srcset="
　　images/low-res.jpg 1x, 
　　images/high-res.jpg 2x, 
　　images/ultra-high-res.jpg 3x">

「vm」は見慣れない単位かもしれませんが、これは「Viewportの横幅に対する割合(1％ of Viewport's Width)」のことです。40emまでは画像を100％で表示し、それ以上では3つを並べて表示する、といった具合です。メディアクエリが指定されていない部分(ここでは「33.3w」の部分)は、デフォルトの長さを表しています。

ページの横幅をフルに使って表示させたい場合、画像の解像度も考慮すると、次のように書くこともできます。

<img src="images/low-res.jpg" sizes="100vw" srcset="
　　images/low-res.jpg 640w, 
　　images/high-res.jpg 1024w, 
　　images/ultra-high-res.jpg 1800w">

非常にシンプルです。
　　

6. <picture>タグと<source>タグ

srcsetとsizesによって様々な解像度やスクリーン幅に応じて画像を表示することが可能になりました。しかし、スクリーンサイズによって画像のサイズを変えるだけでは満足できない場合は、タグを使ってみてください。タグを使うことで、次のような分岐を持った画像表示が可能になります。

タグは、複数のタグと1個のタグを挟み込むことで、あらゆる画面サイズ・解像度で様々な画像を表示することが可能になります。では同じくsrcsetが利用できるほか、media部分にメディアクエリを指定することが可能です。

<picture>
　<source media="(max-width: 20em)" srcset="
　　images/small/low-res.jpg 1x,
　　images/small/high-res.jpg 2x, 
　　images/small/ultra-high-res.jpg 3x
　">
　<source media="(max-width: 40em)" srcset="
　　images/large/low-res.jpg 1x,
　　images/large/high-res.jpg 2x, 
　　images/large/ultra-high-res.jpg 3x
　">
　<img src="images/large/low-res.jpg">
</picture>

スクリーンサイズや解像度に合わせて適切な画像を表示することができれば、ユーザーが閲覧時に感じるストレスを減らすことが可能です。ここまで設定するのは制作時には大変かもしれませんが、ユーザーにとっては親切な行為だと言えます。
　　

7. 「form.reportValidity()」メソッドでフォームの中身をチェック

HTML5では、JavaScriptでバリデーター(入力した値が指示通りにされているのかをチェックするプログラム)を実装しなくとも*form.checkValidity()というメソッドを使って、値の送信前にフォームの中身をチェックすることができました。今回実装されたform.reportValidity()*というメソッドも使い方は非常によく似ています。

*form.reportValidity()*を使うことで、値の整合性を確認して結果を返しますが、エラーの場合にはブラウザ内でユーザーに直接エラーであると知らせます。こちらのサンプルでは、テキストボックスに値を入れずに送信するとエラーが返されます。

▲ 空白の場合には、送信する前にエラーを返します
　　

8. 「allowfullscreen」属性で簡単に全画面表示

<span data-tooltip="word-link-5452" class="word-link">タグ</span>にallowfullscreen属性を指定することで、フレームを全画面表示することが可能になりました。allowfullscreenはbooleanタイプ(true/falseでスイッチングを行うタイプ)で、*requestFullscreen()*メソッドを呼び出すことで全画面表示を呼び出すことができます。
　　