シリーズゼロからWebサイトを作ろう！第5回 / 全10回

CSS

レイアウトの組み方 ―
Flexboxでパーツを並べよう

前回CSSで色や余白を与えたcafé SOELですが、パーツがまだ縦に積まれたまま。今回はFlexboxを使って、ヘッダーのロゴとナビを左右に配置し、コンセプトの画像とテキストを横並びにし、「サイトらしいレイアウト」を実現します。

✍

KANON

2026.04.15 読了目安：18分

前回のおさらい

📖 前回のおさらい

CSSの基本構文（セレクタ { プロパティ: 値; }）を学び、外部CSSファイルから読み込む方法を導入した
CSS変数（カスタムプロパティ）を :root に定義し、サイト全体の配色を一元管理した
ボックスモデルを理解し、ヒーローセクションを 100vh の全画面表示にした

ヒーローは画面いっぱいに表示され、セクションごとに背景色も交互に変わる。だいぶサイトらしくなりましたよね。でも、ヘッダーのロゴとナビが縦に並んでいたり、コンセプトの画像とテキストが上下に積まれたままだったり。今回はいよいよ、あの「横並び」を実現します。

今回のゴール

🎯 今回のゴール

Flexboxの基本概念（flexコンテナとflexアイテム）を理解する
justify-content、align-items、gap でアイテムの配置を制御する
café SOELのヘッダー・コンセプト・アクセス・フッターをFlexboxで横並びレイアウトにする
ヒーローセクションの中央配置を、よりシンプルなFlexboxに置き換える

👀 この回の完成イメージ

今回の内容を終えると、サイトはこのような状態になります。先に完成形を確認しておきたい方はこちらをご覧ください。
第5回の完成イメージを見る →

Flexboxって何？

Flexbox（フレックスボックス）は、CSSでレイアウトを組むための仕組みです。正式名称は CSS Flexible Box Layout。名前のとおり、柔軟（flexible）に要素を並べることができます。

Flexboxの考え方はとてもシンプル。親要素に display: flex を1行書くだけで、その子要素が自動的に横並びになります。

この親要素のことを flexコンテナ、子要素のことを flexアイテム と呼びます。コンテナが「棚」で、アイテムが「棚に並ぶ本」のようなイメージです。

実際に見てみましょう。まずは display: flex を付けていない状態です。

▶ Live Demo — display: flex なし（通常のブロック配置）

ブロック要素はデフォルトで縦に積まれます。前回までのcafé SOELの状態がまさにこれです。ここに display: flex を加えると——

▶ Live Demo — display: flex あり（横並び）

たった1行で横並びに。これがFlexboxの威力です。

「並べたい要素の親」に display: flex を書く。Flexboxはいつもこのワンステップから始まる。

Flexboxの主要プロパティを知ろう

display: flex で横並びにしたあと、アイテムの配置を細かく調整するためのプロパティがいくつかあります。今回使うものを順に紹介しますね。

justify-content — 主軸方向の配置

flexアイテムを主軸（横並びの場合は左右方向）にどう配置するかを決めます。よく使う値を見てみましょう。

justify-content の代表的な値

/* 先頭に寄せる（デフォルト） */
justify-content: flex-start;

/* 末尾に寄せる */
justify-content: flex-end;

/* 中央に寄せる */
justify-content: center;

/* 両端に寄せて、間を均等に空ける */
justify-content: space-between;

space-between は特に便利です。ヘッダーの「ロゴを左端、ナビを右端」に置く場面で活躍します。

▶ Live Demo — justify-content: space-between

Logo

Nav

align-items — 交差軸方向の配置

主軸と垂直な方向（横並びの場合は上下方向）の配置を決めます。

align-items の代表的な値

/* 上端に揃える（デフォルト） */
align-items: stretch;

/* 上端に揃える */
align-items: flex-start;

/* 中央に揃える */
align-items: center;

/* 下端に揃える */
align-items: flex-end;

center を使えば、高さが異なる要素同士でも上下中央で揃えてくれます。ヘッダーのロゴとナビを縦方向に揃えるのに最適です。

gap — アイテム間の余白

flexアイテム同士の間隔を指定します。以前は margin で調整していましたが、 gap なら一発です。

gap の使い方

.nav-list {
  display: flex;
  gap: 36px;  /* アイテム間に36pxの余白 */
}

flex: 1 — 残りスペースを均等に分配

