index.html
<html>
<head>
<meta charset="utf-8">
<title>SAMPLE</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style-l.css">
<link rel="stylesheet" href="style-m.css" media="only screen and (min-width:640px) and (max-width:979px)">
<link rel="stylesheet" href="style-s.css" media="only screen and (max-width:639px)">
</head>
<body>
<div id="container">
<div id="content">
<div id="inner">
<p>祇園精舎の鐘の聲、諸行無常の響あり。娑羅（しやら）雙樹の花の色、盛者（じやうしや）必衰のことはりをあらはす。おごれる人も久しからず、只春の夜（よ）の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。遠く異朝をとぶらへば、秦の趙高（てうかう）、漢の王莽（わうまう）、梁の朱异（しうい）、唐の禄山（ろくさん）、是等（これら）は皆舊主先皇（せんくわう）の政（まつりごと）にもしたがはず、樂しみをきはめ、諌（いさめ）をもおもひいれず、天下（てんが）のみだれむ事をさとらずして、民間の愁（うれふ）る所をしらざ（ツ）しかば、久しからずして、亡（ばう）じにし者どもなり。近く本朝をうかゞふに、承平（せうへい）の將門、天慶（てんぎやう）の純友（すみとも）、康和の義親（ぎしん）、平治の信頼（しんらい）、おごれる心もたけき事も、皆とりどりにこそありしかども、まぢかくは、六波羅の入道前（さき）の太政大臣（だいじやうだいじん）平の朝臣（あ（ツ）そん）淸盛公と申（まうし）し人のありさま、傳（つたへ）承るこそ心も詞（ことば）も及ばれね。</p>
</div>
</div>
<div id="sidebar">
<div class="ad">
<img src="img/ad-2.jpg">
<img src="img/ad-2.jpg">
<img src="img/ad-2.jpg">
</div>
</div>
</div>
</body>
</html>
style-l.css
#container {
width: 980px;
margin: auto;
}
#content {
width: 680px;
height: 620px;
background: #CEF1FF;
float: left;
}
#content p {
font-size: 18px;
line-height: 1.5em;
padding: 10px;
}
#sidebar {
width: 300px;
float: right;
}
.ad img{
margin: 0 0 10px 0;
}
style-m.css
#container {
width: 100%;
}
#content {
width: 100%;
margin-right: -300px;
}
#inner {
margin-right: 300px;
}
style-s.css
#container {
width: 100%;
}
#content {
width: 100%;
height: 100%;
float: none;
margin-bottom: 10px;
}
#sidebar {
width: 100%;
float: none;
}
.ad{text-align: center;}
