<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>box&正しいhtml文書(css版)</title>
<style type="text/css">
#box{
padding: 50px;
border: 50px solid #66cc66
width: 300px !important;
width: 500px;
background-color: #ffffbf;
}
#shopping{
border: 1px; solid #cccccc;
font-size: small;
padding: 10px;
width: 400px;
}
#shopping h2{
background-color: #0066cc;
padding: 3px;
color: #ffffff;
margin: 0;
font-size: small;
font-weight: normal;
}
#shopping ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#shopping li{
border-bottom: 1px dotted #cccccc;
padding: 3px;
margin: 0;
}
.box{
float: left;
width: 200px;
margin-left: 50px;
background: #ccf;
height: 100px;
}
body{
background-image:url("egz.png");
}
h1{
font-size: 150%;
color: #0850b2;
background: #ffffff url(images/text.jpg)left bottm repeat-x;
border-top: 7px solid #0850b2;
border-bottom: 3px solid #cccccc;
margin:0 0 20px 0;
padding: 10px;
}
</style>
</head>
<body>
<div id="box">box領域</div>
<h1>正しいhtml構造(css版)</h1>
<p>内容</p>
<div id="shopping">
<h2>リスト表</h2>
<ul>
<li>bob</li>
<li>damian</li>
<li>lee pery</li>
<li>cartel</li>
</ul>
</div>
<div class="box">floatを使った段組<br /></div>
<div class="box">floatを使った段組<br /></div>
</body>
</html>
