ボックスの概念 内容を表示する領域、マージン、パディング、背景、枠線で構成されます。 パディングとマージンは透明な領域です。 枠線や背景をを指定しないときはそのちがいはわかりにくいことがあります。 マージン・パディング共に天地左右に数値を設定するだけで簡単に余白を設定することができます。 マージンはtableやtr、tdの外側に付けられる余白で、画像とテキストの間に余白をもうけたい時などに便利。 パディングはtableやtr、tdの内側に付けられる余白で、表組みなどを作るときに罫線とテキストの間に余白をもうける時に便利です。 |
サンプル | ソースコード | ||
|
.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; } |
左のような画像を背景に使うとします。 | |
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> |
スタイル定義 適用 |
オプション | ソースコード | ||
|
body {
margin: 60px; background-image: url(images/4_2_1.gif); background-repeat: repeat-y; } |
枠線の太さ、スタイル、色を順に指定します。 それぞれ個別に指定もできます。 |
|
枠線の太さ{ 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; } |
positionはボックスの配置方法を指定します position: static; 特に配置方法を指定しない通常の位置にもどす(デフォルト) position: relative; 配置を始めた位置を基準にして相対的に配置 position: absolute; 親要素を基準にして絶対的な位置に配置 |
サンプル 1 | ソースコード 1 | ||
|
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 {
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> |
スタイル定義 適用 |
z-index は、ボックスの重なり順序を整数で指定します。 この指定は、position で relative、absoluteを指定している場合に有効です。 |
サンプル | ソースコード | ||
|
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">配置指定ボックス2 <br> <br> <br> このページは<br> ウィンドウ右上の<br> </div> </div> <div class="css-4-5-3"> <div align="right">配置指定ボックス3 </div> </div> |
関連 |
position 4-4 配置方法へ |
スタイル定義 適用 |
©2006 WEB DESIGN STUDIO Powered by VISUAL LITERACY |