ボックス

4-1 サイズ・背景色・余白

ボックスの概念


内容を表示する領域、マージン、パディング、背景、枠線で構成されます。 パディングとマージンは透明な領域です。 枠線や背景をを指定しないときはそのちがいはわかりにくいことがあります。

マージン・パディング共に天地左右に数値を設定するだけで簡単に余白を設定することができます。
マージンはtableやtr、tdの外側に付けられる余白で、画像とテキストの間に余白をもうけたい時などに便利。
パディングはtableやtr、tdの内側に付けられる余白で、表組みなどを作るときに罫線とテキストの間に余白をもうける時に便利です。
サンプル ソースコード
サンプルページが別ウィンドウで開きます
bodyに関する記述
  1. ページ全体・マージンとパディングの指定0px指定
div1に関する記述
  1. 幅と高さに数値指定
  2. コンテンツ表示領域の背景色にグリーンを指定
  3. マージンは左右天地に余白指定、パディングは0pxの余白指定
div2に関する記述
  1. 幅と高さに数値指定
  2. コンテンツ表示領域の背景色にブルーを指定
  3. マージンは左右天地に余白指定、パディングは0pxの余白指定
  .body {
margin: 0px; padding: 0px;
}
div1{
width: 80%;
height: 200px;
background-color: #E3FEC9;
margin: 2px 0px 20px 30px;
padding: 0px;
}
.div2{
width: 100%;
height: 100px;
background-color: #DBF4FB;
margin: 0px 40px 10px 10px;
padding: 0px;
}

4-2 背景に画像を使う

左のような画像を背景に使うとします。
background-image: url(images/4_2_1.gif);
横だけに繰り返すとこのようになります
(background-repeat: repeat-x;でⅩ軸に繰り返すの意味)
background-image: url(images/4_2_1.gif);
background-repeat: repeat-x;
縦だけに繰り返すとこのようになります
(background-repeat: repeat-y;でY軸に繰り返すの意味)
background-image: url(images/4_2_1.gif);
background-repeat: repeat-y;
サンプル ソースコード
背景の指定は読みづらくなるので注意
  
.css4-2-1 {
margin: 30px;
padding:20px;
background-image: url(images/4_2_1.gif);
}
<div class="css4-2-1">背景の指定は読みづらくなるので注意<div>
 スタイル定義　　　適用
オプション ソースコード
サンプルページが別ウィンドウで開きます
css4-2-1に関する記述
  1. マージン30px、パディング20pxの余白指定
  2. コンテンツ表示領域の背景色に画像を縦リピート指定
 
body {
margin: 60px;
background-image: url(images/4_2_1.gif);
background-repeat: repeat-y;
}
 
この定義は画像を少ない範囲で繰り返しバックグラウンドに表示できるため、画像サイズのスリム化が可能になります。

4-3 枠線

枠線の太さ、スタイル、色を順に指定します。
それぞれ個別に指定もできます。
枠線の太さ{ border-width: **; }
thin 細い枠線
medium 中くらいの枠線
thick 太い枠

