ボックス
ホームページ上でコンテンツをまとめる時は、基本的にボックス単位で考えます。
ボックスとはその名の通り「箱」です。左図の様に、テーブル全体も箱、テーブル内の各セルも箱、画像のような空要素も箱、そもそもページ全体が箱と考えられます。
箱ですので、その中にまた箱を入れることが可能です。これが、タグの要素内にまたタグを書く(例：bodyタグ内にtableタグを書く)ということと思って頂ければよいかと。
そのボックスを飾ったり、自分の思い通りに見せるために必要なことを以下で説明していきます。
widthとheight[幅と高さ]
ボックスには幅と高さがあります。 CSSでは幅のことをwidth、高さのことをheightと記述します。
| 指定可能値 | 数値＋下記単位, 数値＋%, auto | |
|---|---|---|
| 対応単位 | em, ex, px, cm, mm, in, pt, pc | [補足]単位説明 |
[例1]幅200ピクセル、高さ100ピクセル
width:200px; height:100px;
[例2]親要素の半分の幅
width:50%;
余白
ボックスでは、ボックスの上下左右に余白を取ることが出来ます。
余白はボックス枠外ボックス枠内の2箇所に指定できます。
CSSでは枠外余白をmargin、枠内余白をpaddingと記述します。
その違いは下図を参照下さい。
margin[外余白]
ボックスでは、ボックス枠外の上下左右に余白を取ることが出来ます。 CSSではボックス枠外余白のことをmarginと記します。
| 指定可能値 | 数値＋下記単位, 数値＋%, auto | |
|---|---|---|
| 対応単位 | em, ex, px, cm, mm, in, pt, pc | [補足]単位説明 |
| 記述方法 | ||
|---|---|---|
| CSS記述 | 意味 | |
| margin:5px; | 上下左右に5pxずつ余白 | |
| margin:1px 3px; | 上下に1px、左右に3px余白 | |
| margin:1px 2px 3px; | 上に1px、左右に2px、下に3px余白 | |
| margin:1px 2px 3px 4px; | 上に1px、右に2px、下に3px、左に4px余白 | |
| margin-top:1px; | 上に1px余白 | |
| margin-bottom:1px; | 下に1px余白 | |
| margin-left:1px; | 左に1px余白 | |
| margin-right:1px; | 右に1px余白 | |
上の記述方法の数値やpx部分を書き換えれば、自在に余白が取れます。
[例1]上に5px,右に10px、下に3px、左に20px余白を取る
margin:5px 10px 3px 20px;
[例2]上下左右に親要素の5パーセントの余白を取る
margin:5%;
padding[内余白]
ボックスでは、ボックス枠内の上下左右に余白を取ることが出来ます。 CSSではボックス枠内余白のことをpaddingと記します。
| 指定可能値 | 数値＋下記単位, 数値＋%, auto | |
|---|---|---|
| 対応単位 | em, ex, px, cm, mm, in, pt, pc | [補足]単位説明 |
| 記述方法 | ||
|---|---|---|
| CSS記述 | 意味 | |
| padding:5px; | 上下左右に5pxずつ余白 | |
| padding:1px 3px; | 上下に1px、左右に3px余白 | |
| padding:1px 2px 3px; | 上に1px、左右に2px、下に3px余白 | |
| padding:1px 2px 3px 4px; | 上に1px、右に2px、下に3px、左に4px余白 | |
| padding-top:1px; | 上に1px余白 | |
| padding-bottom:1px; | 下に1px余白 | |
| padding-left:1px; | 左に1px余白 | |
| padding-right:1px; | 右に1px余白 | |
上の記述方法の数値やpx部分を書き換えれば、自在に余白が取れます。
[例1]上に5px,右に10px、下に3px、左に20px余白を取る
padding:5px 10px 3px 20px;
[例2]上下左右に親要素の5パーセントの余白を取る
padding:5%;