2013-08-05

H02・C02回答

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="css/0804-h02.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<h1>石垣島観光ガイド</h1>
</div>
<p class="lead">
石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。</p>

<h2>観光スポット</h2>

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

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

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

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

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

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

<div id="footer">
<p><small>(c)20132013石垣島観光協会</small></p>
</div>

</div><!--container-->
</body>
</html>


@charset "utf-8";
body,div,h1,h2,h3,p {
	margin: 0;
	padding: 0;
}
body {
	color:#333;
	font-size:14px;
	font-family:
	"Hiragino Kaku Gothic ProN",
	Meiryo,
	sans-serif;
	line-height:1.5;
	background-color:#9CF;
}
#container {
  background-color: #FFFFFF;
  width: 800px;
  margin: 20px auto;
  padding: 10px 10px 5px 10px;
}
#header {
	background-image: url(../img/header_img.jpg);
	background-repeat: no-repeat;
	width:800px;
	height:200px;
	border-radius: 10px;
	background-position:0 -300px;
	margin-bottom:20px;
}
h1 {
	color: #FFF;
	padding:150px 0 10px 15px; 	
}
p.lead {
	text-indent: 1em;
	margin-bottom:20px;
}
h2 {
	color: #006;
	font-size: 24px;
	border-left: #06F 12px solid;
	margin-bottom:30px;
	padding:2px 5px;
}
.section {
	margin-bottom:20px;
}
h3 {
	color: #006;
	font-size:18px;
	background-color:#9CF;
	border-bottom: #006 dotted 1px;
	border-top: #006 dotted 1px;
	background-color:#9CF; 
	padding: 5px;
	margin-bottom:8px;
}
p.time {
	color: #36F;
	font-weight: bold;
	margin-bottom:10px;
}

#footer {
	border-top: 2px solid #999;
	padding: 10px 0 5px 0;
	text-align:center;
}
#footer p{
	
}

2013-08-04

H01・C01回答

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>見出しと段落のレイアウト</title>
<link rel="stylesheet" href="css/0804-h01.css">
</head>
<body>
<div id="content">
<h1>見出しと段落のレイアウト</h1>
<p>同じ内容の文章であっても、その表現の仕方によって読者に与える印象は大きく変化します。文章のレイアウトを考えることはより正確に、より効果的に情報を伝えるためにとても重要なことです。</p>
<h2>見出しのレイアウト</h2>
<p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。</p>
<p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。</p>
<h2>段落のレイアウト</h2>
<p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p>
<p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p>
</div>
</body>
</html>


@charset "utf-8";
body,div,h1,h2,p {
	margin: 0;
	padding: 0;
}
body {
	font-size: 14px;
	color:#333;
	line-height: 1.5;
	font-family:
	  "Hiragino Kaku Gothic ProN",
	  Meiryo,
	  sans-serif;
}

#content {
	width: 500px;
	margin:30px;
}
h1 {
	font-size: 160%;
	color: #03C;
	background:#F0F8FF;
	border-top:8px solid #03C;
	border-bottom: 2px solid #999;
	padding: 5px 0 0 2px;
	
	margin-bottom: 10px;
}
h2 {
	font-size: 120%;
	color: #03C; 
  border-left: 5px solid #03C;
  border-bottom: 1px solid #999;
  background: #E6E6FA;
  margin: 10px 0;	
  padding: 2px 0 0 2px;
}
p {
	margin-bottom: 10px;
}

2013-08-02

復習（5）float Ｑ26回答

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Ｑ26回答</title>
<link rel="stylesheet" href="css/q26.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Homepage Title</h1>
<p>サブタイトルサブタイトルサブタイトル</p>
</div>
<div id="wrapper">
<div id="content">
<h2>コンテンツのタイトル</h2>
<p>
コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。
</p>
<p>
コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。
</p>
</div><!-- content -->
<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><a href="#">メニューのリンク5</a></li>
<li><a href="#">メニューのリンク6</a></li>
</ul>
</div><!-- nav -->
</div><!-- wrapper -->
<div id="footer">
<p><small>Copyright@AUTHOR NAME.All Rights Reserved</small></p>
</div><!-- footer -->
</div><!-- container -->
</body>
</html>


@charset "UTF-8";
body,div,h1,h2,p,ul,li,a{
  margin:0;
  padding:0;
}
a{
  text-decoration: none;
}
ul{
  list-style:none;
}
body{
  font-size: 14px;
  line-height: 1.5;
  color: #FFFFFF;
  font-family: 
  Hiragino Kaku Gothic ProN,
  Meiryo,
  sans-serif;
  background: url(../img/back_photo.jpg); 
}

#container {
  width:700px;
  margin: 0 auto;
}

#header {
  margin-bottom: 30px;
  padding: 50px 0;
}
#wrapper {
  width:700px;
  overflow: hidden;
}
#content {
  width:450px;
  float: left;
  margin-bottom: 30px;
}
#nav {
  width: 220px;
  float: right;
}
#footer {
  clear:both;
  border-top: 2px solid lightgreen;
}
h1 {
  font-size: 30px;
  margin-bottom: 5px;
}
h2 {
  font-size: 16px; 
  color: #000000;
  font-weight: bold;
  background: #98FB98;
  padding: 5px 10px;
  margin-bottom: 10px;
}
#footer p {
  color: #000000;
  padding-top: 10px;
}
#content p{
  padding-bottom: 10px;
  
}
#nav ul{
  overflow: hidden;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
}
#nav li{
  border-bottom: 1px solid #FFFFFF;
}

