CSSボックスモデル・ビジュアライザー

使い方

1. ボックスモデルの値を入力: フィールドまたはインタラクティブなスライダーでマージン、ボーダー、パディング、コンテンツの寸法を定義します。
2. ビジュアライゼーションを探索: 入れ子になったボックスの古典的な図がリアルタイムで更新されます, マージン(オレンジ)、ボーダー(黄色)、パディング(緑)、コンテンツ(青)、すべて明確にラベル付けされています。
3. CSSをコピー: CSSをコピーをクリックして、設定された要素の完全なボックスモデルプロパティを取得します。

なぜCSSボックスモデルビジュアライザーを使うのか?

CSSボックスモデルはWebレイアウトの最も基本的な概念の1つです, そして特にbox-sizingの値、マージンの結合、ボーダーのサイジングを混合する場合、最も一般的なバグの源の1つです。このインタラクティブビジュアライザーはボックスモデルを具体的で目に見えるものにします: 値を調整すると、マージン、ボーダー、パディングがコンテンツの周りにどのようにスタックするかが即座に表示されます。CSSの学習、デバッグ、教育に不可欠です。

機能

• インタラクティブダイアグラム: 色分けされたレイヤー(マージン、ボーダー、パディング、コンテンツ)を持つ古典的な入れ子ボックスモデルビュー。
• box-sizing切り替え: content-boxとborder-boxを切り替えて、各モードが総寸法にどのように影響するかを確認します。
• 個別の側面: マージン、パディング、ボーダーの上/右/下/左の値を独立して定義します。
• 総サイズ計算: 要素の計算された総幅と総高さを表示します。
• CSS出力: 設定されたボックスモデル用のすぐに使えるCSSを生成します。

よくある質問

content-boxとborder-boxの違いは?

content-box(デフォルト)では、widthとheightはコンテンツエリアにのみ適用されます, パディングとボーダーは要素の総サイズに追加されます。border-boxでは、widthとheightにパディングとボーダーが含まれるため、サイズがより予測可能になります。ほとんどの最新のCSSリセットは、すべての要素にbox-sizing: border-boxを適用します。

マージンの結合とは?

2つの垂直マージンが触れ合う場合(隣接するブロック要素間、または親と最初/最後の子の間)、それらは2つの値の大きい方に等しい1つのマージンに結合します。これは、flexまたはgridの子、またはパディングやボーダーを持つ要素では発生しません。

インライン要素の下にある余分なスペースを取り除くには?

<img>などのインライン要素には、line-heightのベースラインアラインメントによって引き起こされる小さなスペースがその下にあります。要素にdisplay: blockを設定するか、vertical-align: bottom、または親にfont-size: 0を設定して修正します。

CSSボックスモデルが実際に定義するもの

CSSボックスモデルは、ウェブページ上のすべての要素の矩形表現です。各要素には4つの同心ボックスがあります: contentボックス (テキスト、画像、子要素が住む場所)、paddingボックス (コンテンツと境界線の間、可視境界の内側のスペース)、borderボックス (パディングの周りに描かれる可視のアウトライン)、marginボックス (境界線の外側の透明なスペースで、この要素を隣接要素から分離します)。要素の合計可視サイズは content + padding + border です; margin は不可視ですが他の要素を押しのけます。

重要な概念はbox-sizingです。デフォルト (box-sizing: content-box、CSS 1仕様の値) では、widthとheightプロパティはcontentボックスのみに適用されます。width: 200px; padding: 20px; border: 2px solidを設定すると、合計レンダリング幅は 200 + 40 + 4 = 244ピクセルです。これは直感に反します: 「200px幅」の要素が実際には244ピクセルの水平スペースを取ります。box-sizing: border-boxの代替 (CSS 3で追加) はこれを逆転させます: widthプロパティは padding と border を含む合計可視サイズで、content領域は収まるよう縮小します。border-boxはほとんどの開発者が期待するものです; 2012年のPaul Irishの * { box-sizing: border-box } CSSリセットを通じて事実上の標準になりました。

