nav要素ナビゲーション
nav要素の概要SUMMARY OF ELEMENT
<nav>は、そのリンクのまとまりのセクションがナビゲーションであることを示すために使用します。
例えば、サイト全体をナビゲートするグローバルメニューやサイドメニュー。またページのセクションをナビゲートするページ内リンク。さらには、トップページから現在のページを示すパンクズリストなどがナビゲーションとしてふさわしいでしょう。
ページ内のすべてのリンクをすべてナビゲーションとして扱う必要は無く、主要なナビゲーションのみをマークアップするべきです。
例えばリンク集や、関連ページ一覧などはリンクの集合したセクションではありますがナビゲーションとしては適切ではないでしょう。
nav要素の利用例USAGE EXAMPLE FOR ELEMENT
要素の利用例を実際のコードを見ながら覚えていきましょう。
簡単なCSSでデザインをしているものもありますが、CSSの詳細はCSSリファレンスをご覧ください。
nav要素の基本的な利用例
<nav>
<p>サイトメニュー</p>
<ul>
<li><a href="news.html">ニュース</a></li>
<li><a href="products.html">プロダクト</a></li>
<li><a href="access.html">交通アクセス</a></li>
<li><a href="mail.html">コンタクト</a></li>
</ul>
</nav>
li {
display:inline-block;
padding-right: 1rem;
padding-left: 1rem;
}
li:not(:last-child) {
border-right: solid 1px #555;
}
サンプル結果表示
nav要素でサイドバーのサイトメニュー次にサイドバーにサイトメニューを作る、よくある利用例を見てみましょう。
ここでは<section>でメニュー全体を囲みサイトメニューのセクションであることを示し、その中に2つのカテゴリに対するナビゲーションメニューを作る。といった例を用意してみました。
<section class="side-menu">
<h2>サイトメニュー</h2>
<nav>
<p>HTMLについて</p>
<ul>
<li><a href="about.html">HTMLとは</a></li>
<li><a href="reference.html">HTMLリファレンス</a></li>
<li><a href="tag.html">HTMLタグ一覧</a></li>
<li><a href="guide.html">HTML作成ガイド</a></li>
</ul>
</nav>
<nav>
<p>CSSについて</p>
<ul>
<li><a href="about.html">CSSとは</a></li>
<li><a href="reference.html">CSSリファレンス</a></li>
<li><a href="design.html">CSSデザイン例</a></li>
<li><a href="tips.html">CSSの豆知識</a></li>
</ul>
</nav>
</section>
.side-menu {
width: 200px;
}
h2 {
margin: 0;
padding: 0;
}
p {
margin: 0;
line-height: 2rem;
background-color: #3e3e3e;
color: #fff;
text-align: center;
}
ul {
list-style: none;
padding: 0;
margin: 0;
border: solid 1px #999;
}
li a {
display: block;
line-height: 2rem;
background-color: #fff;
padding-left: 1rem;
}
li:not(:last-child) a {
border-bottom: solid 1px #999;
}
li a:hover {
background-color: #eee;
color: #0080ff;
}
サンプル結果表示
nav要素でパンクズリストを作る最後に<nav>を使って、サイトのパンクズリストをマークアップしてみましょう。
パンクズリストは「リスト<ul>や<ol>を使う」という意見や「リストではないので<a>でマークアップ」というような意見があります。
先のグローバルメニューの例でリストタグを使ったので、ここでは<a>でマークアップしてみましょう。
<nav>
<p>
<a href="/index.html">トップ</a> ▸
<a href="/genre/">ジャンル一覧</a> ▸
<a href="/genre/punk/">パンク</a> ▸
<a>Ranones</a>
</p>
</nav>
サンプル結果表示
nav要素の定義DEFINITIONS OF ELEMENT
nav要素に関連するページRELATED PAGE OF nav ELEMENT