Skip to content
Dev Guides
Playground

4.レイアウト

学習目標

  • display: flex で要素を横並びにできる
  • justify-content / align-items で配置を調整できる
  • Flexbox を使ってプロフィール領域などの実用レイアウトを組める
  • コンテナー・2 カラム・カードグリッドのレイアウトパターンを使える

ページの要素をどう並べるかを レイアウト と呼びます。CSS にはレイアウトを組むための仕組みがいくつかあり、ここでは主に Flexbox と、よく使う レイアウトパターン を扱います。

1. Flexbox

Section titled “1. Flexbox”

HTML の要素は通常、上から下に縦に並びます。横に並べたいときに使うのが Flexbox です。

1-1. 基本の使い方

Section titled “1-1. 基本の使い方”

自己紹介ページの趣味リストで試します。index.html の <ul> にクラスを追加します。

<ul class="hobby-list">
  <li>読書</li>
  <li>映画鑑賞</li>
  <li>ランニング</li>
</ul>

style.css に以下を追加します。

.hobby-list {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;
}

display: flex を指定すると、中にある <li> が横並びになります。gap: 16px は各項目の間に 16px の間隔を入れる指定です。

list-style: none はリストの先頭記号（「・」）を非表示にし、padding: 0 はリストの初期余白を取り除いています。

ブラウザーで再読み込みすると、縦に並んでいた「読書」「映画鑑賞」「ランニング」が横一列に並びます。1行の CSS（display: flex）で要素の並び方が変わるのが Flexbox の特徴です。

<ul class="hobby-list">
<li>読書</li>
<li>映画鑑賞</li>
<li>ランニング</li>
</ul>

1-2. 配置の調整

Section titled “1-2. 配置の調整”

justify-content で横方向の配置を指定します。

.hobby-list {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;
  justify-content: center;
}

center を指定すると中央寄せになります。

<ul class="hobby-list">
<li>読書</li>
<li>映画鑑賞</li>
<li>ランニング</li>
</ul>

他にもよく使う値があります。

flex-start: 左寄せ（初期値）。

center: 中央寄せ。

flex-end: 右寄せ。

space-between: 両端に寄せて、残りの間隔を均等に分配。

justify-content の値を center、flex-end、space-between に変えると、ブラウザーで表示の違いを確認できます。

align-items で縦方向の配置を指定します。高さの異なる要素を揃えるときに使います。

.profile {
  display: flex;
  align-items: center;
  gap: 16px;
}

align-items: center で、縦方向の中央に揃います。

1-3. 実例: プロフィール領域の横並び

Section titled “1-3. 実例: プロフィール領域の横並び”

自己紹介ページの先頭に画像と名前を横に並べてみます。index.html の <h1> まわりを <div class="profile"> で囲み、画像を追加します。

<div class="profile">
  <img src="profile.png" alt="プロフィール写真" class="avatar">
  <div>
    <h1>田中太郎</h1>
    <p class="subtitle">エンジニア / 東京都在住</p>
  </div>
</div>

style.css に .profile を追加します。

.profile {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}


.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

display: flex と align-items: center で、画像とテキストが横並び・縦方向中央揃えになります。

.avatar の width と height で画像のサイズを指定しています。画像は元のサイズのまま表示されるため、CSS でサイズを制御しないとレイアウトが崩れることがあります。border-radius は要素の角を丸くするプロパティで、50% にすると正円です。

<div class="profile">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+PHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSIjNzg5NWZmIi8+PC9zdmc+" alt="プロフィール写真" class="avatar">
<div>
  <h1>田中太郎</h1>
  <p class="subtitle">エンジニア / 東京都在住</p>
</div>
</div>

2. レイアウトパターン

Section titled “2. レイアウトパターン”

複数の要素をどう並べるかを扱うパターンです。コンテナー・2 カラム・カードグリッドはどれも、ほとんどのウェブサイトで使われています。

2-1. コンテナー

Section titled “2-1. コンテナー”

本文の幅が画面いっぱいに広がっていると行が長くなりすぎて読みにくくなります。幅を制限して中央に寄せるパターンを コンテナー と呼びます。

<div class="container">
  <h2>セクションタイトル</h2>
  <p>このコンテンツは幅 720px までに制限され、画面の中央に寄ります。画面が広いと左右に余白が生まれ、画面が狭いと両端まで広がります。</p>
</div>
.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

max-width: 720px でコンテンツの最大幅を 720px に制限します。width ではなく max-width を使うのは、画面が 720px より狭い場合に幅が画面に合わせて縮むようにするためです。

