サイトのヘッダーメニューをつくる【メニューバーの実装～ PC編】

静的サイトのヘッダーメニューをつくる【メニューバーの実装～ PC閲覧編】

Web系技術

2020.03.252020.03.15

1. ヘッダメニュー
 2. HTMLでメニュー項目リストをつくる
 3. メニューバーのスタイルを設定する
 4. まとめ

1. ヘッダメニュー

　最近のPCサイトには、以下のようにヘッダー画像の下にメニューバーがあるというパターンを多く見かけます。メニューのパターンは一律ではなく、ほかにも多くのパターンがありますが、自サイトでは、この形にしてあります。

　　図1-1 自サイトのヘッダーメニュー

　メニュー項目としては、サイトマップ、プライバシーポリシー、お問い合わせなどがありますが、特に決まりのようなものはなく、サイトコンテンツのカテゴリーの種類をメニュー項目としているサイトも見かけます。

　この記事では、上記の基本的な3項目を含むメニューバーを静的なサイト(PC閲覧時)に実装する方法について説明します。

　なお、スマホ閲覧時のヘッダーメニュー(ハンバーガーメニュー)の実装につきましては、以下の記事をご覧ください。

静的サイトのヘッダーメニューをつくる【ハンバーガーメニューの実装～スマホ閲覧編】

スマホ閲覧用の静的サイトにハンバーガーメニューを実装する方法について解説します。

2. HTMLでメニュー項目リストをつくる

　メニュー項目リストをつくるには、以下のようにHTMLを記述します。ULタグとLIタグを使用したリスト形式になっています。

　自サイトでは、メニュー項目として、TOPページへのリンク、サイトマップ、ブログサイトへのリンク、プライバシーポリシー、お問い合わせの5項目を設定しています。

<!-- HEADER MENU FOR PC -->
<ul id="nav">
  <li><a href="index.html">TOP</a></li>
  <li><a href="sitemap00.html">サイトマップ</a></li>
  <li><a href="https://hirokami1024.com/">blog☆hirokami1024.com</a></li>
  <li><a href="privacy-policy.html">プライバシーポリシー</a></li>
  <li><a href="toiawase.html">お問い合わせ</a></li>
</ul>

　ただし、このままでは、縦並びのリスト表示となるので、スタイルシートにメニューバーのスタイルを設定して、横並びの表示となるようにします。

3. メニューバーのスタイルを設定する

　自サイトのメニューバースタイルを設定したCSSコードは以下のとおりです。

　ポイントは、メニュー項目を並列に並ぶように配置することと、1つのメニュー項目幅をディスプレイ幅の20%とすることで、横並びに5つのメニュー項目を配置している点です。

/* PC用ヘッダメニューを表示 */
#nav {                     /* ULタグ用 */
  list-style: none;        /* 先頭の「・」を非表示 */
  display: flex;           /* 要素を並列に並べる */
  margin:0;
  padding:0;
}
#nav li {                  /* LIタグ用 */
  width: 20%;              /* メニュー項目幅はディスプレイ幅の20% */
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #333;
  display: inline-block;   /* 横に並び、高さ、幅の指定が可能 */
  font-size: 16px;
}
#nav li a {                /* Aタグ用 */
  text-decoration: none;   /* リンクの下線を表示しない */
  color: #fff;
  font-weight: bold;
}