#nav ul li a{
  display: block;
  color: #FFFFFF;
  line-height:30px;
  padding-left: 10px;
}
a:hover{
  background:#00FFFF;
}

2013-07-29

復習（5）Float Q25の回答

Ｑ25回答

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/q25.css">
</head>
<body>
<div id="container">
<div id="blockA">ブロックＡ</div>
<div id="wrapper">
<div id="blockB">ブロックＢ</div>
<div id="blockC">ブロックＣ</div>
</div>
<div id="blockD">ブロックＤ</div>
</div>
</body>
</html>

@charset "UTF-8"
body,div {
  margin="0";
  padding="0";
}
body {
  font-size:16px;
  font-weight: bold;
  font-family: 
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
}
#container {
    width: 500px;
    margin: 30px;
}
#blockA {
  width: 500px;
  height: 50px;
  background:#ffd700;
  margin-bottom: 5px;
}
#wrapper {
  width: 500px;
  height: 50px;
  margin-bottom: 5px;
  overflow: hidden;
}
#blockB {
  width: 245px;
  height: 50px;
  background:#add8e6;
  margin-bottom: 5px;
  float: left;
}
#blockC {
  width: 245px;
  height: 50px;
  background:#98fb98;
  margin-bottom: 5px;
  float: right;
}
#blockD {
  width: 500px;
  height: 50px;
  background:#ffc0cb;
  clear: both;
}

2013-07-27

復習（５）Ｆｌｏａｔ　Ｑ24の回答

Ｑ24回答

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Q24回答</title>
<link rel="stylesheet" href="css/q24.css">
</head>
<body>
<div id="content">
<p class="sola1">
<img src="img/sola.jpg" width="200px" height="150px" src="空">
段落１のテキストです。
段落１のテキストです。
段落1のテキストです。
</p>
<p class="sola2">
段落２のテキストです。段落２のテキストです。
段落２のテキストです。段落２のテキストです。
段落２のテキストです。段落２のテキストです。
段落２のテキストです。
</p>
<p class="sola3">
<img src="img/sola.jpg" width="200px" height="150px" src="空">
段落３のテキストです。段落３のテキストです。段落３のテキストです。
</p>
<p class="sola4">
段落４のテキストです。段落４のテキストです。
段落４のテキストです。段落４のテキストです。
段落４のテキストです。段落４のテキストです
。段落４のテキストです。
</p>
</div>
</body>
</html>


@charset "UTF-8"
body,,p,img {
  margin: 0;
  padding: 0;
}
body {
  font-size: 17px;
  font-family:
   "Hiragino Kaku Gothic ProN",
   Meiryo,
   sans-serif;
   line-height:1.5;
   padding: 30px 0 0 30px;
}
#content {
  width: 380px;
  font-weight: bold;
  
}
p.sola1 {
  text-align: top;
}
p.sola1 img {
  float: left;
}
p.sola2 {
  clear: left;
  margin-bottom: 20px;
}
p.sola3 img {
  float: right;
}
p.sola4 {
  clear: right;
}

2013-07-26

復習（４）リストＱ23回答

Ｑ23回答

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Q23回答</title>
<link rel="stylesheet" href="css/q23.css">
</head>
<body>
<div id="nav">
<ul>
<li><a href="#" id="new">新着情報</a></li>
<li><a href="#" id="news">ニュース/お知らせ</a></li>
<li><a href="#" id="item">製品情報</a></li>
<li><a href="#" id="shop">店舗案内</a></li>
<li><a href="#" id="company">会社案内</a></li>
</ul>
</div>
</body>
</html>

@charset "UTF-8"
body,div,ul,li,a{
  margin: 0;
  padding: 0;
}
body {
  font-size: 16px;
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  width: 160px;
  list-style: none;
  margin-top: 30px;
}
li{
  margin: 10px;
}
a {
  width: 160px;
  text-decoration: none;
  font-weight: bold;
  color: #6495ed;
  border: 2px solid #6495ed;
  display: block;
  padding: 10px 0 10px 10px;
}
a:hover {
  background-color: #6495ed;
  color: #FFFFFF;
}

2013-07-25

復習(４)リスト　Ｑ22回答

Q22回答

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Ｑ22回答</title>
<link rel="stylesheet" href="css/q22.css">
</head>
<body>
<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>
</ul>
</div>
</body>
</html>


@charset "UTF-8"
body,div,ul,li,a,img {
  margin: 0;
  padding: 0;
}
body {
  font-size: 16px;
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
  width: 180px;
  border-bottom: 1px dotted #1e90ff;
  margin: 30px 0 0 50px;
  padding: 3px 0;
}
a {
  widows: 180px;
  text-decoration: none;
  font-weight: bold;
  border-top: 1px dotted #1e90ff;
  padding: 10px 0 10px 30px;
  display: block;
  background: url(../img/btn2.jpg) no-repeat left;
}

a:hover {
  color: #ff8c00;
}