概要
navタグについて説明します。
内容
navタグはナビゲーションを表します。
一般的なサイトでよく見るメニューなどが対象となります。
注意点
企業情報、お問い合わせ、権利情報等サイトの一番下に配置したりするような対象は
navよりもfooterを利用します。
サンプル
Rubyの情報を提供するサイトを想定します。
この大きく分けて言語仕様、Tips、サンプルコードを提供します。
<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>Ruby情報サイト</title> <style type="text/css"> div.container { display: box; /* ベンダープリフィックス廃止後用 */ display: -webkit-box; /* Safari,Google Chrome用 */ display: -moz-box; /* Firefox用 */ background-color:gray; padding:10px; margin:auto; width:600px; } div.nav { background-color:skyblue; align:center; margin:5px; height:100px; width:175px; } div.article { background-color:yellow; text-align:center; margin:5px; height:100px; width:400px; } </style> </head> <body> <div class="container"> <div class="nav"> <nav> <ul> <li><a href="">言語仕様</a></li> <li><a href="">Tips</a></li> <li><a href="">サンプルコード</a></li> </ul> </nav> </div> <div class="article"> <article> ここに内容 </article> </div> </div> </body> </html>
Zen-Coding Sample HTML
展開前
nav>ul>li*3
展開後
<nav> <ul> <li></li> <li></li> <li></li> </ul> </nav>
Zen-Coding Sample CSS
d = display:;
h = height:;
m = margin:;
p = padding:;
w = width:;