12月6日の学習　

授業
3カラム可変幅レイアウト

20111207134306

【作成時注意】

  • container・・・width:100%、overflow:auto　を設定。
  • wrapper・・・width:100%、float:left、margin-rihgt:-200px　（sidebar2の設置場所確保）　を設定。
  • content・・・width:100%、float:right、margin-left:-200px　（sidebar1の設置場所確保）　を設定。
  • sidebar2・・・widthを指定、float:right　を設定。
  • sidebar1・・・widthを指定、float:left　を設定。
  • content *{ margin: 0 210px 0 220px; }　でcontent直下のすべての要素に指定し、左右に空きをつくる。※「*」は「すべての要素」を意味する。
  • content **{ margin: 0; }　で、content * の「*」をリセット。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3カラム可変幅レイアウト1206</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
#container{
	width: 100%;
	padding: 25px 0;
	overflow: auto;
	background-image: url(images/leftside_bg.gif);
	background-repeat: repeat-y;
	background-position: left top;
}
#wrapper{
	width: 100%;
	float: left;
	margin-right: -200px;
}
#sidebar2{
	width: 200px;
	float: right;
	text-align: center;
}
#content{
	width: 100%;
	float: right;
	margin-left: -200px;
	overflow: auto;
}
#content *{
	margin: 0 210px 0 220px;
}
#content * *{
	margin: 0;
}
#content h1{
	padding: 0 0 5px 0;
	border-bottom: 1px solid #CCC;
	margin: 0 210px 20px 220px;
}
#content p{
	margin: 0 210px 20px 220px;
}
#content p.date{
	float: right;
	font-size: 14px;
}
.lead{
	margin: 0 210px 0 220px;
	padding: 20px 0 15px 0;
}
.lead h2{
	font-size: 16px;
	padding: 5px 15px;
	border-left: 5px solid #30F;
	background-image: url(images/global_nav_bg.gif);
	background-repeat: repeat-x;
	background-position: left top;
}
.lead ul{
	list-style-type: none;
}
.lead li{
	padding: 10px 0 5px 30px;
	background-image: url(images/arrow.gif);
	background-repeat: no-repeat;
	background-position: 10px 15px;
	border-bottom: 1px solid #CCC;
}
#sidebar1{
	width: 200px;
	float: left;
}
#sidebar1 h2{
	background-color: #30F;
	color: #FFF;
	font-size: 16px;
	padding:5px 10px;
}
#sidebar1 ul{
	list-style-type: none;
}
#sidebar1 li{
	color: #306;
	padding: 10px 0 5px 30px;
	background-image: url(images/arrow.gif);
	background-repeat: no-repeat;
	background-position: 10px 15px;
	border-bottom: 1px solid #CCC;
}
.list{
	margin: 0 0 20px 0;
}	
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="content">
<h1>本格チョコレートのラインナップに新作が登場</h1>
<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">2006年04月01日13時00分</p>
<div class="lead">
<h2>関連記事</h2>
<ul>
<li><a href="#">「カカオ サンプル チョコレート ショップ」2号店が登場</a></li>
<li><a href="#">フランスチョコレートのおいしさの秘密を探る</a></li>
<li><a href="#">いよいよ「カカオ サンプル チョコレート ショップ」がオープン</a></li>
</ul>
</div>
<div class="lead">
<h2>関連記事</h2>
<ul>
<li><a href="#">「カカオ サンプル チョコレート ショップ」2号店が登場</a></li>
<li><a href="#">フランスチョコレートのおいしさの秘密を探る</a></li>
<li><a href="#">いよいよ「カカオ サンプル チョコレート ショップ」がオープン</a></li>
</ul>
</div>
</div>
<div id="sidebar1">
<div class="list">
<h2>特集記事</h2>
<ul>
<li><a href="#">春の味覚特集</a></li>
<li><a href="#">お花見スポット</a></li>
<li><a href="#">花粉情報</a></li>
</ul>
</div>
<div class="list">
<h2>特集記事</h2>
<ul>
<li><a href="#">春の味覚特集</a></li>
<li><a href="#">お花見スポット</a></li>
<li><a href="#">花粉情報</a></li>
</ul>
</div>
<div class="list">
<h2>特集記事</h2>
<ul>
<li><a href="#">春の味覚特集</a></li>
<li><a href="#">お花見スポット</a></li>
<li><a href="#">花粉情報</a></li>
</ul>
</div>
</div>
</div>
<div id="sidebar2"><a href="#"><img src="images/ad.jpg" alt="広告：Cacao Chocolate Shop" width="170" height="455" /></a></div>
</div>		
</body>
</html>