【初心者向け】HPのヘッダーメニューを作成する方法を一から分かりやすく解説！

こんにちは、

在宅勤務が続いて腰痛気味のサイトウです。

さて、本題に入りたいと思います。
企業のHP等でよく目にするでヘッダーメニュー（ナビゲーションメニュー）は、
HTMLとCSSで作成できてしまうのはご存知でしょうか？

そこで今回は、

「HTMLとCSSを使ったヘッダーメニューの作り方」

を紹介していきます。

HTMLやCSSを学び始めた方・学び直したい方、ヘッダーメニューの作成方法が分からない方は、良かったら読んでみてくださいね。

1 ヘッダーメニューとは？
2 ヘッダーメニューを構成する言語の役割
3 HTMLでヘッダーメニューの骨子を作成してみよう！
4 CSSで見やすいデザインを加えてしてみよう！
5 まとめ

ヘッダーメニューとは？

ヘッダーメニューの作成前にそもそものヘッダーメニューの役割を考えていきましょう。

ヘッダーメニューの最も重要な役割は、ユーザーが目的のページに行くために導いてあげることです。本の「目次」のようなイメージです。この「目次」がないと、ユーザーはwebサイトのどこに何のコンテンツがあるか分からなくなってしまいますよね。

webサイトの「目次」を表示し、さらに目次内のメニューをクリックしたら該当の情報を都度表示してあげることでユーザーは迷子にならず欲しい情報を閲覧できるようになります。

ヘッダーメニューが「目次」の機能を果たすことで、ユーザーの見やすさ・使いやすさに大きく貢献していることを理解して頂けたと思います。

ヘッダーメニューを構成する言語の役割

ヘッダーメニューの目的が理解できたところでヘッダーメニューを構成する言語とその役割を見ていきましょう。
ヘッダーメニューは「HTML」と「CSS」で作成可能でそれぞれ以下のような役割を担っています。

HTML・・・ヘッダーメニューに必要なテキスト（文字情報）をブラウザ上に表示させます。
CSS・・・・ユーザーが使いやすいようにデザインを加えることができます。ヘッダーメニューの作成には文字を大きくしたり、文字の色を変える必要があります。

これらの言語の役割はプログラミングを学びはじめた皆様でもイメージしやすい部分ではないでしょうか。

HTMLでヘッダーメニューの骨子を作成してみよう！

ここからは実際のヘッダーメニューを作成していきます。まずはHTMLでブラウザに表示する文字情報を作成していきます。主に以下のHTMLタグを使用して作成します。

headerタグ

まず＜header＞タグで全体を囲みます。＜header＞タグはナビゲーションメニューであることを示す際に使用するタグです。

<header>
  ヘッダーメニュー
</header>

ヘッダーメニュー

</header>

navタグ

次にheaderタグの中でナビゲーションメニューになる部分をさらに＜nav＞タグで囲みます。 ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。

<header>
  <nav>
    ヘッダーメニュー
  </nav>
</header>

<nav>

ヘッダーメニュー

</nav>

</header>

headerメニューの作成では他のページにリンクした箇所のすべてを<nav>～</nav>で囲む必要はなく、主要なナビゲーションとなるセクションのみnavタグで囲んであげます。

ULタグ・liタグ

次にnavタグの中で＜UL＞タグで囲みます。＜UL＞タグはUnordered Listの略で、順序のないリストを表示する際に使用します。今回のヘッダーメニューでは順序のないリストのため＜UL＞を使います。また、順序のあるリスト表示には＜OL＞タグを使用します。

<LI>タグはList Itemの略で、リストの項目を記述する際に使用します。リスト表示したい項目に<LI>タグをつけて＜UL＞タグの中に記述します。すると以下のように表示されます。

  <!-- ヘッダーメニュー -->
  <header>
    <nav>
      <ul>
        <li><a href="corporate.html">会社概要</a></li>
        <li><a href="service.html">商品</a></li>
        <li><a href="career.html">採用情報</a></li>
        <li><a href="info.html">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

<nav>

<ul>

<li><a href="info.html">お問い合わせ</a></li>

</ul>

</nav>

</header>

参考までに＜OL＞タグを使うとこのようなイメージになります。

  <!-- ヘッダーメニュー -->
  <header>
    <nav>
      <ol>
        <li><a href="corporate.html">会社概要</a></li>
        <li><a href="service.html">商品</a></li>
        <li><a href="career.html">採用情報</a></li>
        <li><a href="info.html">お問い合わせ</a></li>
      </ol>
    </nav>
  </header>

<nav>

<ol>

<li><a href="info.html">お問い合わせ</a></li>

</ol>

</nav>

</header>

aタグ

最後に<a>タグを使って、ヘッダーメニューから移動したいページへのリンクを作成します。

  <header>
    <nav>
      <ul>
        <li><a href="corporate.html">会社概要</a></li>
        <li><a href="service.html">商品</a></li>
        <li><a href="career.html">採用情報</a></li>
        <li><a href="info.html">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

<nav>

<ul>

<li><a href="info.html">お問い合わせ</a></li>

</ul>

</nav>

</header>

<a>タグとはHTMLのタグの一種です。<a>は「アンカー(anchor)」の略で、リンクの出発点と到達点を指定するために使われます。様々な属性を持ちますが、リンク先を指定する場合はhref属性を使用します。

