HTML・CSS:ナビゲーションの作成をする、navタグ、menuタグとの違い

navタグとは

navタグ(ナブ、ナビタグと読む)とは、グループ化タグの一種で(divとかそういうの)<nav>~</nav>で囲まれた部分がナビゲーションであることを示します。そのナビゲーションって何よ?って感じですが、例えばこんなやつです。↓

↑これがナビゲーションです。つまり、エレベーターのボタンみたいな存在ですね。移動したい先のボタンが分かりやすく並べてある。そのボタンを押すと別のページになっている、みたいな。
ちなみにわかりにくいと思いますが、上で書いた例の中身はこんな感じになってます。↓

<nav>
 <ul>
  <li><a href="http://111111monji.com/" target="_blank">トップページはここ</a></li>
  <li><a href="http://111111monji.com/tumitobatusyoukai/">いちもんじの一押し謎解      きゲーム作品はここ</a></li>
 </ul>
</nav>

<nav>タグの中で<ul>タグと<li>タグを使って複数リンクを並べておく。そしてページを遷移させるのが<nav>タグの役割です。
ちなみに<a>タグでリンクを繋げております。<a>タグについて詳しく知りたい方はこちらの記事からどうぞ。

navタグでメニューを作る方法

いちもんじのサイトもこのようなメニューを表示しています。↓

メニュー

RuleとかBlogとかの項目がメニューとなり、<nav>メニューでこのように並べることが可能になります。先ほどの例で言うとメニューは縦に羅列されていましたが、CSSを使うとこれを横並びにすることができます。

フレックスボックスを使って横に並べる

フレックスボックスというのは、同じ親を持つ兄弟要素を横に並べる機能を持つCSSのことです。詳しいことはこちらの記事にまとめていますので気になる方はどうぞ。

menuタグとの違い

<nav>タグと似たようなタグで<menu>タグというものが存在します。こちらもリスト形式で、それこそ本当にレストランとかに行って見るメニュー表みたいに縦にずらっと項目が並ぶ、そんな機能を持つタグになります。しかしこちらのタグ、今はほとんど使われておりません。というのも、このタグは対応しているブラウザが少なすぎてオワコンみたいな感じになっているからです。(悲しい)対応ブラウザはこんな感じ…↓

Internet Explorer 2~
Firefox 1~
Google Chrome 1~
Safari 1
Opera 6~

なので、今その<menu>タグに代わるのが<nav>なんじゃないかといちもんじは思っています。

タイトルとURLをコピーしました