Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

ボックスモデルについてBOX MODEL

ボックスモデルの概念

ボックスモデルとは、ブロックレベル要素が生成する矩形領域(ボックス)の基本概念を表したもので、margin, border, padding, コンテンツ領域の4つの要素によって構成される矩形領域です。ボックスのサイズやデザインはCSSで指定することができます。

ボックスのサイズ

ボックスの大きさ(サイズ)はスタイルシートのwidth(幅)およびheight(高さ)プロパティによって指定できます。CSS2.1におけるボックス領域はコンテンツ領域となっていますが、CSS3で追加されたbox-sizingプロパティでborder-boxを指定することにより、ボーダーを含めた領域をボックス領域として定義することが可能です。

ボックスのデザイン

ボックスモデルはmargin, border, paddingおよびコンテンツエリアの4つの領域から構成されています。それぞれの領域はCSSプロパティを使用して自由にデザインを決めることができます。

  • ボーダー:ブロックレベル要素の外周を取り囲む境界線で、いわゆる枠線として扱われます。
  • マージン:ボーダー外側の余白で、ブロックレベル要素間の間隔を調整することができます。
  • パディング:ボーダー内側の余白で、枠線とコンテンツとの余白を調整することができます。
  • バックグラウンド:コンテンツエリアの背景デザインを指定することができます。
Box model content-box

BOX MODEL関連プロパティ

DIMENSIONS寸法TOPCSSPropertiesDimensions

  1. heightボックス領域の高さ
  2. min-heightボックス領域の最小高さ
  3. max-heightボックス領域の最大高さ
  4. widthボックス領域の幅
  5. min-widthボックス領域の最小幅
  6. max-widthボックス領域の最大幅

BORDERボーダーTOPCSSPropertiesBorder

  1. border-colorボーダー(枠線)の色
  2. border-styleボーダー(枠線)の種類
  3. border-widthボーダー(枠線)の幅
  4. borderボーダーのショートハンドプロパティ

MARGINマージンTOPCSSPropertiesMargin

  1. marginマージン

PADDINGパディングTOPCSSPropertiesPadding

  1. paddingパディング

BACKGROUNDバックグランド(背景)TOPCSSPropertiesbackground

  1. background-colorバックグラウンド(背景)の色
  2. background-image背景に使用する画像
  3. background-repeat背景画像の繰り返し
  4. background-attachment背景画像の表示方法
  5. background-position背景画像の表示位置
  6. background背景のショートハンドプロパティ
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.