Today & Tomorrow...

勝手気ままな、備忘録的な感じです。

【CSS07】

【CSS07】
 
・サイズは適宜、調整すること
・定義型リストに「float」の設定が必要
XHTML 1.0 Transitional

<html>
<head>
<title>css07</title>
<style type="text/css">
*{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

body{
  font-family:"メイリオ",Meiryo,Osaka,"MS Pゴシック","MS PGothic",sans-serif;
}
#container{
  width: 900px;
  margin:30px auto; 
  border-right:30px solid #C0DFB5;
}

#header{
  float:left;
}


#wrapper{
width:auto;
overflow:auto;
}

p{
  margin: 10px 0;
}

dl{
  margin: 10px 0 10px;
}

dt{
  float:left;
  margin: 0 10px;
  
}
dd{
  color: #C0DFB5;
}
 
#info{
  float: right;
  margin: 30px 20px 30px 0;
  font-size: 20px; 
}
#info li{
  display:inline;
  border-left: 1px solid #999;
}

li a{
  padding: 0 10px 0 5px;
  text-decoration: none;
}

li#first{
  border-left: none;
}

#info a:link{
  color: black;
}
#info a:visited{
  color: red;
}
#info a:hover{
  color: orange;
}
#info a:active{
  color: green;
}
address{
  clear: both;
  text-align: right;
  font-style: normal;
  margin-right: 30px;
}
</style>

</head>
<body>
<div id="container">
<div id="header"><img src="CSS7images/side_image.gif" alt="interior" title="interior" /></div>
<h1>インテリアショップ a Interior</h1>
<h2><a href="#"><img src="CSS7images/info.gif" alt="インフォメーション"title="インフォメーション"/></a></h2>
<div id="wrapper">
<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="CSS7images/cup.jpg" alt="cup" title="cup"/></p>
<h2><a href="#"><img src="CSS7images/concept.gif" alt="コンセプト" title="コンセプト" /></a></h2>
<p>インテリアについての「想い」を感じてください。</p>
<h2><a href="#"><img src="CSS7images/shop.gif" alt="ショップ" title="ショップ" /></a></h2>
<p>店内のイメージ写真と会社案内。</p>
<h2><a href="#"><img src="CSS7images/products.gif" alt="商品紹介" title="商品紹介" /></a></h2>
<p>家具・雑貨をはじめとした取り扱い商品の一部をご紹介しています。</p>
<h2><a href="#"><img src="CSS7images/access.gif" alt="店舗へのアクセス"  title="店舗へのアクセス" /></a></h2>
<p>「a Interior」までの交通機関のご案内です。</p>
<h2><a href="#"><img src="CSS7images/blog.gif" alt="ブログ" title="ブログ" /></a></h2>
<p>スタッフの「ブログ」です。</p>
<h2><a href="#"><img src="CSS7images/contact_us.gif" alt="お問い合わせ" title="お問い合わせ" /></a></h2>
<p>インテリアや雑貨・家具、その他に関するお問い合わせはこちらまで。</p>
</div>
<div id="info">
<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>
</div>
<address>Copyright(c)2012 インテリアショップ a Interior</address>
</div>
</body>
</html>