ボックスの概念

Pocket

CSSによるデザインの基本は「ボックス」。
Webページでは、HTMLタグで囲んだ部分が1つの「ボックス」として扱われる。
CSSではこの「ボックス」に対してスタイルを指定する。

ボックスは次の4つの領域から構成される。


<内容>
要素に含まれる内容/width(幅)とheight(高さ)で表示領域を指定

<padding : パディング>
内容とボーダーとの間のスペース

<border : ボーダー>
パディングの周囲にある枠線(ボックスの背景はborderの領域まで)

<margin : マージン>
要素のボーダーと他の要素の間の余白
(背景は常に透明のため、親要素の背景に依存)

★ボックスのサイズ
ボックスとして実際にブラウザに表示される領域は、『width+padding+border』を合計したサイズ

例)480px + 50px*2 + 10px*2 = 600px(ボックスの表示領域)
★CSSの記述

#contents{
width:600px;
background-color:#ccc;
padding:50px;
border:solid #f0010px;
margin:30px;
}

★HTMLの記述

<div id="contents">
<h1>ボックス</h1>
<h2>ボックスの基本</h2>
<p>CSSによるデザインの基本は、「ボックス」です。
Webページでは、HTMLタグで囲んだ部分が1つの「ボックス」として扱われます。
CSSではこの「ボックス」に対してスタイルを指定することになります。</p>
<p>ボックスは次の4つの部分から構成されています。</p>
<ul>
<li>内容 (width/height:幅と高さ)</li>
<li>パディング padding(内容と枠線の間の余白)</li>
<li>ボーダー border(枠線)</li>
<li>マージン margin(枠線の外側の余白)</li>
</ul>
<h2>ボックスのサイズ</h2>
<p>ボックスとして実際にブラウザに表示される領域は、
『width+padding+border』を合計したサイズになります。</p>
</div>


★表示例はこちら
ボックスの概念

Pocket

This entry was posted in CSS, web.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>