【中編】整ったレイアウトを作ろう

こんにちは！よっしーです！

中編では、Webサイトの
「整ったレイアウト」を
作るための方法を解説していきます。

なぜ整える必要があるか
それは「見やすいサイト」を
作るためです

逆に、画面のサイズに影響されて
整っていないと綺麗なサイトでも

実際に、クライアントが
ホームページとして
使うことができません。

そうすると
仕事としてWeb制作を
行うのが難しくなります

逆にいうと
レイアウトを整えることで
Web制作を仕事にできるようになります

 
CSSの基本の一つである
「ボックスモデル」を理解すれば、
ページ全体の見た目がすっきり整います。

目次

1. 「ボックスモデル」を理解しよう
2. ボックスデザインのCSS実例
3. 整ったレイアウトにしよう

では
その「ボックスモデルについて」
見ていきましょう！

1. 「ボックスモデル」を理解しよう

(1) Webページは「箱の組み合わせ」でできている

HTMLのすべての要素は、
見えない“箱”＝ボックスとして
扱われています。

例えば、<div>、<p>、<h1> など、
すべての要素は四角い枠（ボックス）
として存在しています。

そのサイズや余白をCSSで
指定することで、ページ全体の見た目を
整えることができます。

(2) ボックスモデルの4つの構成要素

ボックスは以下の4つの要素から構成されます：

1. Content（コンテンツ）：実際の文字や画像のある部分
2. Padding（パディング）：コンテンツとボーダーの間の余白
3. Border（ボーダー）: パディングの外側にある枠線
4. Margin（マージン）：ボックスとボックスの外側の余白

これをイメージできると、レイアウトが
思い通りに操れるようになります！

2. ボックスデザインのCSS実例

ここでは、具体的にCSSを使って
「見やすいレイアウト」を
作る方法をご紹介します。

　

(1)  セクションを装飾して情報を区切ろう

.section {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 20px;
}

• background-color で背景色を淡く指定
• border で枠線を追加
• padding で内側に余白を作成

これにより、ページ全体が「章」や
「区切り」で整理されて、

ユーザーにとって理解しやすい
構造になります。

白背景だけだとすべてが
同じに見えるので、

セクションごとに色や余白で
差をつけるのが効果的です。

　

(2) marginとpaddingの使い分け

.box {
  margin-bottom: 30px;
  padding: 20px;
}

• margin は外側のスペース（他の要素との間隔）
• padding は内側のスペース（内容と枠線の間）

違いを理解すると、
「コンテンツ同士の距離感」が
自由自在に調整できるようになります。

注意事項として上下方向のmarginが
重なって縮む「マージンの相殺（collapse）」という
CSSの仕様もあるので注意しましょう。

　

(3)  コンテンツを中央に配置する

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

• width: 90%：画面幅の90%だけ使う（スマホにも対応しやすい）
• max-width：最大幅を指定（広すぎるのを防ぐ）
• margin: 0 auto：左右を自動で調整して中央揃えにする

これで、どんな画面でも
バランスの取れた中央寄せが
可能になります！

3. 整ったレイアウトにしよう

(1) レイアウトが整っていると何がいいの？

• 見た目がスッキリして安心感がある
• 情報が順序よく整理されていて理解しやすい
• プロっぽく見える（←ここ、重要！）

実は、「CSSで整えられたレイアウト」は、
文章の内容そのものを説得力のあるものに
見せる効果もあるんです。

(2) よくあるレイアウトの失敗例

• テキストが端っこにベタっと寄っている
• 要素同士の間隔がバラバラ
• 全体がなんとなく詰まっている印象

　

これらは「padding」や「margin」で
簡単に改善できます。

つまり、CSSを少し工夫するだけで、
全体の印象がガラッと変わるんです。

まとめ

今回は

• ボックスモデルを理解することでCSSの基礎が身につく
• marginとpaddingで余白を整えると読みやすくなる
• max-widthやautoで画面中央にバランスよく配置できる

3点について学習してきました。

この記事を読んで見た目を
整えることの重要性を理解して
くれたら嬉しいです！

次回の【後編】では、
スマホやタブレットでも
綺麗に見せる

「レスポンシブデザイン」
について解説します！

あなたの日々の学習
心より応援してます！

困ったことや相談したいことがあれば
公式ラインからお気軽に連絡
してきてください！

よっしー

公式LINEはこちらから【画像をタップ↓】