第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宣言】
 |
【html要素と文字のエンコーディング】
 |
続いてエンコーディングの指定方法ですが、HTML5でもエンコーディング指定をするのは変わりませんが短くなりました。
【既存のコードをHTML5にする場合の記述例】
 |
この宣言文だけ変えて「HTML5です」といえないこともないですが、それではいままでと変わりませんので、次回から既存のタグで使い方が変わったタグの紹介と、新しい要素を使ってマークアップをしていきたいと思います。
次回につづく
 |
【林 豊】●1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。 またWEB制作に役立つ情報を集めて制作のヒントになるブログを更新している HTML5でサイトをつくろう：http://www.html5-memo.com/ Webデザインクリップ：http://webdesignmatome.com/ デジハリ・オンラインスクールにて自宅や会社のPCからいつでも「HTML5」を学べる講座を担当。ただいま全体の1/3の内容を無料で視聴できます。 HTML5入門講座：http://online.dhw.co.jp/course/html5/ |
