HTML5と画面分割

HTML5では
以前はdivタグでやっていた画面分割を
新しく定義された要素で分割が可能
articleタグで
画面の左側
sectionタグで
画面中央
asideタグで
画面の右側
ちなみに、画面の中央には
ブログ記事とかを書いたりするので
section要素でマークアップしている
このセクションという仕組みは
HTML5から追加されたもので
セクションを本に例えると
本の章とか節みたいになる
ちなみに、sectionの中に
さらに複数のsectionがあっても問題ない
セクション内では
HTMLでおなじみの見出しをつける
h1~h6タグが使える
本文と関係のある補足的なコンテンツ
例えば、ブログ記事の関連リンクとか
自作アプリとか、開発したもののバナーとか
そういうのは
article要素じゃなくて
右側に表示できる
aside要素のところに書く
あとは、最後にフッターをマークアップ
フッターには
コピーライトとか
よく一番下に書いてあるのを書くところ
ヘッダー
コンテンツ
フッター
の組合せは
jQuery mobileでも使うので
覚えておくと便利
ちなみに、
ヘッダーは見出し
コンテンツは記事本文
フッターは下にかくもの
と考えるとわかりやすい
スマホ向けサイトをみると
わかりやすい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です