

要素について
カテゴリー | フロー・コンテンツ、セクショニング・コンテンツ、パルパブル・コンテンツ |
利用場所 | フロー・コンテンツが置ける場所 |
内容 | フロー・コンテンツ |
タグの省略 | 不可 |
“nav”要素はナビゲーションを表す要素です。
同じ文書内の他の部分へのリンクや他の文書へのリンクが集まったメニューや目次などに使用することができます。
すべてのリンクを“nav”要素の中に配置する必要はありません。例えば文書のフッタにはリンクの一覧が含まれることが多いですが、“footer”要素のみで十分です。また、“nav”要素は同じ文書内で複数使用できます。
サンプルコード
<header>
<h1>果物を食べる</h1>
<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="sample1.html">りんご</a></li>
<li><a href="sample2.html">もも</a></li>
<li><a href="sample3.html">バナナ</a></li>
<li><a href="sample4.html">マンゴスチン</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>黄色いフルーツバナナ</h2>
<p>バナナについての解説。<p>
<nav>
<ul>
<li><a href="#charactor">バナナの特徴</a></li>
<li><a href="#area">バナナの産地</a></li>
<li><a href="#keep">バナナの保存方法</a></li>
<li><a href="#nutrition">バナナの栄養素</a></li>
</ul>
</nav>
</header>
<section id="charactor">
<h3>バナナの特徴</h3>
<p>
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
</p>
<section>
<h4>バナナの木</h4>
<p>
バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。
</p>
</section>
<section>
<h4>バナナの果実</h4>
<p>
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
</p>
</section>
</section>
<section id="area">
<h3>バナナの産地</h3>
<p>
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。
</p>
</section>
<section id="keep">
<h3>バナナの保存方法</h3>
<p>
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
</p>
</section>
<section id="nutrition">
<h3>バナナの栄養素</h3>
<p>
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
</p>
</section>
</article>
</main>
<footer>
<ul>
<li><a href="sample1.html">お問い合わせ</a></li>
<li><a href="sample2.html">リンク集</a></li>
</ul>
<p><small>© copyright 2015 Frouts wo taberu</small></p>
</footer>
果物を食べる
黄色いフルーツバナナ
バナナについての解説。
バナナの特徴
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
バナナの木
バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。
バナナの果実
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
バナナの産地
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。
バナナの保存方法
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
バナナの栄養素
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
仕様書
“nav”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
定義されている仕様書
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
<nav> | ![]() ![]() |
![]() ![]() |
![]() ![]() |
![]() ![]() |
![]() ![]() |
DOMインターフェース
“nav”要素は“HTMLElement”インターフェイスを使用します。
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
nav {
unicode-bidi: isolate;
display: block;
}
/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
nav {
unicode-bidi: bidi-override;
}