いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【HTML/CSS】ヘッダーとナビゲーションの作成｜簡単なポートフォリオサイトの作成

WebページのヘッダーとナビゲーションメニューをCSSでスタイリングする方法を解説します。Flexboxを使い、要素を横並びにしたり、左右に配置したりするレイアウトの基本を学びます。マウスを乗せたときに文字色が変わるホバー効果も実装し、見やすいメニューを作成します。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • HTML: 5
  • CSS: 3
  • JavaScript: ES6以降

サンプルコード

/assets/css/style.css

/assets/css/style.css
1+/* リセット・基本設定 */
2+* {
3+  box-sizing: border-box;
4+  margin: 0;
5+  padding: 0;
6+}
7+
8+body {
9+  font-family: sans-serif;
10+  line-height: 1.6;
11+  color: #333;
12+  background-color: #fff;
13+}
14+
15+a {
16+  text-decoration: none;
17+  color: inherit;
18+}
19+
20+/* ヘッダー全体のスタイル */
21+header {
22+  background-color: #f5f5f5;
23+  padding: 20px 0;
24+  border-bottom: 1px solid #ddd;
25+}
26+
27+/* ヘッダー内のコンテンツを横並びに */
28+header .container {
29+  width: 90%;
30+  max-width: 960px;
31+  margin: 0 auto;
32+  display: flex;
33+  justify-content: space-between;
34+  align-items: center;
35+}
36+
37+/* ロゴ */
38+.logo {
39+  font-size: 24px;
40+  font-weight: bold;
41+  color: #333;
42+}
43+
44+/* ナビゲーション */
45+.nav-list {
46+  list-style: none;
47+  display: flex;
48+  gap: 20px;
49+}
50+
51+.nav-list li a {
52+  font-weight: bold;
53+  transition: color 0.3s;
54+}
55+
56+.nav-list li a:hover {
57+  color: #0077cc;
58+}
59

コード解説

変更点: 全要素の基本スタイル設定

/assets/css/style.css
1+/* リセット・基本設定 */
2+* {
3+  box-sizing: border-box;
4+  margin: 0;
5+  padding: 0;
6+}
7+
8+body {
9+  font-family: sans-serif;
10+  line-height: 1.6;
11+  color: #333;
12+  background-color: #fff;
13+}
14+
15+a {
16+  text-decoration: none;
17+  color: inherit;
18+}

ここでは、Webページ全体の基本的なスタイルを設定しています。まず、*（アスタリスク）は「すべての要素」を指すセレクタです。これに3つのスタイルを指定しています。

  • box-sizing: border-box;は、要素の幅(width)や高さ(height)を計算する際に、padding（内側の余白）とborder（枠線）を含めるようにする設定です。これにより、レイアウトが計算しやすくなります。
  • margin: 0;とpadding: 0;は、ブラウザが元々持っている要素ごとの余白をすべてリセット（0にする）ための設定です。これにより、意図しない余白がなくなり、デザインの再現性が高まります。

次に、bodyタグに対してページ全体の基本的な文字のスタイルなどを設定しています。

  • font-family: sans-serif;は、ページ全体の基本フォントをゴシック体に指定します。
  • line-height: 1.6;は、行の高さを文字サイズの1.6倍に設定し、文章を読みやすくします。
  • color: #333;は、基本の文字色を濃いグレーに設定します。
  • background-color: #fff;は、背景色を白に設定します。

最後に、aタグのスタイルを設定しています。

  • text-decoration: none;は、リンクの下線を消すための設定です。
  • color: inherit;は、文字色を親要素から引き継ぐ設定です。これにより、リンクだけ色が浮いてしまうことを防ぎ、場所に応じた色を適用しやすくなります。

変更点: ヘッダー領域の基本スタイル

/assets/css/style.css
1+/* ヘッダー全体のスタイル */
2+header {
3+  background-color: #f5f5f5;
4+  padding: 20px 0;
5+  border-bottom: 1px solid #ddd;
6+}

ここでは、<header>タグで囲まれたヘッダー全体の見た目を設定しています。

  • background-color: #f5f5f5;は、ヘッダーの背景色を薄いグレーに指定しています。
  • padding: 20px 0;は、ヘッダーの内側に余白を設定します。20px 0と指定すると、上下に20px、左右に0pxの余白ができます。これにより、ヘッダー内のコンテンツが上下の端に詰まるのを防ぎ、高さを確保しています。
  • border-bottom: 1px solid #ddd;は、ヘッダーの下側に1ピクセルの太さで、実線の、薄いグレーの境界線を引く設定です。これにより、ヘッダーとメインコンテンツの区切りが視覚的にわかりやすくなります。

変更点: Flexboxによるヘッダー内要素の配置

/assets/css/style.css
1+/* ヘッダー内のコンテンツを横並びに */
2+header .container {
3+  width: 90%;
4+  max-width: 960px;
5+  margin: 0 auto;
6+  display: flex;
7+  justify-content: space-between;
8+  align-items: center;
9+}

