【CSS05】 - Today & Tomorrow...

【CSS05】
・空きはリセットをせず、個別に指定する
・XHTML 1.0 Transitional
<html>
<head>
<title>css05</title>
<style type="text/css" >

body{
  font-family:"Hiragino Kaku Gothic Pro",
	"ヒラギノ角ゴ Pro W3",
	Meiryo, 
	"メイリオ", 
	Osaka, 
	"MS P Gothic", 
	"ＭＳ Ｐゴシック", 
    margin:auto;
    width:400px;
}

.title{
  position:absolute;
  font-size:1.0em;
  font-weight:bold;
  color:#000;
  width:8em;
}

.name{
  position:absolute;
  font-size:1.0em;
  font-weight:bold;
  color:#000;
  width:8em;
  margin-top:250px;
}

#content1{
  position:absolute;
  border-left:solid ;
  border-color:#FF7F00;
  margin-left:120px;
  width:350px;
  padding-left:10px;
  font-weight:bold;
  font-size:15px;
  
}

#content2{
  position:absolute;
  border-left:solid;
  border-color:#FF7F00; 
  margin-top:250px;
  margin-left:120px;
  width:350px;
  padding-left:10px;
  font-weight:bold;
  font-size:15px;
}




</style>
</head>
<body>
<div class="title">デザインの話</div>
<div id="content1">
<p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。
物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。</p>
<p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。
物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります</p>
</div>
<div class="name">パッケージの色</div>
<div id="content2">
<p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。</p>
<p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。</p>
</div>


</body>

</html>