HTML 5.1の14新機能：実践的解説と活用例

10. フレームのフルスクリーン許可

フレーム向けに開発されたブール属性allowfullscreenで、requestFullscreen()メソッド使用時、コンテンツがフルスクリーン表示可能か制御。例：YouTubeプレーヤー埋め込みiframe。プレーヤーをフルスクリーン表示させるにはallowfullscreen属性必須。

<article>
  <header>
    <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p>
    <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p>
  </header>
  <main>
    <p>私の新しい動画を見て！</p>
    <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe>
  </main>
</article>

9. ネスト可能なheaderとfooter

HTML 5.1では、headerとfooterを別のheader内にネスト可能。セクショニングコンテンツ内に含まれる場合、header要素にheaderまたはfooter追加可能。<section>や<article>等のセマンティックセクショニング要素に詳細ヘッダー追加時に有用。以下コードでは、<article>が<header>を含み、その中に<aside>タグがあり、さらに<header>タグを含む。

<article>
  <header>
    <h2>Lesson: How to cook chicken</h2>
    <aside>
      <header>
        <h2>About the author: Tom Hank</h2>
        <p><a href="./tomhank/">Contact him!</a></p>
      </header>
      <p>Expert in nothing but Cooking. The cookbook sideshow.</p>
    </aside>
  </header>
  <p><ins>Pour the marinade into the zip-top bag with the chicken and seal it. Remove as much air as possible from the bag and seal it. </ins></p>
</article>

8. ゼロ幅画像

新HTMLバージョンではゼロサイズ画像追加可能。ユーザー向けでない画像使用時。img要素が画像表示以外の目的（ページビュー計測サービスの一部等）で使用される場合、widthとheight属性に0値使用。ゼロ幅画像には空属性使用推奨。

<img src="theimagefile.jpg" width="0" height="0" alt="">

7. フォーム検証

新メソッドreportValidity()でフォーム検証と結果取得、エラーをブラウザ上でユーザーに即時報告可能。要素が同時に複数問題抱える場合、ユーザーエージェントは複数制約違反報告可能。この場合、「password」入力が必須だが空なのでエラー表示。

<h2>Form validation</h2>
<p>Enter details</p>
<form>
  <label> Mandatory input <input type="password" name="password" required /> </label>
  <button type="submit">Submit</button>
</form>
<script>
  document.querySelector('form').reportValidity()
</script>

6. ブラウザコンテキストメニュー

HTML 5.1では<menu>タグで1つ以上の<menuitem>要素からなるメニュー定義し、contextmenu属性で任意要素にバインド可能。<menu>要素のidは、コンテキストメニュー追加したい要素のcontextmenu属性値と同一必要。各<menuitem>は3形式：

• radio — グループからオプション選択
• checkbox — オプション選択/解除
• command — クリックでアクション実行

<h2 contextmenu="popup-menu"> 右クリックでコンテキストメニューデモ。 </h2>
<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked="true">Checkbox 1 </menuitem>
  <menuitem type="command" label="Command" onclick="alert('WARNING')">Checkbox 2</menuitem>
  <menuitem type="radio" name="group1">Radio button a</menuitem>
  <menuitem type="radio" name="group1" checked="true">Radio button b</menuitem>
  <menuitem type="checkbox" disabled>Disabled menu item</menuitem>
</menu>

5. スクリプトとスタイルで暗号論的nonce使用

暗号論的nonceは一度だけ使用可能なランダム生成数で、ページリクエストごとに再生成必要。このnonce属性は<script>と<style>要素内で使用可能。一般にウェブサイトのコンテンツセキュリティポリシー（CSP）で、特定スタイル/スクリプトをページ実装すべきか判断に使用。以下コードでは値ハードコードだが、実世界ではランダム生成。

<script nonce='d3ne7uWP43Bhr0e'> The JavaScript Code </script>

4. 逆方向リンク関係

