Nagashima Laboratory

CSS ボックス（width/height/margin/padding/border）

幅・高さ width/height、余白 margin/padding、境界線 border、角丸 border-radius

ボックスのサイズの規定、余白、境界線などの設定に関するCSSプロパティです。

CSSボックスモデル

ブラウザはWebページを表示する際、標準的な CSS 基本ボックスモデルに基づいた長方形のボックスとして表現します。

各プロパティの役割は家に例えられます。

  • Content (width/height): 「家具（中身）」実際に表示したい文字や画像
  • Padding: 「部屋のゆとり」壁と家具の間のスペース
  • Border: 「壁」境界線
  • Margin: 「隣の家との距離（庭）」自分の家の外側にある、他の要素との隙間

ディスプレイタイプ

各要素のレイアウト（位置とサイズ）は、ディスプレイタイプで変わります。「箱」の種類とも言えます。

1. ブロック要素（Block）

  • <div>, <h1>〜<h6>, <p>, <ul>, <section> など
  • 常に新しい行から始まり、横いっぱいに広がる。
  • width, height, margin, padding がすべて自由に設定できる。
  • 「積み木」のように積み重なっていく。

2. インライン要素（Inline）

  • <span>, <a>, <strong>, <img> など
  • 文章の一部として扱われ、横に並ぶ。
  • width, height が指定できない。
  • margin の上下が効かない。
  • 「文章の中のマーカー」。文字の長さに合わせて伸び縮みする。

3. インラインブロック要素（Inline-block）

  • 「横に並ぶ」というインラインの長所と「サイズ指定ができる」というブロックの長所を合わせたハイブリッド
  • ボタンを作るときなどに使用。

【はじめる前に】

  • 色と背景の演習で使ったファイル（css_sample_02 一式）をそのまま使用します
  • css_sample_02 を作成していない場合は「色と背景」の資料を基に、先に作成しておきます。

▼index.htmlへの追記

・・・中略・・・
</section>
<section class="section-box">
    <h2>4. ボックスモデル (Box Model)</h2>
    <div class="box-sample">
        この箱の「内側」と「外側」の余白を調整します。
    </div>
</section>
</main>

▼style.cssへの追記

/* =================================================
   4. ボックスモデルの設定
   ================================================= */
.box-sample {
    width: 300px;         /* 幅 */
    height: auto;         /* 高さは中身に合わせる */
    background-color: #eeeeee;
    
    /* 余白の使い分け */
    padding: 20px;        /* 内側の余白：文字と枠の間 */
    border: 5px solid #007bff; /* 枠線 */
    margin: 40px auto;    /* 外側の余白：上下に40px、左右中央揃え */
}

width, height, margin, padding の数値を自由に変更してみてください。どの部分がmarginで、どの部分がpaddingなのか…など、どこに機能しているのかが分かりやすくなります

ディスプレイタイプ別の振る舞い

▼index.htmlへの追記（同じセクションに追加）

<div class="display-test">ブロック要素のテスト</div>
<span class="display-test">インライン要素のテスト</span>

▼style.cssへの追記

.display-test {
    background-color: #ffcccc; /* 薄い赤（色の範囲を分かりやすく） */
    border: 2px solid #ff0000;  /* 赤い枠線 */
    
    /* ボックスモデルの設定 */
    width: 200px;
    height: 100px;
    margin: 20px;
    padding: 20px;
}

同じクラスを適用していますが、ディスプレイタイプの違いにより挙動が異なります。下記の点を確認してください。

  • div（ブロック）: 幅200px、高さ100pxになり、周りに余白ができる。
  • span（インライン）: 幅も高さも無視される。 背景色はつくが、上下の余白（margin）が効かず、前後の行と重なる。

各プロパティの意味

幅・高さ

  • width：幅
  • height：高さ

widthやheightの指定には、px, %などの単位が使えます。

余白

  • margin：境界線（border）より外側の余白（背景色がつかないエリア）
    • margin-top : 上側の余白
    • margin-right：右側の余白
    • margin-bottom：下側の余白
    • margin-left：左側の余白
  • padding：境界線（border）より内側の余白（背景色がつくエリア）
    • padding-top : 上側の余白
    • padding-right：右側の余白
    • padding-bottom：下側の余白
    • padding-left：左側の余白

