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

設定

プリセット
box-sizing
コンテンツ
パディング
ボーダー
マージン

ボックスモデル図

margin
border
padding
200 × 100 content
—
合計幅（px）
—
合計高さ（px）

生成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）が含まれています。ご支援いただくことでツールの無料提供を継続できます。