PR

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

 この記事では、Webサイトにヘッダメニューを実装する方法について説明します。
 

1. ヘッダメニュー

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

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

 

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

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

 

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

【静的サイト制作】Webサイトのヘッダーメニューをつくる【ハンバーガーメニュー実装・スマホ閲覧編】
スマホ閲覧用のWebサイトにハンバーガーメニューを実装する方法について解説します。

 

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

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

 自身のWebサイトでは、メニュー項目として、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>
図2-1 ヘッダメニューHTML(header.html)
 
 ただし、このままでは、縦並びのリスト表示となるので、スタイルシートにメニューバーのスタイルを設定して、横並びの表示となるようにします。
 
 

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;
}
図3-1 PC用ヘッダメニュー用スタイル(layout.css)
 
 
 

4. まとめ

 今回の記事では、自サイトのヘッダーメニューを例にとって、PC閲覧用サイトにメニューバーを実装する方法について、ソースコードを混じえた説明をさせていただきました。リスト形式で作成したメニュー項目を横並びの配置になるようにスタイルを設定すればよいことが、ご理解いただけたと思います。

 次回の記事以降では、スマホ閲覧用サイトにヘッダメニューを実装する方法について、記事にしたいと考えています。

 
 
 
おわり
 
【Amazon.co.jp限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座[第2版] (DL特典:Webデザイナーのポートフォリオの作り方入門講座) (1冊ですべて身につく)
【Amazon.co.jp限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座[第2版] (DL特典:Webデザイナーのポートフォリオの作り方入門講座) (1冊ですべて身につく)

コメント

タイトルとURLをコピーしました