いままでまとめたHTML5の勉強をしたさいに作成したまとめ ~HTML5の新要素の説明からマークアップの基本まで~

今回は僕がHTML5を勉強するにあたりもう一つのブログ「HTML5でサイトをつくろう」でまとめたページをまとめました。初めて作るならここからやるといいかなとおもったHTML5の新要素、コンテンツモデルやアウトラインについて、xhtmlとHTML5で同じフォーマットをマークアップして違いを比べたりしました。

現在WEB制作で仕事をしながら勉強している人やゼロからやってみようと思う人に仕様書を全部読む前でもまずはここからやってみると良いかなと範囲をまとめてみました。初めのきっかけに参考にしていただけれたらうれしいです。

目次というかカテゴリはこのようになります。

はじめてHTML5を使う際にまず見ておきたい

はじめてのHTML5 第1回『HTML5の基本の書き方を覚える』

はじめてのHTML5 第1回『HTML5の基本の書き方を覚える』

http://www.html5-memo.com/first-html5/html5-001/

はじめてのHTML5 第2回『HTML5のさらに詳しいCSSリセット方法』

はじめてのHTML5 第2回『HTML5のさらに詳しいCSSリセット方法』

http://www.html5-memo.com/first-html5/html5-002/

はじめてのHTML5 第3回『HTML5の新要素をIEでも対応させる方法』

はじめてのHTML5 第3回『HTML5の新要素をIEでも対応させる方法』

http://www.html5-memo.com/first-html5/html5-003/

HTML5になってから変更された考え方についてのまとめ

HTML5のカテゴリーについて / HTML5マークアップ時の基本

HTML5のカテゴリーについて / HTML5マークアップ時の基本

http://www.html5-memo.com/basic/rule-001/

『コンテンツ・モデル』について / HTML5マークアップ時の基本

『コンテンツ・モデル』について / HTML5マークアップ時の基本

http://www.html5-memo.com/basic/rule-002/

『アウトライン』について / HTML5マークアップ時の基本

『アウトライン』について / HTML5マークアップ時の基本

http://www.html5-memo.com/basic/rule-003/

HTML5新要素一覧

『header要素』 / HTML5新要素一覧

『header要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/header/

『footer要素』 / HTML5新要素一覧

『footer要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/footer/

『hgroup要素』 / HTML5新要素一覧

『hgroup要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/hgroup/

『nav要素』 / HTML5新要素一覧

『nav要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/nav/

『aside要素』 / HTML5新要素一覧

『aside要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/aside/

『section要素』 / HTML5新要素一覧

『section要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/section/

『article要素』 / HTML5新要素一覧

『article要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/article/

『time要素』 / HTML5新要素一覧

『time要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/time/

『figure要素』 / HTML5新要素一覧

『figure要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/figure/

【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました!

【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました!

http://www.html5-memo.com/form/input_type/

【HTML5 フォーム】formタグのinput要素に新たに追加された8つの新属性をまとめました!

【HTML5 フォーム】formタグのinput要素に新たに追加された8つの新属性をまとめました!

http://www.html5-memo.com/form/input_contents/

絶対に覚えておきたいHTML5の『audio要素』超基本を知る!!

絶対に覚えておきたいHTML5の『audio要素』超基本を知る!!

http://www.html5-memo.com/audio/player001/

『canvas』要素の勉強をする時の参考サイトまとめました / HTML5『canvas』要素基礎

『canvas』要素の勉強をする時の参考サイトまとめました / HTML5『canvas』要素基礎

http://www.html5-memo.com/canvas/site/

xhtml1.0とHTML5で簡単なサンプルを作成しながら比較する記事をまとめました

HTML5は難しくない? XHTML1.0とHTML5のコーディングの違いを確認してみよう!【初級編:HTML5のマークアップ】

HTML5は難しくない? XHTML1.0とHTML5のコーディングの違いを確認してみよう!【初級編:HTML5のマークアップ】

http://www.html5-memo.com/html5/html5_01/

HTML5は難しくない? HTML5から追加された新要素を理解しよう!【初級編:HTML5のマークアップ】

HTML5は難しくない? HTML5から追加された新要素を理解しよう!【初級編:HTML5のマークアップ】

http://www.html5-memo.com/html5/html5_02/

HTML5のアウトラインって何?xhtmlとHTML5のコードを比較してアウトラインを理解しよう!

HTML5のアウトラインって何?xhtmlとHTML5のコードを比較してアウトラインを理解しよう!

http://www.html5-memo.com/html5/html5_03/

ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】

ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】

http://www.html5-memo.com/html5/html5_04/

FlashからEdge?Adobe Edgeを使ってみる! 『インストール方法からサンプルコンテンツ作成まで』

FlashからEdge?Adobe Edgeを使ってみる! 『インストール方法からサンプルコンテンツ作成まで』

http://www.html5-memo.com/edge/sample001/

MdN Design Interactive連載

MdN Design Interactiveにて『ゼロからはじめるHTML5でのサイト制作』連載スタートいたします

MdN Design Interactiveにて『ゼロからはじめるHTML5でのサイト制作』連載スタートいたします
http://www.html5-memo.com/mdn/mdn01/

【MdN Design Interactive連載連載 第2回目】xhtmlからHTML5で使い方が変更された要素(タグ)のまとめ

【MdN Design Interactive連載連載 第2回目】xhtmlからHTML5で使い方が変更された要素(タグ)のまとめ
【MdN Design Interactive連載連載 第2回目】xhtmlからHTML5で使い方が変更された要素(タグ)のまとめ

【MdN Design Interactive連載連載 第3回目】HTML5で新しく定義された新要素をまとめよう

【MdN Design Interactive連載連載 第3回目】HTML5で新しく定義された新要素をまとめよう
http://www.html5-memo.com/mdn/mdn03/

おまけ

HTML5で制作された国内企業サイト20から現状の制作状況を知る!!

HTML5で制作された国内企業サイト20から現状の制作状況を知る!!

http://www.html5-memo.com/html5-site/links/

この記事を書いた人

著者 : ハヤシユタカ

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

最近書いた記事

この記事に関連する記事