【初心者向け】HTMLでナビゲーションを作る方法とは？nav要素の特徴も解説

HTMLでのナビゲーションの使い方に悩んでいませんか？

HTMLタグでナビゲーションを作成できることを知っていても、使い方や特徴まできちんと理解するのは難しそうですよね。

今回は、ナビゲーションを使いこなしたい、という方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、HTMLを使ったナビゲーションの実装方法を学ぶことができますよ。

ぜひ最後まで読んでくださいね！

ナビゲーションって何？どんな特徴があるの

HTML文書の中には、その部分がナビゲーションであることを示す、nav要素というものがあります。

一般的には、サイト内の他ページリンクやページ内リンクが集まったメニューを、navタグで囲って作成します。

<nav>
<ul>
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
</ul>
</nav>

ただし、すべてのリンクメニューに使うのではなく、ナビゲーションに適しているものを他のリンクメニューと区別するために使用します。

主に、以下のようなメニューがナビゲーションに該当するとされています。

主要なナビゲーションメニューには主要なセクションへのリンクが含まれ、著作権情報や利用規約へのリンクは通常フッターやその他の適切なセクションに配置されます。
これにより、ユーザーがサイト内を簡単にナビゲートできるようになります。

しかし、特定のサイトやデザインの要件によっては、メニュー内にこれらのリンクを含めることが適切である場合もあります。
デザインとユーザーエクスペリエンスの観点から、どのように配置するかを検討することが重要です。

ナビゲーションは、ページ内に複数作成することができます。

視覚が不自由なユーザー向けの読み上げツールでは、ウェブページ上のテキスト情報を読み取り、それを音声でユーザーに提供します。
その際に様々な情報を読み取りますが、nav要素を読み込む際には、ナビゲーション要素に含まれるリンクやメニュー項目を読み上げ、ユーザーがサイト内を移動できるようにサポートします。

ナビゲーションを実装するには？

ナビゲーションの特徴が分かったところで、実際にコードを書いて実装していきましょう。

今回は、以下の手順で作成していきます。

下3つはCSSを使っての指定になります。

それでは、1つずつ説明していきますね。

リンクのリストを作成

まずは、リストを作成します。

今回はトップページのヘッダーメニューによくありそうな例を作りました。

<nav>
<ul class="main-menu">
<li><a href="/">ホーム</a></li>
<li><a href="/item/">商品一覧</a></li>
<li><a href="/about/">店舗紹介</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>

このままだと箇条書きのリストが表示されるので、CSSでスタイルを調整していきます。

リンクを横並びにする

リンクを横並びにするために、CSSで以下を追加します。

.main-menu li{
display: inline-block;
}

li要素は、ブロックレベル要素なので、何も指定していない場合、要素が縦に並びます。

「display: inline-block;」を指定することで、要素の幅が中身と同じになり、要素を横並びにすることができます。

インライン要素とは異なり、余白の指定も可能です。

横並びにする方法は、inline-block以外にgridやflexを使う方法があります。

いらない装飾を削除

続いて、不必要な装飾を削除します。

今回は、リストの先頭にあるマークとリンクの下線をなくしていきます。

.main-menu {
list-style-type: none;
}

.main-menu li a{
text-decoration: none;
}

リスト先頭のマークは、「list-style-type: none;」、リンクの下線は「text-decoration: none;」で消すことができます。

list-style-typeは、数字やアルファベットなどの指定もできます。

必要な装飾を加える

最後に、メニューとしての形を整えるために簡単な装飾をします。

文字を中央に寄せて、色を変えました。マウスを乗せた時の色も指定しています。

以下はCSSファイル全体を記述しています。

nav{
text-align: center;
}

.main-menu {
list-style-type: none;
margin: 0 ;
padding: 0 ;
}

.main-menu li {
display: inline-block;
width: 120px;
}

.main-menu li a {
text-decoration: none;
color: #333;
}

nav ul li a:hover{
color: orange;
}

これで、基本的なナビゲーションが完成しました。

他にも、背景色やリストを区切るための線を付けたりなど、多くの工夫ができるので、ぜひ挑戦してみてくださいね。

まとめ：nav要素の特徴を理解することが大事

今回は、HTMLでナビゲーションを実装する方法を解説しました。

ナビゲーションであることを示すには、nav要素を使うということでした。

nav要素を使用しなくとも、リンクメニューは作れますが、コンピュータの読み取りにも利用されるため、指定しておいた方が良いです。

Webページでナビゲーションメニューを作成するときに、今回の記事が参考になれば幸いです。