rev属性はHTML 4で定義されたがHTML5に含まれず。W3Cが<a>と<link>要素でrev属性を再採用。rev属性は現在ドキュメントとリンクドキュメントの関係を逆方向で指定。広く使用される構造化データマークアップ形式RDFaサポートのため導入。例：各々レッスン含む2ドキュメント、リンクをrelとrev属性で定義…

// URL "chapter1.html" のドキュメント
<link href="Lesson2.html" rel="next" rev="prev">
// URL "chapter2.html" のドキュメント
<link href="Lesson1.html" rel="prev" rev="next">
<link href="Lesson3.html" rel="next" rev="prev">

3. 情報表示/非表示

新要素<details>と<summary>で、コンテンツに拡張情報追加可能。要素クリックで追加情報ブロック表示/非表示切替。追加情報はデフォルト非表示。コードでは<summary>タグを<details>タグ内に配置。<summary>タグ後に非表示にしたい残りコンテンツ追加。

<section>
  <h3>Error Message</h3>
  <details>
    <summary>このファイルはネットワークエラーでダウンロードされませんでした。</summary>
    <dl>
      <dt>File name:</dt><dd>Passcode.txt</dd>
      <dt>File size:</dt><dd>8 KB</dd>
      <dt>Error code:</dt><dd>342a</dd>
    </dl>
  </details>
</section>

2. 更なる入力タイプ

HTML入力要素に3つの入力タイプ追加——week、month、datetime-local。名前通り、最初の2つでユーザーが週または月選択可能。ブラウザサポートにより、両方ともドロップダウンカレンダーとしてレンダリングされ、特定週または年月選択可能。datetime-localはタイムゾーンなし日時入力フィールド指定。月/週入力と同様にデータ選択、時刻は別途入力。

<section>
  <h2> Week, Month and Datetime-local </h2>
  <form action="action_page.php">
    Choose a week: <input type="week" name="year_week"> <input type="submit">
  </form>
  <form action="action_page.php">
    Birthday (month and year): <input type="month" name="bdaymonth"> <input type="submit">
  </form>
  <form action="action_page.php">
    Joining (date and time): <input type="datetime-local" name="bdaytime"> <input type="submit" value="Send">
  </form>
</section>

1. レスポンシブ画像

W3CがCSSなしでレスポンシブ画像実装する新機能導入。これらは…

srcset画像属性

srcset属性で、ピクセル密度が異なる複数の代替画像ソース定義可能。ブラウザがユーザーデバイスに応じて適切な品質画像選択可能。例：モバイルデバイス・低速ネットワークユーザーには低解像度画像表示が望ましい。srcset属性に独自のx修飾子で各画像のピクセル比記述可能。例示通り、ユーザーのピクセルが3なら高解像度画像表示。

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

異なるピクセル比ではなく、w修飾子で異なるサイズ画像表示選択可能。この場合高解像度画像は1600px定義。

<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >

sizes画像属性

多くの場合作者は異なる画面サイズで異なる画像表示希望。これはsizes属性で可能。画面幅を画像割当スペースに変換し、srcset属性で適切な画像選択。例…

<img src="clicks/low-res.jpg" sizes="(max-width: 25em) 60vw, 100vw" srcset="clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >

この場合、sizes属性で画像幅をビューポート幅100%（ビューポート幅25em超過時）または60%（25em以下時）と定義。

picture要素

<picture>要素で、異なる画面サイズ向け複数ソース画像宣言可能。<img>を<picture>要素でラップし、複数子<source>要素記述。<picture>タグ単体では何も表示されない。デフォルト画像ソースをsrc属性値、代替画像ソースをsrcset属性内に宣言。

<picture>
  <source media="(max-width: 25em)" srcset=" clicks/small/low-res.jpg 1x, clicks/small/medium-res.jpg 2x, clicks/small/high-res.jpg 3x ">
  <source media="(max-width: 60em)" srcset=" clicks/large/low-res.jpg 1x, clicks/large/medium-res.jpg 2x, clicks/large/high-res.jpg 3x ">
  <img src="clicks/default/medium-res.jpg">
</picture>