h15　リキッドレイアウト

授業　演習問題 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>リキッドレイアウト</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<div id="container">
<header>
<h1>カスケーディング モーニング ニュース</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">政治</a></li>
<li><a href="#">暮らし</a></li>
<li><a href="#">文化</a></li>
<li><a href="#">スポーツ</a></li>
<li><a href="#">芸能</a></li>
</ul>
</nav>
<p class="print"><a href="#"><img src="img/print.gif" width="168" height="23" alt="このページの記事を印刷する"></a></p>
</header>

<div id="wrapper">
<div id="inner">
<div id="content">
<section>
<article>
<h2>本格チョコレートのラインナップに新作が登場</h2>
<p>
厳選されたカカオ豆だけを使用し、日本発の本格チョコレートとして特に女性に人気の高い「Cacao Sample Chocolate Shop」では、5月からこれまでのラインナップに加え、新作のチョコレートを5種類追加することを発表した。</p>
<p>ラインナップに登場するのは「スイス」、「ガーナ」、「マダガスカル」、「ベルギー」、「フランス」と、5つの国名が付けられたチョコレート。さらに「スイス」と「ベルギー」はミルクとビターの2種類に分けられる。</p>
<p>厳選されたカカオ豆だけを使用し、日本発の本格チョコレートとして特に女性に人気の高い「Cacao Sample Chocolate Shop」では、5月からこれまでのラインナップに加え、新作のチョコレートを5種類追加することを発表した。</p>
<p>ラインナップに登場するのは「スイス」、「ガーナ」、「マダガスカル」、「ベルギー」、「フランス」と、5つの国名が付けられたチョコレート。さらに「スイス」と「ベルギー」はミルクとビターの2種類に分けられる。</p>
<p class="date">2013年07月01日13時00分</p>
</article>

<section>
<section>
<dl>
<dt>関連記事</dt>
<dd><a href="#">「カカオ サンプル チョコレート ショップ」2号店が登場</a></dd>
<dd><a href="#">フランスチョコレートのおいしさの秘密を探る</a></dd>
<dd><a href="#">いよいよ「カカオ サンプル チョコレート ショップ」がオープン</a></dd>
</dl>
</section>
<section>
<dl>
<dt>関連記事</dt>
<dd><a href="#">「カカオ サンプル チョコレート ショップ」2号店が登場</a></dd>
<dd><a href="#">フランスチョコレートのおいしさの秘密を探る</a></dd>
<dd><a href="#">いよいよ「カカオ サンプル チョコレート ショップ」がオープン</a></dd></dl>
</section>
</section>
</section>
</div><!--/content-->
</div><!--/innner-->

<div id="sidebar">
<section>
<section>
<dl>
<dt>特集記事</dt>
<dd><a href="#">春の味覚特集</a></dd>
<dd><a href="#">お花見スポット</a></dd>
<dd><a href="#">花粉情報</a></dd>
</dl>
</section>
<section>
<dl>
<dt>特集記事</dt>
<dd><a href="#">春の味覚特集</a></dd>
<dd><a href="#">お花見スポット</a></dd>
<dd><a href="#">花粉情報</a></dd>
</dl>
</section>
<section>
<dl>
<dt>特集記事</dt>
<dd><a href="#">春の味覚特集</a></dd>
<dd><a href="#">お花見スポット</a></dd>
<dd><a href="#">花粉情報</a></dd>
</dl>
</section>
</section>
</div><!--/sidebar-->

<div id="advertisement">
<section>
<p><img src="img/ad.jpg" width="170" height="455" alt="広告：Cacao Chocolate Shop"></p>
</section>
</div><!--/advertisement-->
</div><!--/wrapper-->

<footer>
<p>Copyright &#169; Cascading Morning News All Rights Reserved.</p>
</footer>
</div><!--/container-->
</body>
</html>

@charset "utf-8";

article, footer, header,
nav, section {
  display: block;
}
body,div,img,h1,h2,p,dl,dt,dd,ul,li,article,footer,header,
nav,section{
  margin: 0px;
  padding: 0px;
}
ul{
  list-style: none;
}
/* layout */
body{
  color: #333333;
  font-size: 16px;
  font-family:
  "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  line-height:1.7;
}
#container{
  width: 100%;
  height:100%;
}
header{
  padding: 30px 0;
  height: auto;
  background:  #2d78bf;
  }
#wrapper{
  min-width: 700px;
  overflow: hidden;
  background: url(img/leftside_bg.gif) repeat-y;
}
#inner{
  width: 100%;
  float: left;

}
#content{
  margin-left: 215px;
  margin-right: 180px;
}
#sidebar{
  float: left;
  margin-left: -100%;
  width: 215px;
}
#advertisement{
  float: left;
  width: 180px;
  margin-left: -180px;
  margin-top: 20px;

}
footer{
  text-align: center;
  background: #eeeeee;
  line-height: 50px;
}
/* parts */
#content>section{
  margin: 20px 10px 0 10px;
}
#sidebar>section{
  margin-top: 30px;
}
#sidebar>section>section{
margin-bottom:20px;
}
#sidebar dl{
  width: 200px;
}
#sidebar dl dt{
  padding-left:10px;
  background: #2d78bf;
  color: #FFFFFF;
  margin-bottom: 5px;
  }
#sidebar dl dd{
  background: url(img/arrow.gif) no-repeat 10px 10px;
  padding-left: 25px;
  border-bottom:#CCCCCC 1px solid;
  }
h1{
  background: url(img/logo.gif) no-repeat;
  width: 267px;
  height: 33px;
  display: block;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  margin-left:10px;
}
nav{
  height: 28px;
  width: 100%;
  min-width: 700px;
  background: url(img/global_nav_bg.gif) repeat-x left bottom;
  position: relative;
  top: 30px;
}
nav ul{
  overflow: hidden;
  text-align: center;
}
nav li{
  float: left;
}
nav li a{
  display: block;
  height: 28px;
  width: 90px;
  border-right: #CCCCCC 1px solid;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
p.print{
  position:absolute;
  right: 10px;
  top:40px;
}
h2{
  border-bottom:1px solid #CCCCCC;
  margin-bottom: 10px;
}
#content>section p{
  margin-bottom: 10px;
}
p.date{
text-align: right;
}
#content>section dt{
  font-weight: bold;
  border-left: 5px solid #2d78bf;
  padding-left: 10px;
  background: #eeeeee;
  margin-bottom: 5px;
}
#content>section dd{
  margin-bottom: 10px;
  background: url(img/arrow.gif) no-repeat 10px 10px;
  padding-left: 25px;
  border-bottom:#CCCCCC 1px solid;
}