HTMLでナビゲーションメニューバーを作成する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLでナビゲーションメニューバーを作成する方法について解説しています。これはサイトの主に上部に表示される、各項目への移動に使われるメニューです。ナビゲーションメニューバーの基本構成と書き方、スタイルの例を紹介します。ぜひ覚えておきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLでナビゲーションメニューバーを作成する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

ナビゲーションメニューバーを作成する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

ヘッダーメニューの必要性

 webサイトにはヘッダーメニューがあります。ヘッダーメニューは本の目次代わりのように作成してあることが多く、そのヘッダー内のナビゲーションメニューをクリックすることで適宜のページを表示することが出来きるようになります。
ヘッダーメニューがあることにより、今の表示されているページが目次内のどこであるかがすぐにわかるようになり、他のページへの移動が容易になるためユーザビリティーが良くなります。
初めて閲覧するサイトでは今現在の表示されているページがホームページ内で分からなくなることが多く、迷子のようになってしまいます。そのガイドをする意味もあるためヘッダーメニューの必要性はとても高く、様々なwebサイトで入念な作り込みをしている場合が多い箇所となります。
ヘッダーメニューはグローバルメニューやグローバルナビゲーションとも呼ばれ、上部ではなく左側に表示されている場合や折りたたみ式に表示される場合などもあり、ヘッダーメニューはそのwebサイトの個性を表現する一つともなっています。

 

設置方法

 ヘッダーメニューはbodyの中の<header></header>内に記述します。リスト形式に記述した各ページのアドレスを記述します。
アドレス自体はa要素に記述します。そのリスト形式としたli要素をCSSで横並びになるように調整します

(html)

<header>

 <nav id="gnav">

  <ul class="inner">

    <li><a href="#">ホーム</a></li>

    <li><a href="#">1ページ目</a></li>

    <li><a href="#">2ページ目</a></li>

    <li><a href="#">3ページ目</a></li>

    <li><a href="#">会社概要</a></li>

  </ul>

 </nav>

</header>

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

スタイリング方法

CSSでの調整方法はいろいろな方法がありますが、
  • floatを使って横並びにする方法
  • displayで横並びにする方法
  • Flexbox,table-cellを使う方法

などがあります。

 

floatによって横並びにする方法

floatの場合は一つ一つのli要素の横幅を適宜のwidthサイズに指定することで横並びにすることが出来ます。

(css)

#gnav{

background-color: gray;

}

#gnav ul{

overflow: hidden;

}

#gnav li{

float: left;

width: 200px;

}

 

displayを使って横並びにする場合

(css)

#gnav{

background-color: gray;

}

#gnav ul li{

display: inline;

}

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。