ボックスモデルを理解することは重要です、なぜならレイアウトバグはほぼ常にどの値がどのボックスに適用されるかについての混乱に起因するからです。「なぜ要素が設定したよりも広いのか?」は content-box のサプライズです。「なぜ私のmarginは兄弟を下に押し下げないのか?」は通常、margin の崩壊です。「なぜ padding-top: 50% が奇妙に振る舞うのか?」はパーセンテージのパディングが親の幅 (高さではなく) に対して計算されるからです。すべてのCSS開発者はこれらの混乱に遭遇します; このビジュアライザーは値を調整し結果のボックスジオメトリをリアルタイムで見ることでそれらを具体的にします。

このツールが内部でどのように動くか

インタラクティブな図は、各ボックス (marginはオレンジ、borderは黄色、paddingは緑、contentは青) に対応するネストされた色付きdivの連続です。入力値を変更すると、JavaScript は図のdivのインラインstyle属性を更新し、数値的および視覚的に値を反映します。プロポーションはプレビュー領域に収まるようスケールされます; 絶対ピクセル値は典型的な入力で図を画面外に押し出します。

合計サイズの計算は box-sizing モードに依存します。content-box の場合: 合計幅 = contentの幅 + padding-left + padding-right + border-left + border-right。border-box の場合: 合計幅 = width 値 (padding と border は content領域から引かれます)。ツールは box-sizing を切り替えると同時に両方のモードを計算するので、直接比較できます。

生成されたCSS出力は入力をプロパティ値として使用します: box-sizing: border-box; width: 200px; padding: 10px 20px; border: 2px solid; margin: 1rem auto;。これをスタイルシートに直接コピーして対応するクラスを適用してください。何もブラウザを離れません; すべては JavaScript でローカルに実行されます。分析なし、バックエンドなし、アカウントなし。リロードすると状態は消えます。

CSSボックスモデルの簡単な歴史

• CSS 1がcontent-boxを指定、1996年。CSS 1勧告 (1996年12月) はW3Cボックスモデルを定義します: width は content のみに適用され、padding と border は合計サイズに加わります。これは標準になりますが、Internet Explorer 4 と 5 は width が padding と border を含む代替モデル (今日の border-box に類似) を実装します。
• IE quirks mode とボックスモデル戦争、1997年から2001年。IE 4 (1997) と IE 5 は非標準のボックスモデルで出荷します; IE 6 (2001) は doctype 宣言によってトリガーされる「標準モード」を導入し、W3Cボックスモデルに切り替えます。この不一致は何年にもわたるクロスブラウザレイアウトバグと、すべてのウェブ開発者が2010年まで学ばなければならない「quirks モード対標準モード」の知識を作り出します。
• CSSリセットとEric Meyerの古典的スタイルシート、2007年。Eric Meyer は標準的なCSSリセット (2007年5月) を公開し、すべての要素にわたって margin、padding、その他のデフォルトをゼロに設定します。予測可能なクロスブラウザスタイリングの標準的な実践になります。リセットは box-sizing に直接対処しませんが、継承デフォルト周りの混乱を正規化します。
• CSS3 の box-sizing プロパティ、2009年から2014年。CSS3 は box-sizing: border-box を content-box への opt-in 代替として導入します。WebKit と Firefox は2009年からサポートします; IE 8 (2009) はネイティブにサポートする最初の IE バージョンになります。開発者が要素ごとに IE スタイルまたは W3C スタイルのボックスモデルを選べるようにします。
• Paul Irishのユニバーサルborder-box、2012年。Paul Irish (Google) はブログ投稿「* { box-sizing: border-box } FTW」(2012年2月) を公開し、ユニバーサル border-box が新しいプロジェクトのための合理的なデフォルトであると主張します。このパターンはフレームワークのデフォルト (Bootstrap、Tailwind、Material UI) を通じて急速に広まります。2015年までに、ほとんどのCSSリセットとフレームワークは border-box をデフォルトとして出荷します。
• 論理プロパティ、2018年から2024年。CSS Logical Properties and Values Module Level 1 (CR 2018年6月) は方向に依存しない代替を導入します: margin-inline-start (テキスト方向の開始) を margin-left の代わりに、padding-block (top + bottom) を padding-top + padding-bottom の代わりに。右から左の言語 (アラビア語、ヘブライ語) と現代の国際化に重要です。ブラウザサポートは2022年までに95%以上に達します。

