MdN Design Interactiveにて連載した「ゼロからはじめるHTML5でのサイト制作」全12回まとめ

以前MdN Design Interactiveに連載させていただいた『HTML5でサイトをつくろう!ゼロからはじめるHTML5でのサイト制作』が12回で完結しました。

この連載ではHTML5でのマークアップが初めての方向けにHTML5で変更になった点や新要素の使い方、使い方がわかりにくいといわれていたsection要素やarticle要素の使い方、ブロックレベルやインラインの変わりとなるカテゴリーやコンテンツモデルやアウトラインとは?などを紹介していました。

xhtmlでのマークアップはしていたけど、はじめてHTML5でのマークアップを使用と思っている人やHTML5を勉強しようと思っている人の参考になればと思いまとめました。

HTML5でサイトをつくろう!ゼロからはじめるHTML5でのサイト制作

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

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

http://www.html5-memo.com/mdn/mdn01/

第1回はxhtmlとHTML5の基本の宣言文などの違いを紹介している概要になります。

第2回:xhtmlからHTML5で使い方が変更された要素(タグ)のまとめ

xhtmlからHTML5で使い方が変更された要素(タグ)のまとめ

http://www.html5-memo.com/mdn/mdn02/

第2回はhtmlでもあった既存のタグでHTML5から使い方が変更になったタグでよく使うものをまとめました。

第3回:HTML5で新しく定義された新要素をまとめよう

HTML5で新しく定義された新要素をまとめよう

http://www.html5-memo.com/mdn/mdn03/

第3回はHTML5からの新要素「hgroup要素」「header要素」「footer要素」「nav要素」「aside要素」「figure要素」などの使い方などをまとめました。

第4回:HTML5の勉強を始めた際に使い方に迷う新要素「section要素」の基本と使い方をまとめてみました

HTML5の勉強を始めた際に使い方に迷う新要素「section要素」の基本と使い方をまとめてみました

http://www.html5-memo.com/mdn/mdn04/

第4回は初めての際に使い方に悩む「section要素」についてサンプルを見ながら説明していく形でまとめました。

第5回:HTML5の勉強を始めた際に使い方に迷う新要素「article要素」の基本と使い方をまとめてみました

HTML5の勉強を始めた際に使い方に迷う新要素「article要素」の基本と使い方をまとめてみました

http://www.html5-memo.com/mdn/mdn05/

第5回は初めての際に使い方に悩む「article要素」についてサンプルを見ながら説明していく形でまとめました。

第6回:HTML5のカテゴリーの種類についてまとめました

HTML5のカテゴリーの種類についてまとめました

http://www.html5-memo.com/mdn/mdn06/

第6回はロック要素、インライン要素に変わる「カテゴリー」の種類についてまとめました。

第7回:HTML5の「コンテンツ・モデル」についてまとめました

HTML5の「コンテンツ・モデル」についてまとめました

http://www.html5-memo.com/mdn/mdn07/

第7回はHTML5でコーディングする場合に、知っておくべきことの一つに「コンテンツ・モデル」についてまとめました

第8回:HTML5の「アウトライン」についてまとめました

HTML5の「アウトライン」についてまとめました

http://www.html5-memo.com/mdn/mdn08/

第8回はHTML5でのマークアップの階層構造をあらわす「アウトライン」についてまとめました。

第9回:XHTML1.0とHTML5のコーディングの違いを確認してみよう

http://www.html5-memo.com/mdn/mdn09/

第9回はxhtmlとHTML5でのマークアップの違いを簡単なサンプルを元にまとめました。

第10回:HTML5から追加された新要素の使い方を確認してみよう

HTML5から追加された新要素の使い方を確認してみよう

http://www.html5-memo.com/mdn/mdn10/

第10回はサンプルで作成したページからHTML5の新要素についてまとめました。

第11回:XHTML1.0とHTML5のコードを比較してアウトラインを確認してみよう

XHTML1.0とHTML5のコードを比較してアウトラインを確認してみよう

http://www.html5-memo.com/mdn/mdn11/

第11回はxhtmlとHTML5でのマークアップのアウトラインを確認しました。

第12回:ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトの作成してみよう

ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトの作成してみよう

http://www.html5-memo.com/mdn/mdn12/

第12回はxhtmlとHTML5でのマークアップをCSSを設定してレイアウトを完成させました。

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事