Tbpgr Blog

Employee Experience Engineer tbpgr（てぃーびー） のブログ

HTML5新要素 navタグ

html5 Zen-Coding

概要

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>

完成画面のキャプチャ

左側の枠がnav。右側の枠がarticleです。

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:;