nav要素の使い方は？HTML5の要素を使いこなそう【HTML編】

こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。

ペン子

nav要素っていつ使うの？

ユキ

ナビゲーションを作りたいときに記述するよ！

結論からいうと、nav要素はナビゲーションを作成したいときに必要です。

ユーザーにとってもナビゲーションがあると必要な情報を見つけたい場合に便利ですよね。
今回は、nav要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。

１： nav要素とは

nav要素とは、ページ内のナビゲーションセクションです。

Webサイトでは必ずあるナビゲーションバーはこの要素によって構成されています。
a要素と組み合わせることで他のページへのリンクを設定することができます。ユーザーが閲覧したいコンテンツを探す手間が減るという利点があり、HTMLの基本的なUI/UXとなります。

また、CSSでデザインをカスタマイズすることや、画面の幅によってナビゲーションをハンバーガーメニューにするレスポンシブデザインも行うことができます。
このカスタマイズはBootstrapというフレームワークによって簡単に行うことができます。

nav要素でリストを囲むことによってナビゲーションを使うことができます。

<nav> <ul> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> </ul>
</nav>

これを表示させると下記のような画像になります

見た目上ではわかりにくいですが、これをCSSでデザインすることによってよりナビゲーションっぽくすることができます。

今回は、nav要素についてと使い方について解説しました。

nav要素はナビゲーションを作成するために使うセクションです。
この機会に使いこなし、UI/UXを高めてください。

これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。

以上、ユキでした！