ホームページ作成・基礎講座・HTML・CSS・javascript・SEO対策

超初心者でも簡単にできるホームページ作成,HTML基礎講座 EasyStudyHTML

ホームページ作成 HTML基礎講座 スタイルシート(CSS)のBOXの概念

ホームページ作成・HTML基礎・スタイルシート(CSS)・javascript・SEO対策



スタイルシートにおけるBOXの概念 clear.gif
【解説】
スタイルシートにおけるBOXの概念(各要素の領域)

スタイルシートの各要素は四角い領域(BOX)を生成します。
基本的に対象要素のテキスト及びイメージといった表示される内容が収まっている「内容領域」と、それを囲む領域(枠線・ボーダー)から構成されています。
さらに、枠線はその外側と内側にそれぞれ余白を設定出来ます。
外側の余白は「マージン」で内側を「パディング」といいます。
下記の図を参照して下さい。

ボックス構造.gif

内側領域
要素のテキストやイメージといった内容が表示される領域です。
要素に対して背景色・背景イメージを指定すると領域の背景として表示されます。

パディング
内容領域と枠線(ボーダー)の間にある余白領域がパディングです。
尚、要素に指定された背景はこの領域にも適用されます。

枠線(ボーダー)
パディングの外側に表示される領域。
要素に指定された背景に対して通常は上書きされて表示されます。

マージン
枠線の外側に設定される余白領域がマージンです。
要素に指定された背景はこの領域には適用されませんがマージンは常に透明色なのでマージンを設定する事によってその部分に親要素の背景が透けて表示される形になります。


ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora