CSSのレイアウト：div要素とボックスモデル

HTMLの全体構造に続いて、「レイアウト」を学びました。Webページの構造を整理し、見やすく配置するための技術です。

レイアウトの基本：<div>要素

レイアウトは、<div> 要素で構成します。

<div> 要素は、要素をグループ化するために使うタグです。

<div>
  <h1>見出し</h1>
  <p>本文テキスト</p>
</div>

<div> 自体には特別な意味はありませんが、CSSでスタイルを適用するための「箱」として使います。

Webページの基本構成

Webページは、一般的に3つのエリアに分けられます。

ヘッダー：ページ上部

<div class="header">
  <h1>サイトタイトル</h1>
  <nav>ナビゲーション</nav>
</div>

ロゴやナビゲーションメニューを配置します。

メイン：ページの主なコンテンツ

<div class="main">
  <h2>記事タイトル</h2>
  <p>記事の本文...</p>
</div>

ページの中心となる内容を配置します。

フッター：ページの下部

<div class="footer">
  <p>&copy; 2026 My Website</p>
</div>

著作権表示やリンク集などを配置します。

完全な構成例

<body>
  <div class="header">
    <h1>私のサイト</h1>
  </div>
  
  <div class="main">
    <h2>記事タイトル</h2>
    <p>本文...</p>
  </div>
  
  <div class="footer">
    <p>&copy; 2026 My Website</p>
  </div>
</body>

ブロック要素とインライン要素

HTMLの要素には、2つのタイプがあります。

ブロック要素

ブロック要素は：

  • 前後で改行が入る要素
  • 親要素の幅いっぱいに広がる
<h1>見出し</h1>
<p>段落</p>
<div>div要素</div>

これらは縦に並びます。

インライン要素

インライン要素は：

  • 前後で改行が入らない要素
  • 内容の幅だけを占める
<a href="#">リンク</a>
<span>span要素</span>
<img src="photo.jpg">

これらは横に並びます。

主なブロック要素とインライン要素

ブロック要素インライン要素
<div><span>
<h1> 〜 <h6><a>
<p><img>
<ul>, <ol>, <li><strong>, <em>

ボックスモデル：余白と枠線

CSSでは、すべての要素が「箱（ボックス）」として扱われます。この箱には、以下の3つの要素があります。

padding：borderの内側に余白を作る

.box {
  padding: 20px;
}

コンテンツとボーダーの間に余白ができます。

margin：borderの外側に余白を作る

.box {
  margin: 30px;
}

要素の外側に余白ができます。

border：枠線

.box {
  border: 2px solid black;
}

要素の周りに枠線が引かれます。

ボックスモデルの構造

+---------------------------+
|        margin             |  ← 外側の余白
|  +---------------------+  |
|  |     border          |  |  ← 枠線
|  |  +---------------+  |  |
|  |  |   padding     |  |  |  ← 内側の余白
|  |  |  +---------+  |  |  |
|  |  |  | content |  |  |  |  ← 内容
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

border, padding, margin を合わせて「ボックスモデル」と呼びます。

実用例：カードデザイン

<div class="card">
  <h3>カードタイトル</h3>
  <p>カードの説明文です。</p>
</div>

.card {
  width: 300px;
  padding: 20px;          /* 内側の余白 */
  margin: 10px;           /* 外側の余白 */
  border: 1px solid #ddd; /* 枠線 */
  background-color: #f9f9f9;
}

余白の細かい指定

padding/marginの4方向指定

/* 上下左右すべて同じ */
padding: 20px;

/* 上下・左右 */
padding: 20px 40px;

/* 上・左右・下 */
padding: 10px 20px 30px;

/* 上・右・下・左（時計回り） */
padding: 10px 20px 30px 40px;

個別指定

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

margin-top: 30px;
margin-bottom: 30px;

今日の学びのポイント

  • レイアウト: <div> 要素で構成
  • <div>: 要素をグループ化する
  • ヘッダー: ページ上部
  • メイン: ページの主なコンテンツ
  • フッター: ページの下部
  • ブロック要素: 前後で改行、幅いっぱいに広がる
  • インライン要素: 改行なし、内容の幅だけ
  • ボックスモデル: border, padding, margin
    • padding: borderの内側の余白
    • margin: borderの外側の余白
    • border: 枠線

ボックスモデルを理解することで、要素の配置と余白を自由にコントロールできるようになります。

コメント