カテゴリー
ゼロからHTML5サイト制作

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

前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。

最終回の今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。

HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするか?まだ確定していないHTML5の要素が変更になった場合を考えてスタイルの設定を考えた方が後々大きな修正にならないのでよいとおもいます。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが一つの例として見ていただければと思います。

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

前回の記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行いましたが、今回はxhtmlとHTML5のコードのアウトラインを確認しながら、各要素のアウトラインについてみてみたいと思います。

HTML5から追加された新要素の使い方を確認してみよう【MdN連載第10回目】

前回の記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしましたので、今回はxhtmlとHTML5でマークアップしたページのヘッダー、メインコンテンツ、サイドエリア、フッターと領域毎にコードの比較をしていきたいと思います。

XHTML1.0とHTML5のコーディングの違いを確認してみよう【MdN連載第9回目】

いままでの連載っでHTML5での新要素の説明やHTMLから使用方法が変更になった要素、ブロックレベル要素とインライン要素の変わりとなった「コンテンツ・モデル」や「アウトライン」などについてまとめてきましたが、ここから今まで行ったことをまとめて簡単なレイアウトをxhtmlとHTML5でのマークアップを比較しながら実際に作成してみたいと思います。

HTML5の「アウトライン」についてまとめました【MdN連載第8回目】

アウトラインとは階層構造のことで、HTML5のマークアップでは、このアウトラインを意識することが重要になってきます。

今までのHTML4やXHTML1.0でもh1~h6の要素を使用して暗黙的に階層化されているのを示していましたので考え方が変わったということではないですが、HTML5ではサイトのアウトラインを考えるには、まずセクションを意識する事がとても大切になりますので簡単にまとめてみました。

123