実世界のワークフロー

• レイアウトバグのデバッグ。要素が予期しないサイズでレンダリングされる場合、ブラウザDevToolsの計算済みスタイルパネルを開くと4つのボックス値が数値で明らかになります。このビジュアライザーは事前に計算するのに役立ちます: 「width 200、padding 16、border 2 を設定したら、各 box-sizing モードでの合計サイズは何になるか?」特に、なぜ width: 100% と padding が content-box モードで親をオーバーフローするのかをジュニアに教えるときに役立ちます。
• 初心者にCSSを教える。ボックスモデルは、ウェブ開発の初心者が内在化しなければならない最初の抽象的な概念です。色分けされたインタラクティブな視覚化は仕様を読むよりも優れています。ブートキャンプの講師と独学の学習者は、margin、border、padding がどのように積み重なるかを見るための「触覚的」な方法としてボックスモデルビジュアライザーを使用します。このツールは部分的にこの目的のために存在します。
• デザインシステムコンポーネントのサイジング。デザインシステムはボタンの高さ、パディングのリズム、margin のスケールをトークン (例えば、spacing-1、spacing-2、spacing-3) で指定します。これらをコードに実装する際、ボックスモデルは最終レンダリングされたボタンが意図したサイズかどうかを決定します。Figma-to-React のハンドオフに出荷される前に、off-by-padding エラーをキャッチするために、最初に計算を視覚化してください。
• レスポンシブデザインとパーセントの margin。padding、margin、width、height のパーセント値は親のコンテンツ幅 (驚いたことに高さではなく) に対して計算され、モバイルで奇妙な動作を引き起こす可能性があります。ボックスモデルビジュアライザーは、CSSを書く前にパーセンテージが何を意味するかを考えるのに役立ちます。例えば、div の padding-top: 50% は正方形のアスペクト比コンテナを作成します (アスペクト比プロパティ以前の時代に画像プレースホルダーに使用されました)。
• アクセシビリティのヒットターゲットサイジング。WCAG 2.1 SC 2.5.5 (レベルAAA) は最小 44x44 CSSピクセルのタッチターゲットを推奨します。ボックスモデルはボタンの結合された content + padding がこのしきい値を満たすかどうかを決定します。ビジュアライザーを使用して、18pxのline-heightのテキスト周りの padding: 12px 16px が両方の次元で44pxを超えるボタンを与え、ガイドラインを満たすことを確認してください。
• CSS Grid と Flexbox の整列。現代のレイアウトツール (CSS Grid、Flexbox) は各 grid/flex アイテムをボックスモデルに従うボックスとして扱います。padding と margin が gap、justify-content、align-items とどのように相互作用するかを理解するには、ボックスモデルの流暢さが必要です。Margin の崩壊は flex/grid コンテナ内で抑制されており、これは伝統的なブロックレイアウトに慣れたCSS開発者をしばしば驚かせます。

よくある落とし穴とその意味