flexアイテムに flex: 1 を指定すると、コンテナの残りスペースを均等に分配して幅を決めてくれます。2つのアイテム両方に flex: 1 を付ければ、ちょうど半分ずつの幅になります。

flex: 1 で均等幅にする

.concept-image {
  flex: 1;
}
.concept-text {
  flex: 1;
}

flex-direction — 並べる方向を変える

デフォルトは横並び（row）ですが、column を指定すると縦並びになります。「縦並びなのにFlexbox？」と思うかもしれませんが、縦並びでも align-items: center で横方向の中央揃えができるなど、レイアウトの制御に便利です。

▶ Live Demo — flex-direction: column + align-items: center

Logo

Nav Links

flex-shrink: 0 — 縮まないようにする

flexアイテムはデフォルトで、コンテナが狭くなると縮もうとします。flex-shrink: 0 を指定すると「この要素は縮めないで」と指示できます。ラベルや見出しなど、幅を固定したい要素に使います。

📌 覚えておこう

Flexboxで覚えるべきプロパティは意外と少ないです。display: flex で横並びにして、justify-content で左右の配置、align-items で上下の配置、gap で間隔。この4つの組み合わせで、ほとんどのレイアウトが組めます。

ヘッダーにFlexboxを適用しよう

ここからは実際にcafé SOELのCSSにFlexboxを追加していきます。まずはヘッダーから。現在、ロゴとナビゲーションが縦に積まれていますよね。これを「ロゴは左、ナビは右」に配置します。

css/style.css の .header-inner に、以下の3行を追加してください。

css/style.css — .header-inner に追加

.header-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  height: 72px;
  display: flex;              /* ← 追加 */
  align-items: center;        /* ← 追加 */
  justify-content: space-between; /* ← 追加 */
}

display: flex で子要素（ロゴと <nav>）が横並びに。justify-content: space-between で両端に配置され、align-items: center で高さ72pxの中で上下中央に揃います。

次に、ナビゲーションのリンクも横並びにしましょう。 .nav-list に2行追加します。

css/style.css — .nav-list に追加

.nav-list {
  display: flex;   /* ← 追加 */
  gap: 36px;       /* ← 追加 */
}

保存してブラウザを確認してみてください。ロゴが左、ナビリンクが右に並んで、一気にヘッダーらしくなったはずです！

💡 KANONのワンポイント

gap: 36px の代わりに各 <li> に margin-left: 36px を付けても同じ見た目にはなりますが、最初のアイテムだけ margin-left: 0 にしなければなりません。 gap なら「アイテム間だけ」に余白が入るので、そんな調整が不要。スマートですよね。

ヒーローセクションをFlexboxで改善しよう

前回、ヒーローのテキストを中央に配置するために position: absolute と transform: translate(-50%, -50%) を使いました。動いてはいますが、コードが少しトリッキーでしたよね。Flexboxならもっとシンプルに書けます。

まず、.hero に3行追加します。

css/style.css — .hero に追加

.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  max-height: 1000px;
  overflow: hidden;
  display: flex;              /* ← 追加 */
  align-items: center;        /* ← 追加 */
  justify-content: center;    /* ← 追加 */
}

次に、.hero-content から position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%) の4行を削除し、代わりに position: relative だけを残します。

❌ 第4回で書いたコード（変更前）

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  padding: 0 var(--container-padding);
}

✅ Flexboxで書き換えたコード（変更後）

.hero-content {
  position: relative;       /* absolute → relative に変更 */
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  padding: 0 var(--container-padding);
}

ブラウザで確認してみてください。見た目は前回とまったく同じはずですが、コードはぐっとシンプルになりました。

Flexboxなら「このコンテナの中で、子要素を上下左右の中央に置いてね」と言うだけ。top: 50% と transform の組み合わせを暗記しなくても済みます。

position: relative を残しているのは、 z-index: 2 で背景画像より手前に表示するためです。背景画像は position: absolute で配置されているので、通常のフロー（Flexboxの並び）には参加しません。だから .hero-content だけがflexアイテムとして中央配置されるわけです。

💡 KANONのワンポイント

前回わざわざ position + transform を使ったのは、Flexboxを教える前だったからです。Web制作では「今の知識でできる方法」で書いて、もっと良い方法を学んだら書き換える、というのは日常的に起きること。コードは一度書いたら終わりじゃなく、知識が増えるたびに改善していけるもの。それもWeb制作の楽しさのひとつです。

コンテンツセクションを横並びにしよう

ヘッダーとヒーローが整ったので、次はページ本体のセクションを横並びレイアウトにしていきましょう。

