マージン・ボーダー・パディング・コンテンツのサイズをリアルタイムで調整。Chrome DevToolsと同じ色分けで図が即座に更新され、コピー可能なCSSも自動生成されます。

設定

<!-- Presets -->
<div>
  <div class="bm-section-header">
    <span class="bm-section-label" style="background:#e8eaff;color:#3a3a6e;">プリセット</span>
  </div>
  <div class="bm-presets">
    <button class="bm-preset-btn active" onclick="bmApplyPreset('card',this)">カード</button>
    <button class="bm-preset-btn" onclick="bmApplyPreset('button',this)">ボタン</button>
    <button class="bm-preset-btn" onclick="bmApplyPreset('input',this)">入力欄</button>
    <button class="bm-preset-btn" onclick="bmApplyPreset('container',this)">コンテナ</button>
    <button class="bm-preset-btn" onclick="bmApplyPreset('reset',this)">リセット</button>
  </div>
</div>

<!-- Box-sizing -->
<div>
  <div class="bm-section-header">
    <span class="bm-section-label" style="background:#e8eaff;color:#3a3a6e;">box-sizing</span>
  </div>
  <div class="bm-sizing-toggle">
    <label><input type="radio" name="bm-sizing" value="content-box" onchange="bmUpdate()"> content-box</label>
    <label><input type="radio" name="bm-sizing" value="border-box" onchange="bmUpdate()" checked> border-box</label>
  </div>
</div>

<!-- Content -->
<div>
  <div class="bm-section-header">
    <span class="bm-section-label bm-label-content">コンテンツ</span>
  </div>
  <div class="bm-four-grid">
    <label>幅 (width)<input type="number" id="bm-cw" value="200" min="20" max="800" oninput="bmUpdate()"></label>
    <label>高さ (height)<input type="number" id="bm-ch" value="100" min="20" max="800" oninput="bmUpdate()"></label>
  </div>
</div>

<!-- Padding -->
<div>
  <div class="bm-section-header">
    <span class="bm-section-label bm-label-padding">パディング</span>
    <label class="bm-link-toggle"><input type="checkbox" id="bm-link-padding" checked onchange="bmLinkChanged('padding')"> 全辺連動</label>
  </div>
  <div class="bm-four-grid">
    <label>上<input type="number" id="bm-pt" value="16" min="0" max="200" oninput="bmSideInput('padding','t')"></label>
    <label>右<input type="number" id="bm-pr" value="16" min="0" max="200" oninput="bmSideInput('padding','r')"></label>
    <label>下<input type="number" id="bm-pb" value="16" min="0" max="200" oninput="bmSideInput('padding','b')"></label>
    <label>左<input type="number" id="bm-pl" value="16" min="0" max="200" oninput="bmSideInput('padding','l')"></label>
  </div>
</div>

<!-- Border -->
<div>
  <div class="bm-section-header">
    <span class="bm-section-label bm-label-border">ボーダー</span>
    <label class="bm-link-toggle"><input type="checkbox" id="bm-link-border" checked onchange="bmLinkChanged('border')"> 全辺連動</label>
  </div>
  <div class="bm-four-grid">
    <label>上<input type="number" id="bm-bt" value="1" min="0" max="50" oninput="bmSideInput('border','t')"></label>
    <label>右<input type="number" id="bm-br" value="1" min="0" max="50" oninput="bmSideInput('border','r')"></label>
    <label>下<input type="number" id="bm-bb" value="1" min="0" max="50" oninput="bmSideInput('border','b')"></label>
    <label>左<input type="number" id="bm-bl" value="1" min="0" max="50" oninput="bmSideInput('border','l')"></label>
  </div>
  <div class="bm-border-style-row">
    <label>ボーダースタイル</label>
    <select id="bm-bstyle" onchange="bmUpdate()">
      <option value="solid" selected>solid</option>
      <option value="dashed">dashed</option>
      <option value="dotted">dotted</option>
      <option value="double">double</option>
      <option value="groove">groove</option>
      <option value="none">none</option>
    </select>
  </div>
</div>

<!-- Margin -->
<div>
  <div class="bm-section-header">
    <span class="bm-section-label bm-label-margin">マージン</span>
    <label class="bm-link-toggle"><input type="checkbox" id="bm-link-margin" checked onchange="bmLinkChanged('margin')"> 全辺連動</label>
  </div>
  <div class="bm-four-grid">
    <label>上<input type="number" id="bm-mt" value="16" min="0" max="200" oninput="bmSideInput('margin','t')"></label>
    <label>右<input type="number" id="bm-mr" value="16" min="0" max="200" oninput="bmSideInput('margin','r')"></label>
    <label>下<input type="number" id="bm-mb" value="16" min="0" max="200" oninput="bmSideInput('margin','b')"></label>
    <label>左<input type="number" id="bm-ml" value="16" min="0" max="200" oninput="bmSideInput('margin','l')"></label>
  </div>
</div>

ボックスモデル図

margin
border
padding
200 × 100 content
<!-- Computed size -->
<div class="bm-totals">
  <div class="bm-total-box">
    <div class="bm-total-val" id="bm-total-w">—</div>
    <div class="bm-total-lbl">合計幅（px）</div>
  </div>
  <div class="bm-total-box">
    <div class="bm-total-val" id="bm-total-h">—</div>
    <div class="bm-total-lbl">合計高さ（px）</div>
  </div>
</div>

生成CSS

フリーランス・個人事業主の会計をかんたんに

freee会計なら請求書・経費・確定申告をまるごとクラウド管理。面倒な帳簿付けから解放されます。

freeeを無料で試す

使い方

  1. プリセットを選ぶ — カード・ボタン・入力欄・コンテナから典型的な値を一発ロード。
  2. 各値を調整 — マージン・ボーダー・パディング・コンテンツの上下左右を個別に設定。「全辺連動」チェックで4辺を一括変更。
  3. box-sizingを切り替え — content-box と border-box で合計サイズがどう変わるか確認。
  4. 図を読む — 色分けはChrome DevToolsと同じ：オレンジ=マージン、黄=ボーダー、緑=パディング、青=コンテンツ。
  5. CSSをコピー — 「CSSをコピー」を押してスタイルシートに貼り付けるだけ。

CSSボックスモデルとは

すべてのHTML要素は4層の矩形で構成されています。

層色説明
コンテンツ青テキストや子要素が配置される領域。width / height で指定。
パディング緑コンテンツとボーダーの間の余白。背景色がここまで適用される。
ボーダー黄要素の境界線。太さ・スタイル・色を指定できる。
マージンオレンジボーダー外側の余白。要素間の間隔を作る。背景色は適用されない。

content-box と border-box の違い

content-box（CSS デフォルト）では width はコンテンツ領域のみ。パディングとボーダーはその外側に加算されます。

border-box では width にパディングとボーダーが含まれます。レイアウト計算が直感的になるため、現代のプロジェクトではほぼ必須です。

/* グローバル推奨設定 */
*, *::before, *::after {
  box-sizing: border-box;
}

マージン ショートハンド早見表

記法意味
margin: 16px4辺すべて 16px
margin: 8px 16px上下 8px、左右 16px
margin: 8px 16px 24px上 8px、左右 16px、下 24px
margin: 8px 12px 16px 20px上 / 右 / 下 / 左

関連ツール

※本ページにはアフィリエイト広告（A8.net）が含まれています。ご支援いただくことでツールの無料提供を継続できます。