CLOSE OPEN

ENT TECH LAB.

TAGSTAGS

HTML5、使うなら今でしょ【入門編】


「HTML5を使えばすごい」ではなく、「HTML5をどう利用していくか」を考え向き合わなければなりません。以下ではまずHTML5を今すぐ使うための入門編としておさえるべきポイントを説明していきます。 ※この記事は2013年4月現在の情報です。

HTML5はIE8以下(IE6/7/8)のブラウザでも使用できる

HTML5の新要素はIE8以下の対応していないブラウザがあるため、導入には「何かしないといけない」「ちょっと面倒そう」と、いまだに尻込みしている人もいるのではないでしょうか。HTML5はちょっとしたおまじないですぐに使うことができます。

html5shiv.jsもしくはmodernizr.jsなどを読み込ませる

まずIE8以下のブラウザにHTML5のタグを認識させるため、javascriptを読み込む必要があります。 スクリーンショット 2014-03-12 14.50.41 html5shiv.jsGoogle Codeからzipファイルをダウンロードします。distフォルダ内のhtml5shiv.jsをサイト内の任意のディレクトリに格納します。

スクリーンショット 2014-03-12 15.11.01 modernizr.jsはhtml5shiv.jsだけに限らず、HTML5やCSS3の対応状況を検出してくれます。特にブラウザ間で表現を切り替える必要がなければ、前者のhtml5shiv.jsで事足りるでしょう。

CSSでhtml5の新要素をブロック要素にする

IE8以下のブラウザでは新要素をブロック要素として認識しないため、下記の記述を加えます。modernizr.jsの場合は生成したjs内で既に含まれている場合があるので不要ですが、html5shiv.jsだけを読み込む場合は忘れずに対応します。

このステップ2つだけでHTML5は今すぐ使用出来ます。もちろんDOCTYPE宣言がHTML5になっていることが前提です。

簡単って言ったって…新要素の使い方がわからないよって人へ

HTML5では、各要素の意味を理解して正しい文書構造で定義することが準拠規定となっています。
そしてそれが、セマンティックな文書構造と言われている考え方です。

セマンティックな文書構造とは?

セマンティックな文書構造とは、検索エンジンやコンピューターがそのページを正確に理解するために、今まで以上に文書の意味=セマンティックを考え定義すると言うことです。

正しい文書構造になっているかを確認する

新要素の使いはじめは正しく設計したつもりでも、誤った文書構造として認識されてしまうことがあります。Google Chromeの拡張機能であるHTML5 Outlinerなどを使用すると、視覚的にどのようにブラウザに認識されているかを簡単に確認することができます。
このようなツールを使用しながらHTML5の文書構造の捉え方に慣れていきましょう。

スクリーンショット 2014-03-12 15.12.20

よくあるsectionの誤った使い方

HTML5の新要素は現在108個に上ります。その新要素の中でも比較的手を出されているsection要素ですが、使い方を間違っているケースをよく見かけます。sectionはコンテナ要素ではないので、divのようにカラムやレイアウト目的で使用するのは間違いです。

section.gifsection02.gif上記の画像で説明しているように、使用する新要素の意味を考え、マークアップ前に正しく設計を行いましょう。

HTML5って仕様策定中じゃないの?いいえ、使っていきましょう

W3CがすすめているHTML5の仕様策定は、Canvas 2D Contextと同時に2012年12月に勧告候補として公開されました。

勧告候補って?

勧告候補って何なの?と今にも聞こえてきそうですが、仕様正式決定までのロードマップは以下の流れになっています。

「勧告候補」は”機能的に完成した・機能策定完了”と言う段階で、仕様がひっくり返ったり機能が追加になったりと言うことは早々ないと言われています。
ただ先日新要素として加わる予定だったhgroup要素は廃止になる可能性が出て来ました。
最新のHTML5の動向に注意しつつ、それでも「勧告候補」では実装して使ってくださいと言うことを呼びかけている状況なので、正式な勧告予定の2014年を待たずしてぜひ使いましょう。

BACK TO TOP