最近よく聞く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デザインクリップ』も運用しておりますのでこちらもよかったらみてください。

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

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

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

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