読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

レスポンシブデザイン・可変+固定レイアウト

レスポンシブデザイン

index.html

<!DOCTYPE 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><!--/#inner-->
</div> <!-- #content -->
<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><!-- #sidebar -->
</div><!-- #container -->
</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;}