デザインツール

CSSボックスモデル可視化 - インタラクティブな余白確認

width、height、padding、border、margin を調整し、live な box-model 図で確認できます。content-box と border-box の占有範囲を比較し、一致する CSS をそのままコピーできます。

クイック切替→Flexbox ジェネレーター

CSSBox modelVisual

クイック切替:Flexbox ジェネレーター CSS Grid ジェネレーター CSS 単位変換

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

デザインツールに戻るすべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

content-box と border-box の違いを比較する
padding と margin が占有幅にどう効くか確認する
CSS layout 基礎の説明用として使う

使い方

数値 control を調整する
可視化された layer と合計値を確認する
生成された CSS をコピーする

入出力サンプル

入力

width:200px padding:20px border:2px margin:24px

合計幅

292px（content-box）

FAQ

content-box と border-box の違いは何ですか？

content-box では width / height は content のみを含みます。border-box では content、padding、border を含んだ値になります。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

Flexbox ジェネレーター

Flexbox ジェネレーター - 1 次元レイアウトの視覚調整

利用可能

flex-direction、justify-content、align-items、wrap、gap をライブプレビュー付きで調整できます。box の追加・削除で折り返しや余白を確認し、生成された CSS と HTML scaffold をそのままプロジェクトへ持ち込めます。

Design CSS Layout

ツールを開く

CSS Grid ジェネレーター

CSS Grid ジェネレーター - 行、列、gap

利用可能

列数、行数、gap を設定し、基本的な display:grid レイアウトを生成できます。track 構造をプレビューし、簡易テンプレートを試しながら、管理画面レイアウトやカードグリッド向けの CSS / HTML をコピーできます。

CSS Grid Layout

ツールを開く

CSS 単位変換

CSS 単位変換 - px、rem、em、vw

利用可能

px、rem、em、pt、vw、vh、% の相互変換を行えます。root font size、親要素 font size、viewport size を設定し、レスポンシブ対応やデザインから実装への引き継ぎに活用できます。

CSS 単位変換

ツールを開く