《Program sheet》
======================================================================
<html>
<head>
<title>box</title>
<style type="text/css">
.box1{
height:100px;
width:400px;
background-color:#00ccff;
margin-top:50px;
margin-bottom:50px;
margin-right:50px;
margin-left:50px;
}
.box2{
height:50px;
width:300px;
background-color:#ff00cc;
margin-top:100px;
margin-bottom:100px;
margin-right:100px;
margin-left:100px;
}
.box3{
height:25px;
width:200px;
background-color:#ccff00;
margin-top:10px;
margin-bottom:10px;
margin-right:10px;
margin-left:10px;
}
</style>
</head>
<body>
<h3>●２－８ボックスの設定●</h3>
テーブルタグに近い感覚でデザインすることが出来るボックス指定。
<h3>★①ボックスの縦サイズ設定｛height:単位付の数値；｝★</h3>
<h3>★②ボックスの横サイズ設定｛width:単位付の数値；｝★</h3>
<h3>★①ボックスの上マージン設定｛margin-top:単位付の数値；｝★</h3>
<h3>★②ボックスの下マージン設定｛margin-bottom:単位付の数値；｝★</h3>
<h3>★③ボックスの右マージン設定｛margin-right:単位付の数値；｝★</h3>
<h3>★④ボックスの左マージン設定｛margin-left:単位付の数値；｝★</h3>
※縦と横のサイズを設定するだけで簡単にボックスを作成することができます。
<h3></h3>
<div class = "box1">ボックス１（縦１００ピクセル×横４００ピクセル マージン各５０）</div>
<div class = "box2">ボックス２（縦５０ピクセル×横３００ピクセル マージン各１００）</div>
<div class = "box3">ボックス３（縦２５ピクセル×横２００ピクセル マージン各１０）</div>
</body>
</html>
2007.07.26 tateda-yoshio