CSS07 - はれあめはれ

【CSS07】

サイズは適宜、調整すること
定義型リストに「float」の設定が必要
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>インテリアショップ a Interior</title>
<style type="text/css">
body {
  font-size: 1em;
  font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro W3", Osaka, sans-serif;
  width: 800px;
  margin: 10px auto;
  background-image: url(../cs7_img/side_image.gif);
  background-repeat: no-repeat;
  background-position: 100px 0;
  border-right: solid 25px #d8e9d7;
}
h1, li, a:link {
  color: #808080;
  text-decoration: none;
}
h1 a:visited {
   color: #808080;
  text-decoration: none;
}
li a:visited {
   color: #808080;
  text-decoration: none;
}
h1 {
  font-size: 1.05em;
}
dl {
  line-height: 1.6;
  overflow: auto;
}
dl dd a:link, a:visited {
  color: #b3d3c4;
  text-decoration: none;
}
dt {
  float: left;
}
dd a {
  margin-left: 20px;
}
.cup {
  padding-bottom: 30px;
}
ul {
  list-style-type: none;
  text-align: left;
  padding: 40px 50px 0 0;
}
ul li {
  display: inline;
  padding: 0 10px;
  border-left: solid 2px #ccc;
}
ul li:first-child {
  border-left: none;
}
address {
  font-size: 0.875em;
  font-style: normal;
  text-align: right;
  padding: 2em 5em;
}
</style>
</head>

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