テスト float - web-0127のブログ

２カラムレイアウト

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

各空き（白色部）は「10px」
各ブロックの背景色は、文字の可読性を考えて指定をすること
conatiner幅「800px」
paddingを利用する場合、conatiner幅は「800px-(padding左右を足した値)」になる
headerとfooterの高さは「50px」、contentとsidebarの高さは「300px」
content幅は「550px」
navの高さは「3em」
優先順位は、content→sidebarの順
navは、headerの下部
liにborderを設定した場合の計算もすること（2px）
liの最後は、「class」で設定すること（last-child疑似クラスは使用しない）
borderではなく、marginの設定でもOKとします
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="#">カテゴリ１</a></li>
    <li><a href="#">カテゴリ２</a></li>
    <li><a href="#">カテゴリ３</a></li>
    <li><a href="#">カテゴリ４</a></li>
    <li class="last"><a href="#">カテゴリ５</a></li>
    </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>

@charset "utf-8";

/* reset */
html, body, div, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/* body */
body {
  font-size: 16px;
  color: #333;
  background: #999;
}

/* layout */
#container {
  width: 780px;
  padding: 10px;
  background: #FFF;
  margin: 10px auto;
}
#header, #footer {
  height: 50px;
  background: #D0FBF8;
}
#wrapper {
  overflow: hidden;
  clear: both;
  margin-bottom: 10px;
}
#content {
  float: right;
  width: 550px;
  height: 300px;
  background: #F9FCCD;
}
#sidebar {
  float: left;
  width: 220px;
  height: 300px;
  background: #FFE8F4;
}

/* nav */
#nav {
  margin-bottom: 10px
}
#nav ul {
  overflow: hidden;
}
#nav li {
  float: left;
  width: 156px;
  line-height: 3em;
  text-align: center;
}
#nav li a {
  display: block;
  background: #393;
  color: #FFF;
  font-weight: bold;
  border-right: solid 2px #FFF;
}
#nav li.last a {
  border-right: none;
}
#nav li a:hover {
  background: #F60;
}

１カラムレイアウト

石垣島観光ガイド

石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。

観光スポット

「 川平（かびら）湾」
石垣港から車で約20分
石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。

「宮良川（みやらがわ）のヒルギ林」
石垣港からバスで30分宮良橋で下車
巨大なマングローブ林（ヒルギ群落）があり、国の天然記念物に指定されているほど壮大です。

「底地（すくじ）ビーチ 」
川平湾から車で約10分
マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。

「フサキビーチ」
石垣港からバスで30分、宮良橋下車
島の西側にあるビーチで、西表（いりおもて）島に沈む美しいサンセットが見られるビーチとして有名です。

「米原海岸」
石垣空港より車で約30分
米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。

「マエザトビーチ」
石垣空港より車で約5分
ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。

《div要素でグループ化した場合》

<!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>
<p class="lead">石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。</p>
</div><!-- /#header -->
<div id="content">
<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">
<p>&copy;石垣島観光局</p>
</div>
</div><!-- /#conteiner -->
</body>
</html>

@charset "utf-8";

/* reset */
html, body, div, h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

/* body */
body {
  color: #333;
  font-size: 16px;
  background: #CCF8FD;
}

/* layout */
#container {
  width: 760px;
  margin: 0 auto;
  background: #FFF;
  padding: 20px;
}
#header {
  width: 760px;
  height:340px;
  background: url(../img/h-bg.jpg) no-repeat 0 0;
  margin-bottom: 30px;
}
#header h1 {
  font-size: 20px;
  color: #FFF;
  padding: 160px 0 0 540px;
  margin-bottom: 40px;
}
#header p.lead {
  text-indent: 1em;
  line-height: 1.5;
  margin: 0 40px 30px 40px;
}
#content h2 {
  color: #036;
  font-size: 24px;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 10px solid #06C;
}
#content h3 {
  color: #036;
  font-size: 18px;
  margin-bottom: 20px;
  padding: 12px 0 12px 12px;
  background: #E1EBFF;
  border-bottom: 2px dotted #006;
  border-top: 2px dotted #006;
}
#content h4 {
  color: #06C;
  margin-bottom: 16px;
}
#content p {
  line-height: 1.5;
  margin: 0 1em 20px 5em;
}
#footer {
  text-align: center;
  border-top: #999 thin dotted;
}

《シンプルな構造にした場合》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>石垣島観光ガイド</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">

<h1>石垣島観光ガイド</h1>
<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>

<p class="footer">&copy;石垣島観光局</p>

</div><!-- /#conteiner -->
</body>
</html>

@charset "utf-8";

/* reset */
html, body, div, h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

/* body */
body {
  color: #333;
  font-size: 16px;
  background: #CCF8FD;
}

/* layout */
#container {
  width: 760px;
  margin: 0 auto;
  padding: 20px;
  background: #FFF url(img/h-bg.png) no-repeat 20px 20px;
}
h1 {
  font-size: 20px;
  color: #FFF;
  padding: 160px 0 0 540px;
  margin-bottom: 40px;
}
p.lead {
  text-indent: 1em;
  line-height: 1.5;
  margin: 0 40px 30px 40px;
}
h2 {
  color: #036;
  font-size: 24px;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 10px solid #06C;
}
h3 {
  color: #036;
  font-size: 18px;
  margin-bottom: 20px;
  padding: 12px 0 12px 12px;
  background: #E1EBFF;
  border-bottom: 2px dotted #006;
  border-top: 2px dotted #006;
}
h4 {
  color: #06C;
  margin-bottom: 16px;
}
p {
  line-height: 1.5;
  margin: 0 1em 20px 5em;
}
p.footer {
  margin: 0;
  padding-top: 10px;
  text-align: center;
  border-top: #999 thin dotted;
}

【演習】header01

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【演習】header01</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div id="header">
<h1>Homepage Title</h1>
<p>サブタイトルサブタイトルサブタイトル</p>
</div>
</body>
</html>

@charset "utf-8";

/* reset */
html, body, div, h1, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
#header h1 {
  margin: 20px 0 20px 20px;
  font-size: 32px;
  font-family: Verdana, Helvetica, sans-serif;
}
#header p {
  margin-left: 20px;
  font-size: 15px;
}

【演習】header02

上下に並んだ要素間の空きは、margin: 0; だけではなく、「line-height」を指定する必要があります

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【演習】header02</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div id="header"> 
<h1><img src="img/logo.png" alt="Homepage Title" title="" width="240" height="45"></h1>
<p>サブタイトルサブタイトルサブタイトル</p>
</div>
</body>
</html>

@charset "utf-8";

/* reset */
html, body, div, h1, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
#header h1 {
  margin: 20px 0 0 20px;
  font-size: 32px;
  font-family: Verdana, Helvetica, sans-serif;
}
#header p {
  margin-left: 30px;
  font-size: 15px;
}

【演習】header03

「header_inner」が設定されているのは、背景画像を設定するための「header」と文字のボックスを区別して、レイアウトしやすくするためです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【演習】header03</title>
<link rel="stylesheet" href="css/style3.css">
</head>
<body>
<div id="header">
<div id="header_inner">
<h1>Homepage Title</h1>
<p>サブタイトルサブタイトルサブタイトル</p>
</div>
</div>
</body>
</html>

@charset "utf-8";

/* reset */
html, body, div, h1, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
#header {
  width: 800px;
  padding: 10px;
}
#header_inner {
  height: 150px;
  padding: 20px;
  background: #003388;
}
#header h1 {
  font-family: Verdana, Helvetica, sans-serif;
  color: #FFF;
  margin-bottom: 20px;
}
#header p {
  color: #FFF;
}

【演習】layout01

素材

Homepage Title
サブタイトルサブタイトルサブタイトル
コンテンツのタイトル

コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。

コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。

メニューのリンク１
メニューのリンク２
メニューのリンク３
メニューのリンク４
メニューのリンク５
メニューのリンク６

Copyright &#169; AUTHOR NAME, All Rights Reserved.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【演習】layout01</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Homepage Title</h1>
<p>サブタイトルサブタイトルサブタイトル</p>
</div><!-- /#header -->
<div id="wrapper">
<div id="content">
<h2>コンテンツのタイトル</h2>
<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
</div><!-- /#content -->
<div id="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>
</ul>
</div><!-- /#nav -->
</div>
<div id="footer">
<p>Copyright &#169; AUTHOR NAME, All Rights Reserved.</p>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>

@charset "utf-8";

/* reset */
html, body, div, h1, h2, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/* body */
body {
  color: #333;
  font-size: 16px;
}

/* layout */
#container {
  width: 760px;
  margin: 0 auto;
}
#header {
  height: 180px;
  background: url(../img/header01.jpg) no-repeat left top;
  margin-bottom: 30px;
  padding: 20px 0 0 20px;
}
#header h1 {
  color: #FFF;
  font-family: Verdana, Helvetica, sans-serif;
  margin-bottom: 10px;
}
#header p {
  color: #FFF;
  font-size: 13px;
}
#wrapper {
  overflow: hidden;
  margin-bottom: 20px;
}
#content {
  float: left;
  width: 550px;
}
#nav {
  float: right;
  width: 180px;
}
#footer {
  height: 50px;
  text-align: center;
  padding-top: 10px;
  border-top: 2px solid #C1F569;
}

/* paragraph */
#content h2 {
  color: #FFF;
  font-size: 18px;
  background: #C1F569;
  margin-bottom: 20px;
  padding: 12px 0 10px 1em;
}
#content p {
  font-size: 15px;
  line-height: 1.5;
}
#nav ul {
  border-top: 1px solid #AAA;
}
#nav li {
  font-size: 14px;
  padding: 10px 0 9px 1em;
  border-bottom: 1px solid #AAA;
}
#nav li a:link, #nav li a:visited {
  color: #333;
}
#nav li a:hover {
  color: #F60;
}
#footer p{
  font-size: 12px;
}