＜a＞タグの書き方

<a href=”リンクさせたいページのファイル名”>○○○</a>

○○○には「会社概要」などヘッダーのメニュー名を記載します。

今回の例では以下のように、移動するページとファイル名が分かるように記載しています。

「corporate.html：会社概要のページ」

「service.html：商品ページ」

「career.html：採用情報ページ」

「info.html：お問い合わせページ」

これでHTMLの枠組みは完成です。最終的なコードとイメージはこのようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>ヘッダーサンプル</title>
</head>
<body>

  <!-- ヘッダーメニュー -->
  <header>
    <nav>
      <ul>
        <li><a href="corporate.html">会社概要</a></li>
        <li><a href="service.html">商品</a></li>
        <li><a href="career.html">採用情報</a></li>
        <li><a href="info.html">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

</body>
</html>

<!DOCTYPE html>

<head>

<title>ヘッダーサンプル</title>

</head>

<body>

<nav>

<ul>

<li><a href="info.html">お問い合わせ</a></li>

</ul>

</nav>

</header>

</body>

</html>

CSSで見やすいデザインを加えてしてみよう！

次にCSSを使って、見た目をデザインしていきます。各タグに対して必要なCSSプロパティを適用していきます。

＜UL＞タグにはこちらのタグを適用していきます。

font-size

{font-size:文字サイズ;}でフォントサイズを変更できます。今回は16pxで指定するので{font-size:16px;}と記載します。

font-weight

{font-weight:文字の太さ}でフォントの太さを変更することができます。太さは100、200、300、400、500、600、700、800、900でフォントの太さを選んで指定します。今回は600を指定するのでfont-weight:600と記載します。

参考：フォントサイズは以下でも変更可能です。
normal …… 標準の太さです。（数値で400を指定した場合と同様です。）
bold …… 一般的な太字の太さです。（数値で700を指定した場合と同様です。）
lighter …… 相対的に一段階細くします。
bolder …… 相対的に一段階太くします。

＜UL＞タグに適用するプロパティをまとめるとこのようになります。

ul{
  font-size: 16px;
  font-weight: 600;
}

ul{

font-size: 16px;

font-weight: 600;

}

フォントサイズと太さが変わったのが変わりましたね。

list-style

list-styleプロパティでメニューの先頭に表示するリストを加工できます。今回は{list-style:none;}と記載して先頭の「●」を取り除きます。

次に＜LI＞タグにはこちらの記述をしていきます。

float

floatプロパティを使って縦に並んでいる要素を横に並べることができます。今回はメニューを左から横並びにするので、
「float:left;」と記述します。

＜参考＞他にも横並びにする方法として「Flexbox,table-cell」などのような方法があります。

padding

paddingプロパティを使って要素間の間隔を調整することが可能です。「会社概要」と「商品」の間の余白もpaddingで調節することができます。今回は上下左右10pxの余白を開けるので{padding: 10px;}を記載します。

＜LI＞タグに適用するプロパティをまとめるとこのようになります。

li{
  float: left;
  list-style: none;
  padding: 10px;
}

li{

float: left;

list-style: none;

padding: 10px;

}

かなりヘッダーメニューに近づいてきましたね。

最後に＜a＞タグに以下のCSSを適用します。

text-decoration

現在表示されているメニューに下線が表示されています。下線を取り除くために、{text-decoration:none;}と記載します。

color

ヘッダーメニューの文字色も見やすいように変更します。{color:色コード or 色名;}と記載することで変更可能です。今回は黒に変更するので{color:black;}と記載します。

cursor

最後にcursorプロパティを使って、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を指定します。このプロパティを指定するとユーザーが「ここのメニューをクリックしたら別のページに飛ぶ」と一目でわかるので、ユーザビリティが向上します。今回はマウスカーソル形式にするので{cursor: pointer;}と記載します。

＜LI＞タグに適用するプロパティをまとめるとこのようになります。

nav a{
  text-decoration: none;
  color: black;
}

a:hover{
  cursor: pointer;
}

nav a{

text-decoration: none;

color: black;

}

a:hover{

cursor: pointer;

}

cursor:pointerで適用した部分もマウスのポインターのように表示されていますね。

最終的なCSSのコードはこうなります。

ul{
  font-size: 16px;
  font-weight: 600;
}
li{
  float: left;
  list-style: none;
  padding: 10px;
}
nav a{
  text-decoration: none;
  color: black;
}

a:hover{
  cursor: pointer;
}

ul{

font-size: 16px;

font-weight: 600;

}

li{

float: left;

list-style: none;

padding: 10px;

}

nav a{

text-decoration: none;

color: black;

}

a:hover{

cursor: pointer;

}

まとめ

いかがでしたか？今回は、基本的なヘッダーメニューの作成方法について説明しました。

実際に企業や商品のwebページを見るとても難しく感じるかもしれませんが、構造自体は比較的シンプルですよね。「少しずつコードを書く→試す」ことを繰り返して継続すれば、ヘッダーメニューは必ず作成できるようになります。焦らずに基礎から着実に理解を深めていってくださいね。

この記事が、皆様の学習に役立つと幸いです。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。