• Marginの崩壊のサプライズ。2つのブロック要素が垂直方向に接する margin を持つとき、合計ではなく2つのうち大きい方に崩壊します。20pxの下margin が 30pxの上margin と出会うと、50pxではなく30pxのスペースが生まれます。親と最初/最後の子の margin も親に padding、border、または overflow が設定されていない場合に崩壊します。flex または grid コンテナ内では、margin は崩壊しません。このルールはいつかすべてのCSS開発者を捕まえました。
• content-box vs border-box の幅の計算。content-box 要素に width: 100%; padding: 20px を設定すると、親より40px広くなります (オーバーフロー)。border-box では、同じ宣言は親の内側に正しく座ります。これは最も一般的なボックスモデルのgotchaです; ユニバーサル * { box-sizing: border-box } ルールはそのほとんどを先制的に修正します。常にどのモードで作業しているかを知ってください。
• パーセントのpadding/marginは幅に対して相対的。padding-top: 50% と margin-bottom: 50% は親のコンテンツ幅 (高さではなく) に基づいてパーセンテージを計算します。これは明らかでなく、古典的なアスペクト比コンテナハック (padding-top: 56.25% を持つ div が 16:9 ボックスを作成) の基礎です。今、CSSには aspect-ratio プロパティがありますが、レガシーコードと現代のTailwindの両方がパーセント-padding のトリックに依存しています。
• インライン要素のベースラインギャップ。コンテナdiv内の <img> の下に神秘的な4から6ピクセルのギャップがあります。これはインライン要素がテキストのベースラインに整列し、descender (下方に伸びる部分) のスペースを残すためです。img { display: block }、img { vertical-align: bottom }、または親に font-size: 0 を設定して修正してください。これはCSSで最も古いボックスモデルバグの1つで、1996年に遡ります。
• レイアウトのトリックのための負のmargin。Marginは負の値を受け入れ、要素を互いに引き寄せ、たまに役立ちます (例えば、親のパディングの「外側」にコンテナを展開する)。しかし、負の margin は混乱するオーバーラップバグの頻繁な原因です。意図的に使用し、コードにコメントし、可能な場合はCSS Grid/Flexbox の位置決めを優先してください。負のpaddingは無効なCSSであり、ブラウザによって無視されます。
• Padding + border + content > コンテナ。content + padding + border の合計が親の利用可能な幅を超えると、要素はオーバーフローします。一般的な修正: box-sizing: border-box、width 値の削減、親に overflow: hidden の使用 (オーバーフローをクリップ)、または flex の子に min-width: 0 を設定して暗黙の min-width: auto 動作を上書きします。多くの「モバイルでレイアウトが壊れる」バグは、ボックスモデルの計算によって引き起こされるオーバーフローです。

プライバシー: すべてはブラウザ内で動作する

CSS学習と視覚化ツールには2つの形があります: クライアントサイドJavaScriptを実行するシンプルなHTMLページ (プライベート、高速、セットアップなし) と保存されたプロジェクト付きのクラウドエディタ (協調的だがプライバシーのトレードオフあり)。このツールは最初の種類です。入力した値、box-sizing トグル状態、生成されたCSS: すべてブラウザセッションに留まります。ページをリロードすると、最初にCSSをコピーしない限り状態は消えます。

ボックスモデルの値が機密情報を含むことはまれなので、ここでのプライバシーの賭けは低いです。それでも、分析の欠如が重要です: 試行錯誤プロセスが記録されることなく自由に実験できます。学生や研修生がサードパーティプラットフォームでアカウントを登録することが摩擦点となる教室や企業研修の設定で特に役立ちます。これはバックエンドなしの単一の静的ページで、ロックダウンされたエンタープライズマシンを含む任意のブラウザで使用できます。

別のツールが正しい選択になるとき

• ライブデバッグ用のブラウザDevTools。Chrome と Firefox の DevTools には、ライブページ上で選択された任意の要素の4つのボックス値を表示するボックスモデルパネルが含まれています。値をインラインで編集してページが更新されるのを見てください。実際のページレイアウトをデバッグするには (抽象的なボックスモデルの探索ではなく)、DevTools は実際のCSSカスケードと継承を持つ実際のコードで動作するため、このツールに勝ります。
• デザイン仕様出力用のFigma。デザイナーはFigma、Sketch、またはAdobe XDを使用して、正確なピクセル測定でコンポーネントをレイアウトします。デザインツールの検査パネルは、開発者がCSSに翻訳する margin と padding 値をエクスポートします。デザインから開発へのハンドオフのために、デザインツールは真実のソースです; このビジュアライザーはCSSの動作を理解するためのものであり、本番コンポーネント仕様を生成するためのものではありません。
• コンポーネントのカプセル化のためのCSS-in-JS。styled-components、Emotion、vanilla-extract、または類似のCSS-in-JSソリューションでコンポーネントライブラリを構築する場合、ボックスモデルは各コンポーネント内にカプセル化されます。最外ラッパーの margin、内側の padding。このビジュアライザーは個々のコンポーネントのジオメトリについて推論するのに役立ちます; ライブラリはコンポーネント間のレイアウト調整を処理します。
• レイアウト用のCSS Grid/Flexboxツール。マルチ要素レイアウト (ページグリッド、カードギャラリー、ナビゲーションバー) には、ボックスモデルだけでなく、CSS Grid と Flexbox が正しい抽象化です。私たちの Flexbox Generator と CSS Grid Generator ツールは、それらのレイアウトを直接支援します。ボックスモデルは必要ですが、現代のレイアウトには十分ではありません; 適切なスケールには適切なツールを使用してください。

その他のよくある質問

ユニバーサル * { box-sizing: border-box } を使うべきですか?

ほとんどのプロジェクトでは、はい。Paul Irishの2012年の提案は今や業界のデフォルトであり、ほとんどの開発者が width と height がどのように機能するかを期待する方法と一致します。Bootstrap、Tailwind、Bulma、Material UI などのフレームワークはデフォルトで border-box を出荷します。2026年に始まる現代のプロジェクトは、リセットの最上部に *, *::before, *::after { box-sizing: border-box; } を設定し、box-sizing について再び考える必要はめったにありません。border-box が物事を台無しにする個々の要素に対しては、content-box への特定のオーバーライドが可能です。

なぜ私のmarginは兄弟を押すのではなく親を下に押すのですか?

これは margin の崩壊です。子の上 margin が padding/border なしで親の上端に出会うとき、子の margin は「脱出」し代わりに親に適用されます。修正: 親に padding-top: 1px を追加 (任意の値が機能)、border: 1px solid transparent を追加、親を flex または grid コンテナに設定 (これらのモードでは崩壊が抑制される)、または親に display: flow-root を使用 (新しいブロックフォーマッティングコンテキストを確立する明示的な現代のルール)。これらすべてが margin が崩壊するのを防ぎます。

margin: auto と margin: 0 の違いは何ですか?

margin: 0 は margin なしを意味します; 要素は隣接要素に対して平らに座ります。margin: auto はブラウザが残りの水平スペースを分配するために margin を計算することを意味し、典型的にブロック要素を中央に配置するために使用されます: margin-left: auto; margin-right: auto; は残りのスペースを均等に分割します。margin: auto auto auto auto (または shorthand margin: auto) は flex コンテナ内で水平方向と垂直方向の両方で中央に配置します。flex/grid の外では、水平の auto margin のみが機能します。

outline は border とどう違いますか?

Outline は要素の周りに描画されますが、ボックスモデルの外側にあります: 要素のサイズに加算されず、隣接要素を押し離しません。Border はボックスモデルの一部であり、レンダリングされたサイズに加算されます。Outline は典型的にフォーカスリング (:focus-visible outline) に使用され、レイアウトをシフトさせずに目に見えるインジケータが必要なときに使用されます。Border は線が要素の構造の一部であるべきときに使用されます。代替のフォーカスインジケータを提供せずに outline: none を削除しないでください; そうするとキーボードアクセシビリティが壊れます。

なぜ margin-inline-start のような論理プロパティを使うのですか?

論理プロパティ (margin-block-start、padding-inline など) はドキュメントの書字方向に適応します。英語 (左から右) では、margin-inline-start は margin-left と同じです。アラビア語またはヘブライ語 (右から左) では、自動的に margin-right になります。複数の言語をサポートするサイトでは、論理プロパティはCSSの国際化を自動化します。英語のみのサイトでは、効果的には同等ですが、より明確に意図を伝えます: 「この margin は左側にある」ではなく「この margin はテキストフローの始まりにある」。

固定アスペクト比のボックスを作成するにはどうしますか?

現代の方法は aspect-ratio CSSプロパティです: div の aspect-ratio: 16/9 はその高さを自動的に幅の 9/16 にします。すべての現代のブラウザでサポートされています (2021+)。レガシーテクニックは padding-top をパーセンテージとして使用します: padding-top: 56.25% の div は 16:9 の比率を作成します (9/16 = 56.25%)。padding-top のトリックは引き続き機能しますが、プロパティ構文の方がクリーンです。新しいコードには aspect-ratio を使用してください; レガシーハックは広いブラウザサポートを必要とするTailwindやその他のツールに残ります。