コンセプトセクション — 画像とテキストを横並びに

コンセプトセクションは、左に画像、右にテキストが並ぶレイアウトを目指します。 .concept-inner にFlexboxを適用し、子要素にそれぞれ flex: 1 を指定して均等幅にします。

css/style.css — コンセプトに追加

.concept-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;          /* ← 追加 */
  align-items: center;    /* ← 追加 */
  gap: 60px;              /* ← 追加 */
}

.concept-image {
  border-radius: 12px;
  overflow: hidden;
  flex: 1;                /* ← 追加 */
}

.concept-text {
  flex: 1;                /* ← 追加 */
}

align-items: center で画像とテキストの上下中央が揃い、 gap: 60px で間に60pxの余白が入ります。 flex: 1 を両方に付けることで、コンテナの幅を半分ずつ分け合います。保存してブラウザを確認すると、コンセプトセクションが横並びに変わっているはずです。

アクセスセクション — 画像と店舗情報を横並びに

アクセスセクションもコンセプトと同じ構造です。左に外観写真、右に店舗情報。まったく同じパターンなので、スムーズに書けるはず。

css/style.css — アクセスに追加

.access-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;          /* ← 追加 */
  align-items: center;    /* ← 追加 */
  gap: 60px;              /* ← 追加 */
}

.access-image {
  border-radius: 12px;
  overflow: hidden;
  flex: 1;                /* ← 追加 */
}

.access-info {
  flex: 1;                /* ← 追加 */
}

店舗情報のdt/ddを横並びに

店舗情報の定義リストも、項目名（dt）と内容（dd）を横並びにするとグッと見やすくなります。

css/style.css — .info-item に追加

.info-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;          /* ← 追加 */
  gap: 24px;              /* ← 追加 */
}

.info-item dt {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  width: 100px;           /* ← 追加 */
  flex-shrink: 0;         /* ← 追加 */
}

.info-item dt に width: 100px と flex-shrink: 0 を指定しています。 width: 100px で「住所」「営業時間」などのラベル幅を固定し、 flex-shrink: 0 で「どんなに隣のddが長くても、このdtは縮めないで」と指示しています。これでラベルの幅が揃い、表のような見た目になります。

フッターをFlexboxで整えよう

最後にフッターです。フッターは「ロゴ → ナビリンク → コピーライト」を縦に中央揃えで並べたいので、flex-direction: column を使います。

css/style.css — フッターに追加

.footer-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;                /* ← 追加 */
  flex-direction: column;        /* ← 追加 */
  align-items: center;          /* ← 追加 */
  gap: 24px;                    /* ← 追加 */
}

.footer-nav {
  display: flex;                /* ← 追加 */
  gap: 28px;                    /* ← 追加 */
}

flex-direction: column で縦並びにしつつ、align-items: center で横方向の中央に揃えます。先ほどのデモで見たパターンですね。フッターのナビリンクは .footer-nav に display: flex と gap: 28px を付けて横並びにします。

保存してブラウザで確認すると、フッターのロゴ・ナビ・コピーライトが中央にきれいに揃い、ナビリンクが横並びになっているはずです。

ここまでの全体を確認しよう

Flexboxを追加したら保存して、ブラウザで確認してみましょう。

👀 この回の完成イメージ

ヘッダーのロゴとナビが横に並び、コンセプトセクションは画像とテキストが横並びに。サイトらしくなってきましたね！ただ、メニューカードやギャラリーはまだ縦に並んだままです。これは次回、CSS Gridで整えていきます。あなたの画面でも同じように見えていますか？
第5回の完成イメージを見る →

今回は index.html の変更はありません。CSSだけの追加で、これだけレイアウトが変わるのがFlexboxのすごさです。

うまくいかない場合は、以下の全コードをまるごとコピーして貼り付けてリカバリーしてください。

index.html（第4回から変更なし）

index.html は第4回と同じです。変更はありません。

css/style.css（第5回完成時点）

/* ===================================
   café SOEL — Style Sheet
   第5回時点：基本CSS + Flexboxレイアウト
   =================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
  --color-bg: #ffffff;
  --color-bg-soft: #faf9f7;
  --color-bg-accent: #f5f0eb;
  --color-text: #2c2c2c;
  --color-text-light: #6b6b6b;
  --color-text-muted: #999999;
  --color-accent: #8b7355;
  --color-accent-light: #c4a882;
  --color-border: #e8e4df;
  --color-white: #ffffff;
  --color-black: #1a1a1a;

  --section-padding: 120px;
  --container-width: 1200px;
  --container-padding: 24px;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
  background-color: var(--color-bg);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ---------- Utility ---------- */
