第1回 HTML5でサイトをつくろう!xhtmlからHTML5へ | デザインってオモシロイ -MdN Design Interactive-

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

最近話題になっているHTML5ですが、どこからやっていけばいいのか? 書籍やWEBサイトを見ると派手なことができそうだけど難しいのではないか? そう思っている人も多いとおもいます。ですが実は、HTML5のマークアップの基本はいままでとさほど変わりません。これから主流になるHTML5を基本から一緒に学んでみませんか?

解説:(有)ムーニーワークス 林 豊/田崎一成


HTML5でサイトをつくろう!

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

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

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

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

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

【参考サイト】
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宣言

【HTML5】

<!DOCTYPE html>

【XHTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

※XHTML1.0ではhtml要素にxmlns属性が必要でしたが、HTML5ではlang属性を記述して言語指定しています
◆html要素と文字のエンコーディング

【HTML5】
<html lang="ja">
<head>
<meta charset="UTF-8">

【XHTML】
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

XHTML1.0と比べて、HTML5では非常にシンプルになっていて、これで標準モードでレンダリングされHTML5に準拠したページになります
続いてエンコーディングの指定方法ですが、HTML5でもエンコーディング指定をするのは変わりませんが短くなりました。
◆既存のコードをHTML5にする場合の記述例

【HTML5】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>
</head>
<body>

//ここにサイトに表示するコンテンツ内容を記述

</body>
</html>

sXHTML1.0ではhtml要素にxmlns属性が必要でしたが、HTML5ではlang属性を記述して言語指定しています
この宣言文だけ変えて「HTML5です」といえないこともないですが、それではいままでと変わりませんので、次回から既存のタグで使い方が変わったタグの紹介と、新しい要素を使ってマークアップをしていきたいと思います。


profile
●ハヤシユタカ 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークスを立ち上げ、WEBの企画・制作、セミナー講師やWEB運用の企業研修などを行う。また、WEB制作に役立つ情報を集めて制作のヒントになるブログを更新している。

●HTML5でサイトをつくろう:http://www.html5-memo.com/
●Webデザインクリップ:http://webdesignmatome.com/
twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

アクセスランキング

8.5-8.11

MdN BOOKS|デザインの本

Pick upコンテンツ

現在