margin: 0 auto は上下の margin を 0、左右の margin を auto（自動）にする指定です。margin はボックスの外側の余白で、左右の margin を auto にすると、ブラウザーが余った空間を左右均等に割り振るため、ボックスが中央に配置されます。

padding: 0 24px は、画面が狭いときにテキストが左右の端に張り付かないようにするためです。

サイトのほぼすべての本文領域はこのパターンで作られています。

<div class="container">
<h2>セクションタイトル</h2>
<p>このコンテンツは幅 720px までに制限され、画面の中央に寄ります。画面が広いと左右に余白が生まれ、画面が狭いと両端まで広がります。</p>
</div>

2-2. 2カラムレイアウト

Section titled “2-2. 2カラムレイアウト”

メインコンテンツの横に補足情報を並べる 2カラムレイアウト は、記事ページや管理画面でよく使われます。

<div class="two-col">
  <main class="main-col">
    <h2>本文</h2>
    <p>メインのコンテンツがここに入ります。記事の本体や、メインの説明文です。</p>
  </main>
  <aside class="side-col">
    <h3>関連情報</h3>
    <p>目次や補足情報など、本文を補助する内容を置きます。</p>
  </aside>
</div>
.two-col {
  display: flex;
  gap: 32px;
}


.main-col {
  flex: 1;
}


.side-col {
  flex: 0 0 200px;
}

display: flex で 2 つの子要素を横並びにします。flex プロパティは flex-grow flex-shrink flex-basis の 3 つの値をまとめて指定するショートハンドです。

flex: 1: 1 1 0 の意味で、「余った空間を全部使って伸びる」。

flex: 0 0 200px: 「200px の固定幅で伸び縮みしない」。

組み合わせると「サイドは固定幅、メインは残りを埋める」というレイアウトになります。

<div class="two-col">
<main class="main-col">
  <h2>本文</h2>
  <p>メインのコンテンツがここに入ります。記事の本体や、メインの説明文です。</p>
</main>
<aside class="side-col">
  <h3>関連情報</h3>
  <p>目次や補足情報など、本文を補助する内容を置きます。</p>
</aside>
</div>

2-3. カードグリッド

Section titled “2-3. カードグリッド”

複数のカードを並べて表示するパターンです。画面幅に応じて自動で列数が変わります。

<div class="card-grid">
  <div class="card">
    <h3>項目1</h3>
    <p>説明文がここに入ります。</p>
  </div>
  <div class="card">
    <h3>項目2</h3>
    <p>説明文がここに入ります。</p>
  </div>
  <div class="card">
    <h3>項目3</h3>
    <p>説明文がここに入ります。</p>
  </div>
</div>
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}


.card-grid .card {
  flex: 1 1 200px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

flex-wrap: wrap を指定すると、子要素が画面幅に収まらないとき折り返します。flex: 1 1 200px は「最低 200px の幅を確保しつつ、余った空間に応じて伸びる」という指定で、画面幅に応じて列数が自動的に変わります。

画面サイズに合わせて見た目が変わる仕組みを レスポンシブデザイン と呼びます。カードグリッドはその基本パターンの一つです。

<div class="card-grid">
<div class="card">
  <h3>項目1</h3>
  <p>説明文がここに入ります。</p>
</div>
<div class="card">
  <h3>項目2</h3>
  <p>説明文がここに入ります。</p>
</div>
<div class="card">
  <h3>項目3</h3>
  <p>説明文がここに入ります。</p>
</div>
</div>

3. 完成形

Section titled “3. 完成形”

ここまで紹介した内容を反映した index.html と style.css です。

<main>
<div class="profile">
  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+PHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSIjNzg5NWZmIi8+PC9zdmc+" alt="プロフィール写真" class="avatar">
  <div>
    <h1>田中太郎</h1>
    <p class="subtitle">エンジニア / 東京都在住</p>
  </div>
</div>

<h2>自己紹介</h2>
<p>Web 開発に興味があります。最近は JavaScript を勉強中です。</p>

<h2>趣味</h2>
<ul class="hobby-list">
  <li>読書</li>
  <li>映画鑑賞</li>
  <li>ランニング</li>
</ul>

<h2>リンク</h2>
<ul>
  <li><a href="https://github.com">GitHub</a></li>
</ul>
</main>

<footer>
<p>&copy; 2025 田中太郎</p>
</footer>

main には 2-1 のコンテナーパターン、プロフィール領域と趣味リストには 1 章で扱った Flexbox を使っています。HTML の構造は最初のテンプレートからほとんど変わっていません（class の追加と画像の挿入だけ）。CSS だけでこれだけ見た目が変わるということが、HTML と CSS の役割分担の意味です。

4. 演習

Section titled “4. 演習”

(演習ファイル準備中)