marginやpaddingの指定には、px, rem, %, auto などが使えます。
（rem…ルート<html>要素のフォントサイズ）

marginを使った中央揃え

作例にある、margin: 40px auto; という記述は、左右のmarginをautoにすることで中央揃えにするテクニックです。（上下のmarginは任意）

auto とは、ブラウザに対して「余っているスペースを左右均等に割り振る」と命令する設定です。左右の余白が同じになことで、要素が中央に配置されます。

marginによる中央揃えを成立させるには下記の条件を満たすことが必要です。

① width（幅）を指定する

幅が決まっていない（デフォルトの100%のまま）状態では、余っているスペースが存在しないため、中央に寄ることができません。

② display: block; であること

<span> や <a> などのインライン要素には margin の中央揃えは効かないため、display: block; を指定するか、もともとブロック要素である <div> や <section> を使います。

③ 左右の両方に auto を適用すること

一般的には margin: 0 auto;（上下は0、左右はauto）と書きます。

ショートハンド

margin-top, padding-bottomのように、方向を決めて指定する方法と、margin, paddingプロパティを用いて、まとめて指定する方法（ショートハンド）があります。

margin: 0 10px 0 10px;

と記述した場合、

margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;

の意味になります（上→右→下→左の順）。通常0のときは単位は入れずに書きます。

上と下、右と左が同じ値の場合は、更に省略可能です。次の例のように、値が2つしかない場合は、topとbottomが0、rightとleftが10pxを意味しています。

margin: 0 10px;

次の例のように、値が1つであれば、4方向とも10pxであることを表しています。

margin: 10px;

境界線

  • border 境界線。下記の例のように、太さ、色、線の種類の３点を指定します。
    border : 1px black solid;
    線の種類は次のようなものがあります。
    • solid 直線
    • dotted 点線
    • dashed 破線
    • double 二重線
  • border-radius 角丸。半径を指定します。
    半径 + 半径 = 幅 = 高さのときは「円」になります。

画像を円形にトリミングする

border-radiusを使えば、元の画像を加工せずに、円形にトリミングができます。

▼index.htmlへの追記（同じセクション内に追加）

<div class="circle">
  <img src="images/sample2.png" alt="画像">
</div>

正方形サイズの画像は、下記からダウンロードしてください

→ダウンロード

▼style.cssへの追記

.circle img {
  border-radius: 50%;
  width: 300px;
  height: auto;
}

ボックスサイズの計算

ボックス全体のサイズを計算するとき、デフォルトでは下記のようになります。

全体の幅 = 指定したwidth + 左右padding + 左右border

width: 300px; と書いても、padding: 20px; を加えた瞬間に、箱の見た目は 340px に膨らんでしまいます。

そのため、直感的にサイズ指定がしやすいように、padding / margin や border を内包したサイズを、width や height と計算できる方法が用意されています。

box-sizing: border-box;

mdnリファレンスのデモで確認してみてください。

ボックスモデルの演習

最後にボックスモデルを使ったコード修正を行います。

CSSを修正して <a>を指定サイズ（幅 200px 高さ 66px）に調整します。
下記のコードでは、width や height の設定が効かず、且つ、ボタンの上の余白が詰まってしまっているため、余白やサイズの設定が有効になるように修正してください。

▼index.htmlへの追記（同じセクション内に追加）

<div class="box-practice">
  <p>ボックスモデルのテスト</p>
  <a href="#" class="btn-error">詳細を見る</a>
  <p>※リンクはダミーです</p>
</div>

▼style.cssへの追記

.btn-error {
    background-color: #333;
    color: #fff;
    text-decoration: none;

    width: 200px;
    height: 66px;
    padding: 20px;
    margin-top: 30px;
}

どのCSSプロパティが有効になっているのかを確認するには、ブラウザの開発モードを使用します。

参考リンク

() Category: 資料 Tags: