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が便利になっていくことを考えるととても楽しみです。

snowfallプラグインを使ってみる

標準

今回は趣旨を変えて、Webページ作りしてみたいと思います。作りたいのは、「背景に雪が降るページ」です。「NEWGAME!のページ」をモデルにしていきたいと思います。もちろん、完璧に一致ではなく、snowfallプラグインを実用範囲で使いこなせる程度に。

前提

このsnowfallプラグインはjQueryを前提として稼働します。故に、予めjQueryの導入の準備をする必要があります。今回使うjQueryのバージョンは「3.1.0」です。現在の最新版ですね。今回はこれをgoogleのサーバーに用意されているものを利用するので、わざわざダウンロードする必要はありません。

snowfallプラグイン

今回の主題であるsnowfallプラグインはGitHubでプロジェクトになっているので、以下リンクからダウンロードしてください。

loktar00/JQuery-Snowfall

ダウンロードしたプロジェクトファイルのうち、「src」の中にある「snowfall.jquery.jsのみを作業フォルダーにコピーしてください。

コード

以下に私の環境下でのsnowfallを稼働させるのに必要なコードを示します。環境によって、パスなどが違うので、ちゃんと読み替えてください。

まずは、ページの骨組みであるHTMLです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Snow Fall</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script> <!--// jQuery読み込み //-->
        <script src="js/snowfall.jquery.js" type="text/javascript"></script> <!--// snowfall読み込み //-->
        <script src="js/snowfall_config.js" type="text/javascript"></script> <!--// snowfall設定 //-->
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>
        <div id="wrap">
            <div id="image">
                <img id="logo" src="img/top_logo.png"  />
            </div>
        </div>
    </body>
</html>

このHTML中にある#wrapの描画域のみに雪を降らせる仕様になっています。もちろん、#wrapのようなものを複数箇所に指定すれば、それぞれに降らせることも出来ます。

次にCSSです。

body {
    background-color:aqua;
}
#wrap {
    width:100%;
    height: 100%;
    position:absolute;
    top:0px;
    left:0px;
}
#image {
    width:100%;
    margin:0 auto;
    top:30%;
}
#image img {
    display:block;
    margin:0 auto;
}
*::-webkit-scrollbar {
  display: none;
}
#wrap &gt; img {
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}

@-moz-keyframes 
spin { 100% {
  -moz-transform: rotate(360deg);
}
}

@-webkit-keyframes 
spin { 100% {
  -webkit-transform: rotate(360deg);
}
}

@keyframes 
spin { 100% {
  -webkit-transform: rotate(360deg);
  transform:rotate(360deg);
}
}

このCSSでは主に#wrapの定義と、雪の回転を設定しています。この回転を設定しているのが@keyframesspinですね。これで、目標のものを常にグルグル回すことが出来ます。他の場所でも使えそうなので、これで覚えてしまいましょう。

次にsnowfallの挙動を定義するJavaScriptです。

$(document).ready( function(){
	$("#wrap").snowfall({
		flakeCount : 15,  //雪の量
		flakeIndex : "-5",  //雪のz-indexの値
		minSize : 5,  //最小サイズ
		maxSize : 40,  //最大サイズ
		minSpeed : 0.5,  //最小速度
		maxSpeed : 1,  //最大速度
		//  round : true,  //粒を丸めるか
		//  shadow : false,  //影をつけるか
		//  collection : "#ground",  //積もらせる要素
		image : "img/snow.png"  //雪粒に設定する画像
    });
});

これがsnowfallの設定用JSです。ここで、様々な挙動を設定することが出来ます。また、easingプラグイン等などとも組み合わせることができるので、その効果は無限大です。

この通りに進めていくと下記図のような雪が降るページが完成すると思います。

snowfall