ボックス属性に関してのシート|CSSプロパティ

CSSで制御する事のできるボックスエリア(範囲を持つ領域)に関する属性のリストです。ブロック要素やインライン要素のレイアウト制御等に使います。

CSS ボックス プロパティ

margin: ★;

個別プロパティ
  • margin-top: ★;(上)
  • margin-right: ★;(右)
  • margin-bottom: ★;(下)
  • margin-left: ★;(左)
数値指定(相対)
  • px(ディスプレイのドット)
  • em(1em = 100%)
  • %(1文字分)
  • ex(xの大きさ)
数値指定(絶対)
  • mm(1mm)
  • cm(10mm)
  • in(2.54cm)
  • pt(1in = win:72pt / mac:96pt)
  • pc(12pt)

上下左右要素に対してマージン(押し出し空白)を指定する属性。一括で記入する際は時計回りに上右下左の順で指定できる。

マージン属性同士がぶつかるとバグが発生。解決策としてはパディング属性と併用すること。IEとFirefoxでそれぞれ症状が異なる。

/* 四方が同じ値 */
margin: 10px;

/* 上 右 下 左(12時から始まる時計回り) */
margin: 10px 5px 10px 5px;

/* 上 左右 下 */
margin: 10px 5px 10px;

/* 上下 左右 */
margin: 10px 5px;

padding: ★;

個別プロパティ
  • padding-top: ★;(上)
  • padding-right: ★;(右)
  • padding-bottom: ★;(下)
  • padding-left: ★;(左)
数値指定(相対)
  • px(ディスプレイのドット)
  • em(1em = 100%)
  • %(1文字分)
  • ex(xの大きさ)
数値指定(絶対)
  • mm(1mm)
  • cm(10mm)
  • in(2.54cm)
  • pt(1in = win:72pt / mac:96pt)
  • pc(12pt)

要素の内部に対してパディング(押し込む空白)を指定するプロパティ。一括で記入する際は時計回りに上右下左の順で指定できる。ボーダー要素が指定されている場合、線よりも内側を押し込むためラインは外へと膨らむ。

また、ボックスに高さ・横幅を設定している場合パディング属性の分だけ大きくなる。

/* 四方が同じ値 */
padding: 10px;

/* 上 右 下 左(12時から始まる時計回り) */
padding: 10px 5px 10px 5px;

/* 上 左右 下 */
padding: 10px 5px 10px;

/* 上下 左右 */
padding: 10px 5px;

/* 100pxのボックスにpadding属性を20px指定した場合140pxになる。 */
height: 100px;
width: 100px;
padding: 20px;

float: ★;

  • none
  • left(左寄せ)
  • right(右寄せ)

イメージ要素や任意の要素の横に回りこみさせたい場合に指定する属性。

この属性を指定すると周りを囲んでいるボックスは囲む力を失う。回避するにはフロート属性の指定された要素の下にclear:bothを指定した要素を置く。もしくは周りのボックスにoverflow:hiddenを指定。またはclearfixと呼ばれるハックもある。

リストを横並びにする場合にもli要素にフロート属性を指定することで表現できる。

float: left;

<!-- overflowで回避 -->
#box{
	overflow: hidden;
}
#box_in{
	height: 100px;
	width: 100px;
	float: left;
}

<!-- clearで回避 floatの次の要素へ指定 -->
#box_in{
	height: 100px;
	width: 100px;
	float: left;
}
#box_in_under{
	clear: both;
}

clear: ★;

  • none
  • left(左寄せを解除)
  • right(右寄せを解除)
  • both(右寄せ・左寄せの両方を解除)

float属性で指定された回り込みを解除する属性。フロートをかけられた要素の次(下層ではない,弟)の要素に指定する事でそれ以降の要素は回り込みが解除される。

フロート属性を指定した要素の親要素は囲む力を失うが、この属性を指定する事で回避が可能。

h2{
	float: left;
}

p{
	clear: both;
}

height: ★;

  • auto
数値指定(相対)
  • px(ディスプレイのドット)
  • em(1em = 100%)
  • %(1文字分)
  • ex(xの大きさ)
数値指定(絶対)
  • mm(1mm)
  • cm(10mm)
  • in(2.54cm)
  • pt(1in = win:72pt / mac:96pt)
  • pc(12pt)

ブロック要素の高さを指定する属性。

height: 100px;

width: ★;

  • auto
数値指定(相対)
  • px(ディスプレイのドット)
  • em(1em = 100%)
  • %(1文字分)
  • ex(xの大きさ)
数値指定(絶対)
  • mm(1mm)
  • cm(10mm)
  • in(2.54cm)
  • pt(1in = win:72pt / mac:96pt)
  • pc(12pt)

ブロック要素の横幅を指定する属性。

width: 100px;

display: ★;

  • inline(インライン表示)
  • block(ブロック表示)
  • list-item(リスト表示)
  • run-in(自動 ※非推奨)
  • compact(自動 ※非推奨)
  • none(表示しない)

要素の表示形式を変更する属性。値にnoneを指定すると指定された要素そのものが消える。

タグリンク要素display: blockを指定する事でリンク領域を親要素のサイズまで拡大しボタンのように指定できる。

display: block;