My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

2/17 [HTML] class と id

f:id:sntkk3:20140228223724g:plain

  • class と id

class と id

原理原則では、汎用性(class)と個別性(id)
現実的には必ずしもその通りではない

横並びの時 divが必要
縦並びの時 divが不要

【演習】floatを使ったレイアウト

問題:以下のように表示されるように記述しなさい

  1. 各空き(白色部)は「10px」
  2. 各ブロックの背景色は、文字の可読性を考えて指定をすること
  3. conatiner幅「800px」
  4. paddingを利用する場合、conatiner幅は「800px-(padding左右を足した値)」になる
  5. headerとfooterの高さは「50px」、contentとsidebarの高さは「300px」
  6. content幅は「550px」
  7. navの高さは「3em」
  8. 優先順位は、content→sidebarの順
  9. navは、headerの下部
  10. liにborderを設定した場合の計算もすること(2px)
  11. liの最後は、「class」で設定すること(last-child疑似クラスは使用しない)
  12. borderではなく、marginの設定でもOKとします
  13. navの擬似クラスは、適宜設定する
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>floatを使ったレイアウト:テスト</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div id="container">
<div id="header">ここにheaderの内容が入る</div>
<div id="nav">
<ul>
<li><a href="#">カテゴリ1</a></li>
<li><a href="#">カテゴリ2</a></li>
<li><a href="#">カテゴリ3</a></li>
<li><a href="#">カテゴリ4</a></li>
<li class="last"><a href="#">カテゴリ5</a></li>
<!--<div class="last"><li><a href="#">カテゴリ5</a></li>
</div> -->
</ul>
</div><!--/#nav -->
<div id="wrapper">
<div id="content">ここにcontentの内容が入る</div>
<div id="sidebar">ここにsidebarの内容が入る</div>
</div><!--/#wrapper -->
<div id="footer">ここにfooterの内容が入る</div>
</div><!--/#container -->
</body>
</html>

[実行結果]


【演習】1カラムレイアウト

見本


HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>石垣島観光ガイド</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>石垣島観光ガイド</h1>
</div><!-- header -->
<div id="content">
<p class="lead">石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。</p>
<h2>観光スポット</h2>
<h3>「 川平(かびら)湾」</h3>
<h4>石垣港から車で約20分</h4>
<p>石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。</p> 
<h3>「宮良川(みやらがわ)のヒルギ林」</h3>
<h4>石垣港からバスで30分宮良橋で下車</h4>
<p>巨大なマングローブ林(ヒルギ群落)があり、国の天然記念物に指定されているほど壮大です。</p>
<h3>「底地(すくじ)ビーチ 」</h3>
<h4>川平湾から車で約10分</h4>
<p>マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。</p>
<h3>「フサキビーチ」</h3>
<h4>石垣港からバスで30分、宮良橋下車</h4>
<p>島の西側にあるビーチで、西表(いりおもて)島に沈む美しいサンセットが見られるビーチとして有名です。</p>
<h3>「米原海岸」</h3>
<h4>石垣空港より車で約30分</h4>
<p>米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。</p>
<h3>「マエザトビーチ」</h3>
<h4>石垣空港より車で約5分</h4>
<p>ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。</p>
</div><!-- content -->
<div id ="footer">&copy;石垣島観光ガイド</div>
</div><!-- container-->
</body>
</html>

CSS

@charset "utf-8";
/* リセット */
html, body, div, h1, h2, h3, h4, p {
  margin: 0;
  padding: 0;
  line-height: 1.0em;
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
  font-size: 16px;
}
body {
/* margin: 10px auto;;
 padding: 10px;
 width: 800px;
 line-height: 1.2em;*/
 font-size:16px;
 background:#D8EAFF; 
}

/* 全体 */
#container {
  margin: 10px auto;
  padding: 10px;
  width: 780px;
  background-color: #FFF;
  height: auto;
}
#header {
  width: 750px;
  height: 250px;
  margin: 15px auto; 
  /*padding: 10px;*/
  background:url(../img/sea.jpg) no-repeat left top; 
}
#header img {
  width:50%;
}
#content {
  width: 750px;
  margin: 10px auto; 
  padding: 10px;
}
h1 {
  padding: 180px 0px 0px 510px;
  font-size: 26px;
  color:#FFF;
}
h2 {
  margin: 15px auto;
  padding: 0 15px;
  font-size: 20px;
  line-height:1.5em;
/*  line-height: inherit;*/
  color: #000066; 
  border-left: 10px solid #0066FF;
  border-bottom: 15px;
}
h3 {
  padding: 12px 0 10 10px;
  /*margin: 20px auto;*/
  font-size: 16px;
  color:#000099;
  background:#EEEEF8;
  line-height: 2.0em;
  border-top: thin dotted #000099;
  border-bottom: thin dotted #000099;
}
h4 {
  margin: 10px auto;
  font-size: 15px;
  color: #0099CC;
}
.lead {
 font-size: 14px;
 text-indent: 1em; 	
 margin-bottom: 24px;
}
p {
  font-size: 14px;
  line-height: 1.5em;
  margin-bottom: 18px;
}
#footer {
  margin: 30px 0 0 0;
  padding: 30px auto;
  line-height: 3.5em;
  text-align: center;
  font-size: 12px;
  border-top: thin dotted #999;
}

[習作]