MENU

無料相談

  1. HOME
  2.  > 
  3. サイト職人スタッフブログ
  4.  > 
  5. HTML5.1の新仕様について

サイト職人スタッフブログ

HTML5.1の新仕様について

code-1785541_640ホームページ制作に関わる方であればHTML5.1が2016/11/1付けで正式勧告された事はご存知でしょう。しかしHTML5.1が導入されたとして、何がどのように変化するのか、具体的に知らない方も多いのではないかと思います。今回は、HTML5.1について、特によく使うであろう項目について解説していきたいと思います。

<menu>タグと<menuitems>タグでコンテクストメニューが実装可能

まず、<menu>タグについて解説していきます。<menu>タグには、contextとtoolbarと呼ばれる要素が追加されることになりました。contextの利用用途ですが、右クリックを行った際に、独自でメニューを追加することができる機能として使われることになります。一方のtoolbarの利用用途ですが、親要素と子要素の関係を持つメニューを表示するために利用されます。もし、右クリックを行ってコンテクストメニューを表示したいという場合は、<menu>タグの中に<menuitems>タグを追加し、<menuitems>タグには、(checkbox・radio・command)の中からtype属性で指定を行っていきます。

<details>タグと<summary>タグで詳細情報をまとめられる

HTML5.1では、<details>タグと<summary>タグを利用して詳細説明を見せたり隠したりする機能が搭載されたことをご存知でしょうか。今までであれば、JavaScriptを利用して実装していたという人もいるでしょう。これからはHTMLタグとして利用することで意味構造を保持した状態でサイト制作が可能です。

「month」「week」「datetime-local」は、inputタグの新しい入力パーツ

フォームなどを作成するためには、<input>タグの利用が欠かせません。<input>タグに日付を入力するための新しい入力パーツが登場することになり、そのパーツが「month」「week」「datetime-local」です。このような新しいパーツが導入されたとしても、難しく考える必要はありません。なぜなら、名前の通りの利用が可能だからです。「month」や「week」であれば、当然のことながら月と週を表しています。Google Chromeを利用するのであれば、両者は、ドロップダウンボックスの形式で表示することができます。

また、HTML5.1において日時を入力するためのinput typeが登場することになりました。利用するには、「datetime」と「datetime-local」の利用が欠かせません。異なったタイムゾーンを選択したければ、「datetime」を利用することで実現可能ですが、「datetime-local」を利用した場合、常にユーザーのタイムゾーンを日時で指定することができるようになります。「datetime-local」について深く説明すれば、「month」や「week」で年月日を指定する部分と、時間を入力する部分にわかれることになりました。数字で入力することもできますが、上と下の矢印キーでも数字を選ぶこともできます。このようなシステムは、JavaScriptで組んでいたという方もいると思いますが、HTMLタグで標準装備を行うことで表現することができるようになったのです。

imgタグの「sizes」属性について

インターネットを利用していると、倍率以外にもお客様が利用しているデバイスのサイズに応じた画面表示を行いたいということがあるでしょう。
また、幅の広いデバイスであれば、2カラム形式で画像を並べて表示し、画面の幅が狭いデバイスであれば、1カラム形式で画像を一枚ずつ並べて表示したいということがあります。このような形式に対応するのが、 imgタグの「sizes」属性です。「sizes」属性ですが、「srcset」属性と一緒に使用することができるため、画面の横幅を読みとり、画面自体の倍率を決定することが可能となります。また、「sizes」属性では、メディアクエリと長さを一緒に指定します。

HTML5.1で変化すること

HTML5.1が正式勧告されることでWebサイトの制作者であれば、手軽に機能を実装できるように改良されたと言えるでしょう。
今までJavaScriptやCSSを利用して実装していたものが、HTMLでも実装可能となります。ホームページ制作に関わる方であれば、最低限の知識として勉強しておく必要があるでしょう。
現在、HTML5.1によるインターネットブラウザの欠陥を補う作業も進められているため、将来的な話となりますが、新しい機能が搭載されたHTML5.1が利用されたサイトを見ることが増えるでしょう。また、HTMLは、これで完成というわけではありません。定期的なマイナーバージョンアップデートが行われる予定ですので、よりサービスが充実したHTMLが利用できることを期待したいです。

最後に

ホームページ制作をする方であれば、HTMLやJavaScriptなどの知識は必要になります。
HTMLの歴史から考慮すれば、HTML4からHTML5へバージョンアップすることで、サービスが寄り広がったように感じます。今回、HTML5.1にサービスが広がることでシンプルな文書構造やコンテンツを充実させることが可能となりました。
現在、インターネットの世界ではレスポンシブ化が主流となっているため、これらの動きにもHTML5.1が対応できるようになるため、仕事が非常に効率的になると言えます。まだまだ進化することができるHTML5.1ですが、業務上どのように能力を発揮するのか、今からしっかりと観察しておく必要があると言えるでしょう。

PAGETOP