こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。
![ペン子](https://yuki-itclass.com/wp-content/uploads/2022/03/d8872051af6e10df9bef3e9f24792c08-e1648109504519.png)
nav要素っていつ使うの?
![ユキ](https://yuki-itclass.com/wp-content/uploads/2022/03/60d4e1905aa73873ba5e88db75180934-1-e1647410033111.png)
ナビゲーションを作りたいときに記述するよ!
結論からいうと、nav要素はナビゲーションを作成したいときに必要です。
ユーザーにとってもナビゲーションがあると必要な情報を見つけたい場合に便利ですよね。
今回は、nav要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。
スポンサーリンク
1: nav要素とは
nav要素とは、ページ内のナビゲーションセクションです。
Webサイトでは必ずあるナビゲーションバーはこの要素によって構成されています。
a要素と組み合わせることで他のページへのリンクを設定することができます。ユーザーが閲覧したいコンテンツを探す手間が減るという利点があり、HTMLの基本的なUI/UXとなります。
また、CSSでデザインをカスタマイズすることや、画面の幅によってナビゲーションをハンバーガーメニューにするレスポンシブデザインも行うことができます。
このカスタマイズはBootstrapというフレームワークによって簡単に行うことができます。
2: nav要素の使い方
nav要素でリストを囲むことによってナビゲーションを使うことができます。
<nav> <ul> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> </ul>
</nav>
これを表示させると下記のような画像になります
![サンプル](https://yuki-itclass.com/wp-content/uploads/2022/03/76a9861e024fef6690fa2bc543d2ba96.png)
見た目上ではわかりにくいですが、これをCSSでデザインすることによってよりナビゲーションっぽくすることができます。
![サンプル2](https://yuki-itclass.com/wp-content/uploads/2022/03/923cfcda4d4870fbbe24c19bd4645ecf.png)
まとめ
今回は、nav要素についてと使い方について解説しました。
nav要素はナビゲーションを作成するために使うセクションです。
この機会に使いこなし、UI/UXを高めてください。
これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。
以上、ユキでした!
スポンサーリンク