
1. ヘッダメニュー
最近のPCサイトには、以下のようにヘッダー画像の下にメニューバーがあるというパターンを多く見かけます。メニューのパターンは一律ではなく、ほかにも多くのパターンがありますが、自サイトでは、この形にしてあります。
図1-1 自サイトのヘッダーメニュー
メニュー項目としては、サイトマップ、プライバシーポリシー、お問い合わせなどがありますが、特に決まりのようなものはなく、サイトコンテンツのカテゴリーの種類をメニュー項目としているサイトも見かけます。
この記事では、上記の基本的な3項目を含むメニューバーを静的なサイト(PC閲覧時)に実装する方法について説明します。
なお、スマホ閲覧時のヘッダーメニュー(ハンバーガーメニュー)の実装につきましては、以下の記事をご覧ください。

静的サイトのヘッダーメニューをつくる【ハンバーガーメニューの実装 ~ スマホ閲覧編】
スマホ閲覧用の静的サイトにハンバーガーメニューを実装する方法について解説します。
2. HTMLでメニュー項目リストをつくる
メニュー項目リストをつくるには、以下のようにHTMLを記述します。ULタグとLIタグを使用したリスト形式になっています。
自サイトでは、メニュー項目として、TOPページへのリンク、サイトマップ、ブログサイトへのリンク、プライバシーポリシー、お問い合わせの5項目を設定しています。
1 |
ただし、このままでは、縦並びのリスト表示となるので、スタイルシートにメニューバーのスタイルを設定して、横並びの表示となるようにします。
3. メニューバーのスタイルを設定する
自サイトのメニューバースタイルを設定したCSSコードは以下のとおりです。
ポイントは、メニュー項目を並列に並ぶように配置することと、1つのメニュー項目幅をディスプレイ幅の20%とすることで、横並びに5つのメニュー項目を配置している点です。
1 |
4. まとめ
今回の記事では、自サイトのヘッダーメニューを例にとって、PC閲覧用サイトにメニューバーを実装する方法について、ソースコードを混じえた説明をさせていただきました。リスト形式で作成したメニュー項目を横並びの配置になるようにスタイルを設定すればよいことが、ご理解いただけたと思います。
次回の記事以降では、スマホ閲覧用サイトにヘッダメニューを実装する方法について、記事にしたいと考えています。
自サイトカスタマイズの全体の概要については以下の記事をご覧ください。


古いウェブサイトを現代風デザインにカスタマイズ【HTML部品化とスマホ対応】
2000年代初頭に作成した昔風の静的サイトに対し、現代風の外観、機能となるようにカスタマイズした記録です。
おわり
コメント