CSSテスト - １カラム - WEB

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インテリアショップ a Interior</title>
<link rel="stylesheet" href="css/style.css" media="print,screen">
</head>
<body>
<div id="container">
<h1>インテリアショップ a Interior</h1>

<div id="content">
<div class="menu">
<h2><a href="#"><img src="img/info.gif" alt="インフォメーション"></a></h2>
<p>インテリアショップ「a Interior」での商品入荷情報、イベント、HPの更新など。</p>
<dl>
<dt>2012年4月27日</dt>
<dd>復刻版の商品が再入荷しました。</dd>
<dt>2012年4月26日</dt>
<dd>ティーカップが入荷しました。</dd>
<dt>2012年4月25日</dt>
<dd>オープン　家具・新商品入荷しました。</dd>
</dl>
<p><img src="img/cup.jpg" alt="arrival"></p>
</div>
<div class="menu">
<h2><a href="#"><img src="img/concept.gif" alt="コンセプト"></a></h2>
<p>インテリアについての「想い」を感じてください。</p>
</div>
<div class="menu">
<h2><a href="#"><img src="img/shop.gif" alt="店舗情報"></a></h2>
<p>店内のイメージ写真と会社案内。</p>
</div>
<div class="menu">
<h2><a href="#"><img src="img/products.gif" alt="商品紹介"></a></h2>
<p>家具・雑貨をはじめとした取り扱い商品の一部をご紹介しています。</p>
</div>
<div class="menu">
<h2><a href="#"><img src="img/access.gif" alt="アクセスマップ"></a></h2>
<p>「a Interior」までの交通機関のご案内です。</p>
</div>
<div class="menu">
<h2><a href="#"><img src="img/blog.gif" alt="ブログ"></a></h2>
<p>スタッフの「ブログ」です。</p>
</div>
<div class="menu">
<h2><a href="#"><img src="img/contact_us.gif" alt="お問い合せ"></a></h2>
<p>インテリアや雑貨・家具、その他に関するお問い合せはこちらまで。</p>
</div>
</div>

<div id="footer">
<ul>
<li id="first"><a href="#">HOME</a></li>
<li><a href="#">INFO</a></li>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">SHOP</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<address>Copyright(c)2012 インテリアショップ a Interior</address>
</div>
</div>
</body>
</html>

@charset "utf-8";

/* reset 
---------------------------------------------*/
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td, form, fieldset {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family:
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Meiryo, 
		"メイリオ", 
		Osaka, 
		"MS P Gothic", 
		"ＭＳ Ｐゴシック", 
		sans-serif;
}
ul {
	list-style-type: none;
}
li a {
  text-decoration: none;
}
img {
	border: none;
	vertical-align: bottom;
}

/* font 
---------------------------------------------*/
html {font-size: 16px; }
body {font-size: 14px; }
h1 {font-size: 16px; }
h2 {font-size: 14px; }
ul, dl {font-size: 14px; }
address {font-size: 12px; }

body {
	line-height: 1.5; 
	background-color: #d7e8d6;
}
#container {
	width:850px;
	padding: 8px 0;
	background-image: url("../img/side_image.gif");
	background-repeat: no-repeat;
	background-color: #fff;
}
h1,#content {
	font-weight: normal;
	padding: 0 0 0 134px;
}
h1 {
	margin: 8px 0 24px 0;
}
dl {
	margin: 16px 0;
}
dt {
	float: left;
	padding: 3px 16px 3px 0;
}
dd {
	color: #85cdbb;
	padding: 3px 0;
}
.menu {
	margin-bottom: 32px;
}
h2 {
	margin: 8px 0;
}
#footer {
		padding: 0 0 0 134px;
	overflow: hidden;
}
li {
	float: left;
 margin: 16px 0;
 padding: 0 12px;
 border-left: solid 1px #555;
}
li#first {
	 margin: 16px 0;
	padding: 0 12px 0 0;
	border: none;
}
address {
	font-style: normal;
	text-align: right;
	margin: 0 32px 0 0;
}