第1回　HTML5でサイトをつくろう！xhtmlからHTML5へ

最近話題になっているHTML5ですが、どこからやっていけばいいのか？ 書籍やWEBサイトを見ると派手なことができそうだけど難しいのではないか？ そう思っている人も多いとおもいます。ですが実は、HTML5のマークアップの基本はいままでとさほど変わりません。これから主流になるHTML5を基本から一緒に学んでみませんか？
解説：（有）ムーニーワークス　林 豊／田崎一成

●HTML5でサイトをつくろう！

最近よく聞くHTML5・CSS3ですが、たくさんの書籍やサイトができて目にする機会が多くなっています。すでにスマートフォンサイト制作ではスタンダートになっていますが、PCサイトでは、ブラウザなどの環境が整っていないこともあり、まだそこまで多く利用されていません。しかし、今後HTML5が主流になると考えられ、現在、WEB制作に携わっている方もそろそろHTML５の勉強をはじめなければと思っているのではないでしょうか。

HTML5のサイトとして取り上げられるのは「Flashの代わりでリッチなコンテンツができる」「WEBアプリ制作ができる」「動画や音声など手軽に扱える」「APIの活用」など派手な部分が取り上げられているので、いままでのxhtmlとの作り方とは違い、難しいのではないか？どこからやればよいのか？などと思っている人もいると思います。

いままでFlashを使わないとできなかった一部の表現などがHTML5で実装されるなど、HTML5でのサイト制作の可能性は広がってきています。しかし現在は、新しい要素の対応状況がブラウザごとにバラバラになっていますので、せっかくの新しい技術のすべてが実務で使えるものとはなっていません。

さらに新しい表現は制作も難しいので、いきなりすぐできるということではありませんが、HTML5でのマークアップの基本は、いままでのマークアップに新しい要素が追加されたことと、アウトラインという概念を理解すればそう難しいことはありません。まずはxhtmlとの違いとHTML５の新しいルールを理解することが大切です。

筆者が勉強するとき参考したサイトは下記になります。

【参考サイト】
HTML5.JP - 次世代HTML標準 HTML5情報サイト
URL：http://www.html5.jp/

いきなりすべてを読むのは大変だと思います。下記の連載にまとまっているので、はじめての方はまずこちらから読むと良いのではないでしょうか。

【参考サイト】
HTML5＋CSS3　次世代Webコーディングの超・最新動向
URL：http://www.mdn.co.jp/di/articles/2432/


また、自分もHTML5で勉強した内容をまとめるブログ『HTML5でサイトをつくろう』やWEBの仕事をしながら調べた情報をまとめたブログ『WEBデザインクリップ』も運用しておりますのでこちらもよかったらみてください。

●HTML5のマークアップは難しくない？

まずはxhtmlとの書き方の違いからHTML5のマークアップの基本、使い方が変更になった要素（タグ）、新しく追加された要素の使い方、アウトラインという考え方を、実際にサンプルを作成しながら学んでいきます。
はじめは、いままで作成していたxhtmlのサイトをhtml5のコードに変更することからやってみることがオススメです。XHTMLからHTML5の移行は、数個の新規タグと考え方がわかればすぐに移行できます。

次にXHTML1.0とHTML5の基本のHTMLの違いを覚えましょう。この宣言文だけ変えて中のコードはいままでどおりのxhtmlのコードでも実はHTML5のサイトになります。
実のところ、HTML5といってもマークアップについてはHTML4からxhtml1.0のときのように大きな違いはありません

【HTML5のDOCTYPE宣言】

XHTML1.0ではhtml要素にxmlns属性が必要でしたが、HTML5ではlang属性を記述して言語指定しています

【html要素と文字のエンコーディング】

XHTML1.0と比べて、HTML5では非常にシンプルになっていて、これで標準モードでレンダリングされHTML5に準拠したページになります


続いてエンコーディングの指定方法ですが、HTML5でもエンコーディング指定をするのは変わりませんが短くなりました。

【既存のコードをHTML5にする場合の記述例】

XHTML1.0ではhtml要素にxmlns属性が必要でしたが、HTML5ではlang属性を記述して言語指定しています

この宣言文だけ変えて「HTML5です」といえないこともないですが、それではいままでと変わりませんので、次回から既存のタグで使い方が変わったタグの紹介と、新しい要素を使ってマークアップをしていきたいと思います。


次回につづく

---

【林 豊】●1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。 【田崎一成】●音楽活動の後、デジタルハリウッドへ入学、現在はデザイン・コーディング作業と幅広く活動中。