.section {
  padding: var(--section-padding) var(--container-padding);
}

.section-label {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.section-heading {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-black);
  margin-bottom: 20px;
}

.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 60px;
}

.section-desc {
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 1.8;
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  height: 32px;
  width: auto;
}

.nav-list {
  display: flex;
  gap: 36px;
}

.nav-link {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  max-height: 1000px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  padding: 0 var(--container-padding);
}

.hero-sub {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0.9;
}

.hero-title {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  margin-bottom: 40px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.hero-cta {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-white);
  padding: 12px 36px;
}

/* ---------- Concept ---------- */
.concept {
  background-color: var(--color-bg);
}

.concept-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}

.concept-image {
  border-radius: 12px;
  overflow: hidden;
  flex: 1;
}

.concept-text {
  flex: 1;
}

.concept-text p {
  font-size: 15px;
  line-height: 2;
  color: var(--color-text-light);
  margin-bottom: 16px;
}

.concept-text p:last-child {
  margin-bottom: 0;
}

/* ---------- Menu ---------- */
.menu {
  background-color: var(--color-bg-soft);
}

.menu-card-body {
  padding: 24px;
}

.menu-card-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
  color: var(--color-black);
}

.menu-card-desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 12px;
}

.menu-card-price {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 1px;
}

/* ---------- Gallery ---------- */
.gallery {
  background-color: var(--color-bg);
}

/* ---------- Access ---------- */
.access {
  background-color: var(--color-bg-soft);
}

.access-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}

.access-image {
  border-radius: 12px;
  overflow: hidden;
  flex: 1;
}

.access-info {
  flex: 1;
}

.info-list {
  margin-top: 12px;
}

.info-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: 24px;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item dt {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  width: 100px;
  flex-shrink: 0;
}

.info-item dd {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
}

.info-item dd a {
  color: var(--color-accent);
}

/* ---------- Footer ---------- */
.footer {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 60px var(--container-padding);
}

.footer-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer-logo img {
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.footer-nav {
  display: flex;
  gap: 28px;
}

.footer-nav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.footer-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.5px;
}

⚠️ よくあるミス

Flexboxが効かない場合、もっとも多い原因は「間違った要素に display: flex を書いている」ことです。Flexboxは親要素に書くもの。横に並べたい要素そのものではなく、その一つ上の親に書いてくださいね。たとえばナビリンクを横に並べたいなら、 .nav-link ではなく .nav-list （リンクを囲む <ul>）に書きます。

今回のまとめ

Flexboxは親要素に display: flex を書くだけで、子要素が横並びになるレイアウト手法
justify-content で主軸（左右）、align-items で交差軸（上下）の配置を制御する
gap でアイテム間の余白を指定できる。margin より直感的で、最初のアイテムへの余分な余白も入らない
flex: 1 で残りスペースを均等に分配し、flex-shrink: 0 で「この要素は縮めない」と指定できる
flex-direction: column で縦並びにしつつ、align-items: center で中央揃えができる
ヒーローの中央配置を position + transform からFlexboxに置き換え、コードがシンプルになった
メニューカードやギャラリーはまだ縦積みのまま。次回CSS Gridで2列レイアウトに整え、レスポンシブ対応も行う

← 前回 CSSの基本 — サイトに"見た目"を与えよう次回 → CSS Gridとレスポンシブデザイン

レイアウトの組み方 ―Flexboxでパーツを並べよう

前回のおさらい

今回のゴール

Flexboxって何？

Flexboxの主要プロパティを知ろう

justify-content — 主軸方向の配置

align-items — 交差軸方向の配置

gap — アイテム間の余白

flex: 1 — 残りスペースを均等に分配

flex-direction — 並べる方向を変える

flex-shrink: 0 — 縮まないようにする

ヘッダーにFlexboxを適用しよう

ヒーローセクションをFlexboxで改善しよう

コンテンツセクションを横並びにしよう

コンセプトセクション — 画像とテキストを横並びに

アクセスセクション — 画像と店舗情報を横並びに

店舗情報のdt/ddを横並びに

フッターをFlexboxで整えよう

ここまでの全体を確認しよう

index.html（第4回から変更なし）

css/style.css（第5回完成時点）

今回のまとめ

レイアウトの組み方 ―
Flexboxでパーツを並べよう