実践課題 CSS07

CSS

【CSS07】

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


http://d.hatena.ne.jp/web-design-advance/20120506/p1

<?xml version="1.0" encoding="UTF-8"?>
<!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>CSS07</title>
<style type="text/css">

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #fff;
  font-family:
	"Hiragino Kaku Gothic Pro",
	"ヒラギノ角ゴ Pro W3",
	"Meiryo", 
	"メイリオ", 
	"Osaka", 
	"MS P Gothic", 
	"ＭＳ Ｐゴシック", 
	sans-serif;
}
h1 {
  font-size: 1.3em;
  color: #717a80;
  margin-bottom: 35px;
}
h2 {
  margin-bottom: 20px;
}
p {
  font-size: 0.85em;
}
#container {
  width: 780px;
  background-color: #fff;
  border-right: 20px solid #D8E9D7;
}
#wrapper {
  width: auto;
  height: auto;
  background-color: white;
  margin-left: 150px;
}
#bg {
  float: left;
  margin: 0;
}
#up dl {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 0.9em;
}
#up dt {
  float: left;
}
#up dd {
  padding-left: 130px;
  color: #9EC3B2;
  font-weight: bold;
}
#nav {
  width: 700px;
  margin-top: 30px;
  font-size: 0.8em;
}
#nav ul {
  list-style-type: none;
}
#nav li {
  float: left;
  border-right: 1px solid;
}
#nav li a {
  display: block;
  padding: 0 5px; 
  text-decoration: none;
}
#nav li a:link {
  color: black;
}
#nav li a:hover {
  color: coral;
}
.concept {
  margin-top: 35px;
  margin-bottom:
}
.shop {
  margin-top: 30px;
}
.products {
  margin-top: 30px;
}
.access {
  margin-top: 30px;
}
.blog {
  margin-top: 30px;
}
.contact {
  margin-top: 30px;
}
p.info  {
  font-size: 0.9em;
}
#aaa li {
  border-right: 0;
}
address {
  margin-top: 15px;
  margin-left: 250px;
  margin-bottom: 20px;
  font-size: 0.6em;
  font-style: normal;
  letter-spacing: 0.2em;
}


</style>
</head>

<body>
<div id="container">
<div id="bg">
  <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518023558.gif?1337275863" alt="interior shop"/>
</div>

<div id="wrapper">
<div id="content">
  <h1>インテリアショップ a Interior</h1>
  <h2><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518023601.gif" alt="インフォメーション"></h2>
  <p class="info">インテリアショップ「a Interior」での商品入荷情報、イベント、HPの更新など。</p>
  
  <div id="up">
  <dl>
  <dt>2012年4月27日</dt>
      <dd>復刻版の商品が再入荷しました。</dd>
  <dt>2012年4月26日</dt>
      <dd>ティーカップが入荷しました。</dd>
  <dt>2012年4月25日</dt>
      <dd>オープン  家具・新商品入荷しました。</dd>
  </div>

<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518023557.jpg" alt="商品入荷情報">


  <h2><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518023603.gif" alt="コンセプト" class="concept"></h2>
  <p>インテリアについての「想い」を感じてください。</p>

  <h2><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518023559.gif" alt="店舗情報" class="shop"></h2>
  <p>店内のイメージ写真と会社案内。</p>

  <h2><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518023600.gif" alt="商品紹介" class="products"></h2>
  <p>家具・雑貨をはじめとした取り扱い商品の一部をご紹介しています。</p>

  <h2><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518023605.gif" alt="アクセスマップ" class="access"></h2>
  <p>「a Interior」までの交通機関のご案内です。</p>

  <h2><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518023604.gif" alt="ブログ" class="blog"></h2>
  <p>スタッフの「ブログ」です。</p>

  <h2><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/m/msnb125/20120518/20120518023602.gif" alt="お問い合せ" class="contact"></h2>
  <p>インテリアや雑貨・家具、その他に関するお問い合せはこちらまで。</p>

</div>

<div id="nav">
  <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>
	<div id="aaa">
	  <li><a href="#">CONTACT</a></li>
	</div>
  </ul>
</div>

<br>
  <address>Copyright(c)2012 インテリアショップ a Interior</address>
</div>  
</div>


</body>
</html>
</body>
</html>

実践課題 CSS07 インテリアショップ - jsdo.it - share JavaScript, HTML5 and CSS