calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

とても効率的になった!HTML5に関する「役立つ」まとめ

HTML5_Reference

サイト構築をするときに、フォームまわりの改善や動画やAPIを使わなくてはいけない機会があったので、ついでにHTML5のマークアップをおさらいをしました。今回はサイトを構築する上で覚えておくと役に立つ、使用頻度の高いポイントだけおさえてまとめました。

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

HTML5 タグ一覧

動画/音楽再生

アプリケーション向けの機能/API

サンプル

テンプレート

HTML5 タグ一覧

1.フォーム(input )関連の便利な新要素

form_element_html5

これまでカレンダーやプログレスバーなどはJavaScriptで実装されていましたが、HTML5だけで実装可能です。今後積極的に使っていきたいな、というものをリスト化しておきます。ブラウザによって非表示や結果が違うものあります。

  • autofocus/自動フォーカス。文章のロード後すぐにフォーカス
  • autocomplete/履歴から入力内容を予想して提示する機能を有効にする
  • required/入力必須にする。空送信するとエラーを返す
  • pattern/入力欄の値をチェックするための正規表現を指定する
  • placeholder/入力欄に「入力例やヒントなどのテキスト」をあらかじめ表示
  • datalist/サジェスト(入力候補)を提供
  • output/計算結果を表示。数値入力で自動計算する
  • keygen/公開鍵暗号方式の鍵ペアジェネレーターを表示。鍵ペア生成と送信
  • progress/タスク進行度合いを表すプログレスバー
  • meter/割合を表すゲージ。全体に対する使用割合などを視覚化する
  • email/type属性に「email」を指定するとメールアドレス以外エラーにできる
  • multiple/複数のメールアドレスをカンマ区切りで入力できる
  • number/フォームパーツを数値にする。ステップアップ等のコントロールに
  • min/max/step/それぞれ最小値・最大値・数値の刻みを指定できる
  • range/数値の入力欄に。chrome/Operaはスライダーで表示される
  • color/フォームで色指定できる。chromeではカラーピッカー表示
  • datetime-local/年月日入力するコントロール表示。chrome/Operaはカレンダー
  • time/時分秒の入力欄表示。chrome/Operaはボタンダウン入力ボックス利用可
  • dirname/文字列の書式方向(左右)を指定
  • search/検索ボックス

2.基本要素一覧

element_html5

要素の中でもブログや通販サイトを作る上で使用頻度が高いもの、これから使っていきたいものをリスト化、あまり使わないルビ関連などは省いてます。

  • download/ダウンロードの保存ファイル名を指定できる
  • sandbox/iframe要素で、スクリプト・ポップアップ無効など安全性を高める
  • scoped/style要素で指定するとbody内にstyle有効範囲を持たせることができる
  • section/見出しと見出しに対応する文章や画像。まとまりごとにグループ化
  • article/ブログエントリーやニュース記事のように単体で成り立つもの
  • nav/グローバルナビゲーション、ぱんくずなどの主要なセクション
  • aside/サイドバーや広告・SNSボタン・補足情報など、切り離しができる箇所
  • header/ロゴなど、セクションにおけるヘッダー
  • footer/コピーライトなどのフッター情報
  • small/フッターにある著作権表記はsmall要素で記述する
  • address/連絡先。body要素なら文章全体、article要素ごとならそれぞれの記事
  • figure/図表。例えばブログ記事内の写真は自己完結しているのでfigureを使う
  • figcaption/図表のキャプション。人気メニューなどはfigureとfigcaptionを使う

動画/音楽再生

3.video タグ

video_tag_html5

HTML5ではこれまでプラグインなどで実現していた動画やオーディオの再生が可能になります。videoタグはビデオファイルを再生し、プレイヤーを表示します。srcで動画ファイルURL、widthとheightで縦横、controlsで再生・一時停止ボタン、autoplayで自動再生、loopでループ、posterでサムネイル表示。

4.audio タグ

audio_tag_html5

音声ファイル再生ならaudioタグ。こちらも、controls/autoplay/loopが使えます。音声を最初から読み込みたいときは「preload」属性を使います。

アプリケーション向けの機能/API

HTML5ではこれらを使うことで、便利で使いやすいウェブアプリ機能を実装することができます。JavaScriptから利用します。

5.位置情報を取得する

location_html5

ユーザーの位置情報を扱うためのAPIである「Geolocation API」ユーザーの安全性やプライバシーに配慮した仕様となっています。以下、サンプルつきで詳しく解説してあります。

6.ローカルストレージ

local_storage_html5

ユーザーのブラウザ側でデータを保存する機能「Web Storage」クッキーに代わるデータ保存の仕組みです。データ保存・削除・クリア・上書きなどの操作もJavaScriptで行うことができます。セッションとlocalストレージの解説など。

7.サーバー双方向通信

server_html5

ブラウザとサーバー間に接続を確立する「WebSocket」サーバーとクライアント双方向のデータ送信を可能にします。

8.バックグラウンド処理

background_processing_html5

高負荷な計算処理や複数ファイルの読み込み時、別のファイルをバック部ラウンドで実行したり。以下、並列処理を実現するため「Web Workers」の使い方。

9.ファイル操作

file_operation_html5

ローカルファイルの中身を取得して JavaScript でいじるなど。こちらは「File API」の使い方。

サンプル

10.ソースコードつきのサンプル

sample_html5

HTML5を使ったソースコードつきのサンプルまとめです。複雑なものではなくシンプルで、ウェブページからブログをコーディングするときに使えそうなもの中心。API、基本の書き方のまとめなど具体的にソースを見て、勉強もできます。

テンプレート

11.テンプレート+作成ツール

template_html5

HTML5テンプレートやフレームワークの中でも比較的使いやすいものと、コーディング系ツールをまとめました。ダウンロードするだけじゃなくて、実際どのように構築されているか見てみましょう。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする