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

すべての HTML 要素は矩形のボックスとしてレンダリングされます。CSS ボックスモデルは、要素のコンテンツ、パディング、ボーダー、マージンの各レイヤーがどのように重なり合って要素の総占有面積を決定するかを定義します。レイアウトとスペーシングを制御するための基礎知識です。

マージン、ボーダー、パディング、コンテンツ寸法の数値入力を調整してください。レイヤーセクションをクリックするとダイアグラムでハイライトされます。視覚プレビューは即座に更新され、下部に対応する CSS コードが生成されてコピーできます。

マージン（Margin）はボーダーの外側にある透明なスペースで、要素と隣接要素の間隔を決めます。ボーダー（Border）はパディングを囲む目に見える境界線です。パディング（Padding）はボーダーと実際のコンテンツの間のスペースです。コンテンツ（Content）は最も内側の領域で、テキストや子要素が表示されます。

content-box（デフォルト）では、設定した width と height はコンテンツ領域のみに適用され、パディングとボーダーはその外側に追加されます。border-box では、width と height にパディングとボーダーが含まれるため、レイアウト計算がより直感的になります。最近のプロジェクトでは border-box をグローバルに使用することが一般的です。

このビジュアライザーを使ってさまざまな値を試し、各レイヤーが要素の合計サイズにどう影響するかを確認しましょう。要素が予想より大きなスペースを占める場合、パディングやボーダーが意図した幅を超えていないか確認してください。生成された CSS はそのままプロジェクトに貼り付けて使用できます。