html5の新しい構造化タグを使ってみた。
今回使ったのは以下のタグ
・
（ページまたはセクションのヘッダー領域を定義する）
・
（ページまたはセクションのフッター領域を定義する）
・
（ページまたはセクションのナビゲーション領域を定義する）
・
（ページまたはコンテンツの論理領域を定義する）
・
（コンテンツを定義する）
・
（二次的なコンテンツまたは関連コンテンツを定義する）
さっそく作ってみた
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ブログっぽいものを作ってみよう。</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <header id="page_header"> <h1>これはウエンのブログです</h1> <nav> <ul> <li><a href="">新着</a></li> <li><a href="">アーカイブ</a></li> <li><a href="">コンタクト</a></li> <li><a href="">問合せ</a></li> </ul> </nav> </header> <section id="posts"> <article class="post"> <header> <h2>ここにタイトルを記入</h2> <p> なんかタイトルの補足的なものをここに書く </p> </header> <aside> "ここはarticleのナビ部分での実装"</aside> </aside> <p> ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1ここは文章1 </p> <p> ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2ここは文章2 </p> <footer> <p><a href=""><i>コメント</i></a></p> </footer> </article> </section> <section id="sidebar"> <nav> <h3>アーカイブ</h3> <ul> <li>10月</li> <li>9月</li> <li>8月</li> <li>7月</li> </ul> </nav> </section> <footer id="page_footer"> <p>©2011 ウエン</p> <nav> <ul> <li><a href="">トップへ戻る</a></li> <li><a href="">プロフィール</a></li> <li><a href="">サービス情報</a></li> <li><a href="">プライバシーポリシーについて</a></li> </ul> </nav> </footer> </body> </html>
@charset "utf-8"; /* CSS Document */ body { width:960px; margin:15px auto; } p { margin:0 0 20px 0; } p,li{ line-height:20px; }#page_header { width: 100%; } #page_header nav ul,#page_footer nav ul { margin: 0px; padding: 0px; list-style-type: none; } #page_header nav ul li,#page_footer nav ul li { display: inline; margin: 0px; padding: 0 20px 0 0; } section#posts { float: left; width: 74%; } #posts .post aside { font-size: 20px; line-height: 40px; float: right; width: 35%; margin-left: 5px; } section#sidebar { float: left; width: 25%; } #page_footer { text-align: center; display: block; clear: both; width: 100%; }
非常に分かりやすいですね。
今まではラッピングのdivを切ったり、
divをきったりdivをきったりdivをきったりdivをきったりdivをきったり・・・・・・・・・・
<div id="xxxxxxx"> <div id="●●●●●"> <ul> <li>なにか</li> <li>なにか</li> <li>なにか</li> <li>なにか</li> </ul> </div> </div>
これでDiv地獄から脱出できそうです。
