Flexbox：本物のメニュー · Martinとコード

ボックスを横並びに並べる方法を学んで、メニューを本物のサイトみたいにしよう。

見てみよう：ボックスを横並びに

今のメニューのリンクは、文の中の単語みたいにページ上で次々と並んでる。本物のメニューは項目が きれいに横並び、間隔を空けて 並んでる。CSS にはボックスを並べる道具 flexbox がある：

nav {
  display: flex;    /* this box's children line up side by side */
  gap: 16px;        /* space between them */
}

これだけ。display: flex はボックスに「子ども（ここではリンク）を横一列に並べて」と言う。gap は間のスペース。

Flexbox はもっとたくさんできる：

nav {
  display: flex;
  gap: 16px;
  justify-content: center;   /* center children horizontally */
  align-items: center;       /* also align them to the middle vertically */
  flex-wrap: wrap;           /* if they don't fit, wrap to the next line */
}

見てみよう：本物のサイトみたいなメニュー

これまで学んだことと flexbox を組み合わせよう：

header {
  background-color: #1d4ed8;   /* a colored bar at the top */
  padding: 16px;
}

header h1 {
  color: white;
  margin: 0;                   /* heading without its default spacing */
}

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;       /* remove the underline from links */
  padding: 8px 14px;
  border-radius: 999px;        /* fully rounded ends = a pill shape */
  background-color: rgba(255, 255, 255, 0.15);  /* semi-transparent white */
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

最後に新しいもの：:hover は「マウスを乗せたとき」。メニュー項目がホバーで光る——知ってるサイトと同じ。

やってみよう 💪

メニューを本物のメニューに：ヘッダー全幅の色付きバー、ピル型の横並び項目、ホバーで光る。レッスン6のパレットから色を選んで。

🏫 学校サイト——答え（青）

header {
  background-color: #1d4ed8;
  padding: 16px;
}

header h1 { color: white; margin: 0; }

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
}

nav a:hover { background-color: rgba(255, 255, 255, 0.35); }

🙋 個人サイト——答え（オレンジ）

同じコード、ヘッダーの色だけ変える：

header {
  background-color: #ea580c;
  padding: 16px;
}

🌍 旅行日記——答え（緑）

同じコード、ヘッダーの色だけ変える：

header {
  background-color: #15803d;
  padding: 16px;
}

⚽ クラブサイト——答え（クラブカラー）

同じコード、クラブの色にヘッダーを変える：

header {
  background-color: #b91c1c;
  padding: 16px;
}

💡

名前を左、メニューを右、1行に？ ヘッダーをもう1つの flexbox で包む：header { display: flex; justify-content: space-between; align-items: center; } を追加。space-between は「子どもを離す：最初を左、最後を右」。

✅

確認： サイト上部に色付きバー、白い名前、ホバーで光るピル型メニュー。CSS は共有だから、メニューは全ページ同時に変わった。

このレッスンのまとめ

display: flex で子を横一列、gap で間隔。
justify-content と align-items で整列、flex-wrap: wrap で折り返し。
:hover = 「マウスを乗せたとき」。ちょっと光るとサイトが生き生きする。