枠線の色 { border-colo: #**; }		 枠線のスタイル{ border-style: *; }
none 枠線を表示しない (デフォルト値)
hidden 枠線を隠して表示しない
dotted 点線
dashed 破線
solid 実線
double 二重線
groove 立体的に望んだ感じの線
ridge 立体的に隆起した感じの線
inset 立体的にくぼんだ感じの矩形
outset 立体的に隆起した感じの矩形
サンプル 1 ソースコード 1
例1）太さ普通、実線、黒   .css4-3-1 {
padding: 3px;
width: 60%;
border: medium solid #000000;
}
サンプル 2   ソースコード 2
例2）太さ細い、実線、黒   .css4-3-2 {
padding: 3px;
width: 60%;
border: thin solid #000000;
}
サンプル 3   ソースコード 3
例3）太さ太い、実線、黒   .css4-3-3 {
padding: 3px;
width: 60%;
border: thick solid #000000;
}
サンプル 4   ソースコード 4
例4）太さ普通、点線、黒   .css4-3-4 {
padding: 3px;
width: 60%;
border: medium dotted #000000;
}
サンプル 5   ソースコード 5
例5）太さ15px、立体的に隆起、紫   .css4-3-5 {
padding: 3px;
width: 60%;
border: 15px ridge #cc00cc;
}
サンプル 6   ソースコード 6
例6）太さ8px、立体的に隆起、緑   .css4-3-6 {
padding: 3px;
width: 60%;
border: 8px inset #ccff00;
}
 
罫線は天地左右それぞれに指定ができるので、titleのデザインにも結構使います。

4-4 配置方法

positionはボックスの配置方法を指定します
position: static; 特に配置方法を指定しない通常の位置にもどす(デフォルト)
position: relative; 配置を始めた位置を基準にして相対的に配置
position: absolute; 親要素を基準にして絶対的な位置に配置
サンプル 1 ソースコード 1
サンプルページが別ウィンドウで開きます
bodyに関する記述
  1. マージン、パディング0pxの余白指定
css4-4-1に関する記述
  1. マージン、パディング0pxの余白指定
css4-4-2に関する記述
  1. 上158px、左255pxの位置に配置
  2. 黒の罫線、5pxの余白指定
 
body {
margin: 0px; padding: 0px;
}
.css-4-4-1 {
margin: 0px 0px;
}
.css-4-4-2 {
position: absolute;
top: 158px;
left: 255;
border:solid 1px thin;
padding: 5px;
}
<div class="css4-4-1">
<img src="images/4_4_1.gif" alt="四角" width="300" height="100" class="css-4-4-1" /><div>
<div class="css-4-4-2">配置指定したボックス... あります<div>
サンプル 2   ソースコード 2
サンプルページが別ウィンドウで開きます
bodyに関する記述
  1. マージン、パディング0pxの余白指定
css4-4-1に関する記述
  1. マージン、パディング0pxの余白指定
css4-4-3に関する記述
  1. 上-4px、左150pxの位置に配置
  2. 黒の罫線、5pxの余白指定
 
body {
margin: 0px;
padding: 0px;
}
.css-4-4-1 {
margin: 0px 0px;
}
.css-4-4-3 {
position: relative;
top: -40px;
left: 150px;
border: solid 1px thin;
padding: 5px;
}
<div class="css4-4-1">
<img src="images/4_4_1.gif" alt="四角" width="300" height="100" class="css-4-4-1" /><div>
<div class="css-4-4-3">
<br>
<br>
<br>
<br>
<br>
配置指定したボックス... 移動します。<div>
 スタイル定義　　　適用

4-5 重なりの順序を指定

z-index は、ボックスの重なり順序を整数で指定します。
この指定は、position で relative、absoluteを指定している場合に有効です。
サンプル ソースコード
サンプルページが別ウィンドウで開きます
重なり順と指定順が入れ替わっています
bodyに関する記述
  1. マージン、パディング0pxの余白指定
css4-5-1に関する記述
  1. 左右天地200pxの数値指定
  2. マージン、パディング0pxの余白指定
  3. 背景に画像を配置
css4-5-2に関する記述
  1. 左右天地200pxの数値指定
  2. 上120px、左190pxの位置に配置
  3. 黒の罫線、5pxの余白指定
css4-5-3に関する記述
  1. 左右200px、天地97pxの数値指定
  2. 上100px、左140pxの位置に配置
  3. 黒の罫線、背景色にイエローを指定
 
body {
margin: 0px;
padding: 0px;
}
.css-4-5-1 {
position: absolute;
width: 200px;
height: 200px;
margin: 0px 0px;
background-image: url(images/4_5_1.jpg);
background-repeat: no-repeat;
z-index: 2;
}
.css-4-5-2 {
position: absolute;
width: 200px;
height: 200px;
top: 120px;
left: 190px;
border: solid 1px thin;
padding: 5px;
z-index: 3;
}
.css-4-5-3 {
position: absolute;
top: 100px;
left: 140px;
width: 200px;
height: 97px;
border: solid 2px thin;
background-color: #ffff99;
z-index: 1;
}
<div class="css-4-5-1">画像を背景に指定しています</div>
<div class="css-4-5-2">
<div align="right">配置指定ボックス２
<br>
<br>
<br>
このページは<br>
ウィンドウ右上の<br>
</div>
</div>
<div class="css-4-5-3">
<div align="right">配置指定ボックス３
</div>
</div>
関連
position 4-4 配置方法へ
 スタイル定義　　　適用