HTML5_LogoHTML5/CSS3まとめ

2012/2/27現在、まだ正式にリリースされていませんが、事実上スマートデバイスでは常識になっている HTML5とCSS3についてまとめてみました

ぜひPC×スマートフォンで見比べてください

このページはシンプルに最低限のCSSで基本的なHTML5のタグを使って書きました

この領域は 新たに採用されたタグsection内です

段落は変わらずpです。

記事という考え方

articleタグの記事と言う概念もHTML5からの新しい考え方

小まめにコンテンツの一部を記事として更新する事が常識になっている今、マッチするタグが無い為、新しく追加された

HTMLとCSSの役割の明確化

既存のHTMLでは、HTMLタグでデザインを操作する事もあったのですが、HTML5/CSS3からはデザインを操作するのは完全にCSSで行うという方針

HTMLは機械に読ませるモノ、CSSは人間に読ませる為のモノという位置づけ

アダプティブ・ウェブデザインの必要性

デバイスの多様化

以前はデスクトップ環境と携帯環境2つのデザインに分ければ良かったのですが、閲覧するデバイスが多種多様化してきたことによって、コンテンツサイドでフレキシブルに対応する必要が出てきました

そこでHTML5とCSS3を駆使したアダプティブ(適応可能な)デザインが必要になる訳です

リキッドレイアウトとは

画面の右端で自動折り返しするリフロー処理の特性を活かして、水滴(リキッド)のように幅が狭くなると縦が伸びて全体の容積を保つ様子で、画面の幅に収まらない場合は、次の行に送って文字が見えなくならないようにするレイアウト法