このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

CSSのボックスモデル

記事Oct. 12th,2018
要素のレイアウトを定義するCSSのボックスモデルについて
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

“ボックスモデル”とは?

CSSでは要素は以下の4つの領域から構成される長方形の“ボックス(box)”として描画され、この構成は“ボックスモデル(box model)”として定義されています。

コンテンツ(content)
要素の子要素などのコンテンツが描画される領域
パディング(padding)
要素の境界線の内側の余白
ボーダー(border)
要素の境界線
マージン(margin)
要素の境界線の外側の余白

要素にwidth”プロパティheight”プロパティを適用してその寸法を指定するとき、既定では指定した寸法はコンテンツの領域の大きさとして計算されます。

既定の要素の寸法

仕様書

要素の寸法を指定するプロパティ

コンテンツ

プロパティ 説明
width: コンテンツの水平方向の寸法
min-width: コンテンツの水平方向の寸法の最小値
max-width: コンテンツの水平方向の寸法の最大値
height: コンテンツの垂直方向の寸法
min-height: コンテンツの垂直方向の寸法の最小値
max-height: コンテンツの垂直方向の寸法の最大値

パディング

プロパティ 説明
padding: すべてのパディングの幅
padding-top: 上のパディングの幅
padding-right: 右のパディングの幅
padding-bottom: 下のパディングの幅
padding-left: 左のパディングの幅

ボーダー

プロパティ 説明
border-width: すべてのボーダーの幅
border-top-width: 上のボーダーの幅
border-right-width: 右のボーダーの幅
border-bottom-width: 下のボーダーの幅
border-left-width: 左のボーダーの幅

以下のプロパティはボーダーの幅とともに見た目や色もまとめて指定することができます。

プロパティ 説明
border: すべてのボーダー
border-top: 上のボーダー
border-right: 右のボーダー
border-bottom: 下のボーダー
border-left: 左のボーダー

マージン

プロパティ 説明
margin: すべてのマージンの幅
margin-top: 上のマージンの幅
margin-right: 右のマージンの幅
margin-bottom: 下のマージンの幅
margin-left: 左のマージンの幅
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク