使い方aboutお問い合わせ広告掲載とても効率的になった!HTML5に関する「役立つ」まとめ作成:2013/12/16更新:2014/11/01Web制作サイト構築をするときに、フォームまわりの改善や動画やAPIを使わなくてはいけない機会があったので、ついでにHTML5のマークアップをおさらいをしました。今回はサイトを構築する上で覚えておくと役に立つ、使用頻度の高いポイントだけおさえてまとめました。)関連の便利な新要素これまでカレンダーやプログレスバーなどはJavaScriptで実装されていましたが、HTML5だけで実装可能です。今後積極的に使っていきたいな、というものをリスト化しておきます。ブラウザによって非表示や結果が違うものあります。autofocus/自動フォーカス。文章のロード後すぐにフォーカスautocomplete/履歴から入力内容を予想して提示する機能を有効にするrequired/入力必須にする。空送信するとエラーを返すpattern/入力欄の値をチェックするための正規表現を指定するplaceholder/入力欄に「入力例やヒントなどのテキスト」をあらかじめ表示datalist/サジェスト(入力候補)を提供output/計算結果を表示。数値入力で自動計算するkeygen/公開鍵暗号方式の鍵ペアジェネレーターを表示。鍵ペア生成と送信progress/タスク進行度合いを表すプログレスバーmeter/割合を表すゲージ。全体に対する使用割合などを視覚化するemail/type属性に「email」を指定するとメールアドレス以外エラーにできるmultiple/複数のメールアドレスをカンマ区切りで入力できるnumber/フォームパーツを数値にする。刻みを指定できるrange/数値の入力欄に。chrome/Operaはスライダーで表示されるcolor/フォームで色指定できる。chromeではカラーピッカー表示datetime-local/年月日入力するコントロール表示。chrome/Operaはカレンダーtime/時分秒の入力欄表示。要素の中でもブログや通販サイトを作る上で使用頻度が高いもの、これから使っていきたいものをリスト化、あまり使わないルビ関連などは省いてます。download/ダウンロードの保存ファイル名を指定できるsandbox/iframe要素で、スクリプト・ポップアップ無効など安全性を高めるscoped/style要素で指定するとbody内にstyle有効範囲を持たせることができるsection/見出しと見出しに対応する文章や画像。まとまりごとにグループ化article/ブログエントリーやニュース記事のように単体で成り立つものnav/グローバルナビゲーション、ぱんくずなどの主要なセクションaside/サイドバーや広告・SNSボタン・補足情報など、切り離しができる箇所header/ロゴなど、セクションにおけるヘッダーfooter/コピーライトなどのフッター情報small/フッターにある著作権表記はsmall要素で記述するaddress/連絡先。body要素なら文章全体、article要素ごとならそれぞれの記事figure/図表。ブログ記事内の写真は自己完結しているのでfigureを使うfigcaption/図表のキャプション。タグHTML5ではこれまでプラグインなどで実現していた動画やオーディオの再生が可能になります。videoタグはビデオファイルを再生し、プレイヤーを表示します。srcで動画ファイルURL、widthとheightで縦横、controlsで再生・一時停止ボタン、autoplayで自動再生、loopでループ、posterでサムネイル表示。タグ音声ファイル再生ならaudioタグ。こちらも、controls/autoplay/loopが使えます。音声を最初から読み込みたいときは「preload」属性を使います。Boosterアプリケーション向けの機能/APIHTML5ではこれらを使うことで、便利で使いやすいウェブアプリ機能を実装することができます。JavaScriptから利用します。API」ユーザーの安全性やプライバシーに配慮した仕様となっています。以下、サンプルつきで詳しく解説してあります。Storage」クッキーに代わるデータ保存の仕組みです。データ保存・削除・クリア・上書きなどの操作もJavaScriptで行うことができます。セッションとlocalストレージの解説など。Storage-HTML5のAPI、および、関連仕様7.サーバー双方向通信ブラウザとサーバー間に接続を確立する「WebSocket」サーバーとクライアント双方向のデータ送信を可能にします。高負荷な計算処理や複数ファイルの読み込み時、別のファイルをバック部ラウンドで実行したり。Workers」の使い方。