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サイトの修正などを行なっている。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!