ここでは、ヘッダー内のコンテンツ（ロゴとナビゲーションメニュー）を配置するための設定をしています。.containerというクラスを持つ要素に対してスタイルを適用しています。

  • width: 90%;は、要素の幅を親要素（この場合はheader）の90%に設定します。
  • max-width: 960px;は、要素の最大幅を960ピクセルに制限します。これにより、画面が非常に大きい場合でもコンテンツが横に広がりすぎるのを防ぎます。
  • margin: 0 auto;は、要素を中央揃えにするための定番の書き方です。上下のmarginは0、左右のmarginはautoにすることで、左右の余白が均等に割り振られ、結果的に中央に配置されます。
  • display: flex;は、要素のレイアウト方法としてFlexbox（フレックスボックス）を有効にする宣言です。これにより、子要素を柔軟に横並びさせたり、配置を調整したりできます。
  • justify-content: space-between;は、Flexboxの主軸（デフォルトでは横方向）に沿った子要素の配置方法を指定します。space-betweenは、最初の子要素を左端に、最後の子要素を右端に配置し、残りの要素をその間に均等に配置します。今回は子要素がロゴとナビゲーションの2つなので、ロゴが左端、ナビゲーションが右端に配置されます。
  • align-items: center;は、Flexboxの交差軸（デフォルトでは縦方向）に沿った子要素の配置方法を指定します。centerは、子要素を垂直方向の中央に揃えます。これにより、ロゴとナビゲーションの高さが違っても、きれいに中央で揃えられます。

変更点: ロゴの文字スタイルの設定

/assets/css/style.css
1+/* ロゴ */
2+.logo {
3+  font-size: 24px;
4+  font-weight: bold;
5+  color: #333;
6+}

ここでは、.logoというクラス名が付いた要素（Webサイトのロゴ）の文字スタイルを設定しています。

  • font-size: 24px;は、文字の大きさを24ピクセルに指定しています。
  • font-weight: bold;は、文字を太字にしています。これにより、ロゴが目立ちやすくなります。
  • color: #333;は、文字色を濃いグレーに指定しています。

変更点: ナビゲーションメニューのリストを横並びに配置

/assets/css/style.css
1+/* ナビゲーション */
2+.nav-list {
3+  list-style: none;
4+  display: flex;
5+  gap: 20px;
6+}

ここでは、ナビゲーションメニューのリスト（<ul>や<ol>タグに.nav-listというクラス名が付いている想定）のスタイルを設定しています。

  • list-style: none;は、リストの項目（<li>）の先頭に付く点（・）や数字などのマーカーを非表示にします。ナビゲーションメニューでは通常、このマーカーは不要なため消去します。
  • display: flex;は、ここでもFlexboxを有効にしています。これにより、子要素であるリスト項目（<li>）が縦並びから横並びになります。
  • gap: 20px;は、Flexboxの便利なプロパティで、子要素（この場合は各メニュー項目）の間に20ピクセルの間隔を均等に空けることができます。これにより、メニュー項目同士がくっつかず、見やすい間隔が保たれます。

変更点: ナビゲーションリンクのスタイルとホバー効果の実装

/assets/css/style.css
1+.nav-list li a {
2+  font-weight: bold;
3+  transition: color 0.3s;
4+}
5+
6+.nav-list li a:hover {
7+  color: #0077cc;
8+}

ここでは、ナビゲーションメニュー内のリンク（<a>タグ）のスタイルと、マウスカーソルを乗せたときの効果（ホバー効果）を設定しています。

まず、.nav-list li aに対して、通常時のスタイルを設定します。

  • font-weight: bold;は、メニュー項目の文字を太字にしています。
  • transition: color 0.3s;は、アニメーション効果を追加するプロパティです。ここではcolor（文字色）が変化するときに、0.3s（0.3秒）かけて滑らかに変化するように指定しています。この設定がないと、ホバー時に色が瞬時に変わります。

次に、.nav-list li a:hoverで、マウスカーソルがリンクの上に乗っている間のスタイルを設定します。:hoverは、特定の状態（この場合はホバー状態）の要素にスタイルを適用するための「疑似クラス」と呼ばれるものです。

  • color: #0077cc;は、ホバー時の文字色を青色に変更する指定です。

この2つの設定を組み合わせることで、「ナビゲーションのリンクにマウスを乗せると、0.3秒かけて文字色が滑らかに青色に変わる」というインタラクティブな効果が実現できます。

おわりに

今回は、CSSを使ってヘッダーとナビゲーションメニューを作成する方法を学びました。display: flexで要素を横並びにし、justify-content: space-betweenでロゴとメニューを左右の両端に配置するレイアウトは、多くのWebサイトで使われる基本テクニックです。また、:hoverとtransitionを組み合わせることで、マウスを乗せたときに文字色が滑らかに変わる、使いやすいメニューを実装しました。ここで学んだFlexboxの知識は、ヘッダー以外の様々なレイアウト作成にも役立ちます。

【HTML/CSS】ヘッダーとナビゲーションの作成｜簡単なポートフォリオサイトの作成 | いっしー@Webエンジニア