■ - Webマスターへの道

css09課題　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>川崎アゼリア</title>
<style type="text/css">
body {
	color: #300;
	font-size: 0.8em;
	font-family:
　　　　"ヒラギノ角ゴ Pro W3",
　　　　"Hiragino Kaku Gothic Pro",
　　　　"Hiragino Kaku Gothic Pro W3",
　　　　"メイリオ",
　　　　Meiryo,
　　　　Osaka,
　　　　"ＭＳ Ｐゴシック",
　　　　"MS PGothic",
　　　　sans-serif;
	
	margin: 0;
	padding: 0;
	background-color: #FFF;
}
#container {
	
	width: 600px;
	height: 1050px;
	padding: 0 0 0 0px;
	margin:0 auto;
	
	
	background-color:#FFF;
	
}
#mainphoto{
    width: 600px;
	height:460px; 	
	
	
	}
#content{
   width:600px;
   height:500px;
   margin-left:0px;
   background-color:#FFF;	
	
	}
h1,h2,h3,h4,p{
   	margin:5px;
	
	}
	
#yes{
 width:100px;
 height:30px;		
　margin:10px 100px;　	
	}
#no{
 width:100px;
 height:30px;		
　margin:10px 100px;　
 float:left;	
	}		
#footer{
  width:600px;
  height:100px;
  	
  background-color:red;
  
	}				
</style>
</head>

<body>
<div id="container"><!--コンテナ-->
<div id="mainphoto"><!--始メインフォト-->
<h1><img src="images/main.gif"alt="ガラスの靴の持ち主を探しています"></h1></div><!--メインフォト完-->
<div id="content"><!--コンテント-->
<h2><img src="images/b_1.gif"alt="川崎アゼリア・オープン懸賞、パソコンでご応募する方は"></h2>
<p>下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、<br>
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</p>
<h3>【応募規約】</h3>

<ul>
    <li>パソコンでのご応募は、お一人様一回限り（複数ご応募いただいた場合は最終応募のみ有効）とさせていただきます。
    ※但し、郵便ハガキでのご応募は、ハガキ１通を１口として、お一人様何口でもご応募できます。</li>
    <li>川崎アゼリアで同時期に行われる他のキャンペーンと重複して当選することはできません。</li>
    <li>当選後の権利譲渡、換金はできません。</li>
    <li>応募の際の必要事項に、不備や虚偽があった場合は、無効になります。</li>
    <li>ご応募は日本国内在住の方に限らせていただきます。</li>
    <li>応募受付の確認、抽選結果に関するお問合せには、お受けいたしかねますのでご了承ください。</li>
    <li>景品の”ガラスの靴”は、11月17日から12月25日まで川崎アゼリア街内（サンライト広場）に展示した靴となりますので、
予めご了承ください。また、サイズは23.5ｃｍとなります。</li>
</ul>
<h3>【個人情報のお取扱いについて】</h3>

<p class="aa">ご応募にあたり、ご記入いただいた個人情報（郵便番号、住所、氏名、電話番号、年齢）は、
当社にて適切に管理し、ご当選の場合の景品受け渡し、及び個人を識別できない統計情報として、応募状況の
傾向把握に利用します。当社は、上記の目的範囲内で、個人情報の取り扱いを外部の第三者に委託することがあります。
この場合、個人情報の漏洩等が無いよう、業務委託契約に基づく適切な管理を行います。</p>
<h3>【個人情報のお取扱いについて】</h3>

<a href="#" class="link">（川崎アゼリアプライバシーポリシー）</a>
<img src="images/b_2.gif"><br>

<img src="images/b_yes.gif">
<img src="images/b_no.gif">


</div><!--コンテント終-->
<div id="footer"><img src="images/footer.gif"></div>
</div><!--コンテナ終-->
</body>
</html>

問題点　　下段の「はい」「いいえ」の位置がうまくいかない？？？

CSS08課題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style type="text/css">
body {
	color: #333;
	font-size: 0.8em;
	font-family:
　　　　"ヒラギノ角ゴ Pro W3",
　　　　"Hiragino Kaku Gothic Pro",
　　　　"Hiragino Kaku Gothic Pro W3",
　　　　"メイリオ",
　　　　Meiryo,
　　　　Osaka,
　　　　"ＭＳ Ｐゴシック",
　　　　"MS PGothic",
　　　　sans-serif;
	
	margin: 0;
	padding: 0;
	background-color: #FFF;
}
#container {
	height: 950px;
	width: 900px;
	padding: 0 0 0 0px;
	background-color:skyblue;
	
}
#content{
   width:850px;
   height:950px;
   margin-left:25px;
   background-color:#FFF;	
	
	}
h1,h2,h3,h4,p{
   	margin:10px;
	
	}
h3{
  color:blue;	
  background-color:skyblue;
  border:solid;	
  line-height:1.8em;
	}
h4{
  color:skyblue;	
	
	}			
</style>
</head>

<body>
<div id="container">
<div id="content">
<h1>石垣島観光ガイド</h1>
<p>石垣島は八重山諸島の中で一番大きな島で、沖縄で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>

<h3>「唐人墓（とうじんばか）」</h3>
<h4>石垣空港より富崎観音堂方面へ車で15分</h4>

<p>19世紀中頃に、中国のアモイからカリフォルニア行きの船に乗せられて死んでしまった128人の中国の人を悼み、琉球特有のお墓です。</p>

<h3>「明石パラワールド」</h3>
<h4>石垣市街地より車で45分</h4>

<p>島の北方で水牛などの牧場が広がる地域に1997年にできました。素晴らしい景観を見ながら、 パラグライダーを楽しむことができます。</p>
</div>
</id>
</body>
</html>

css07課題です. 子孫セレクタはホント、奥が深いな！
少し時間あくと忘れるからね！！！要注意

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インテリアショップ a Interior</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen, print">
</head>
<body>
<div id="container">
<div id="main">
<h1><a href="#">インテリアショップ </a></h1>
<h2><a href="#"><img src="images/info.gif" alt="インフォメーション" 
title="インフォメーション" width="398" height="58" /></a></h2>
<p>インテリアショップ「a Interior」での商品入荷情報、イベント、HPの更新など</p>
<dl>
<dt>2012年4月27日</dt>
<dd>復刻版の商品が再入荷しました</dd>
<dt>2012年4月26日</dt>
<dd>ティーカップが入荷しました</dd>
<dt>2012年4月25日</dt>
<dd>オープン　家具・新商品入荷しました</dd>
</dl>
<h3><img src="images/cup.jpg" alt="" title="" width="400" height="121" /></h3>
<h2><a href="#"><img src="images/concept.gif" alt="コンセプト" title="コンセプト" width="398" height="50" /></a></h2>
<p>インテリアについての「想い」を感じてください</p>
<h2><a href="#"><img src="images/shop.gif" alt="店舗情報" title="店舗情報" width="398" height="54" /></a></h2>
<p>店内のイメージ写真と会社案内</p>
<h2><a href="#"><img src="images/products.gif" alt="商品紹介" title="商品紹介" width="398" height="55" /></a></h2>
<p>家具・雑貨をはじめとした取り扱い商品の一部をご紹介しています</p>
<h2><a href="#"><img src="images/access.gif" alt="アクセスマップ" title="アクセスマップ" width="398" height="50" /></a></h2>
<p>「a Interior」までの交通機関のご案内です</p>
<h2><a href="#"><img src="images/blog.gif" alt="ブログ" title="ブログ" width="398" height="54" /></a></h2>
<p>スタッフの「ブログ」です。</p>
<h2><a href="#"><img src="images/contact_us.gif" alt="お問い合せ" title="お問い合せ" width="391" height="51" /></a></h2>
<p>インテリアや雑貨・家具、その他に関するお問い合せはこちらまで</p>
</div>
<div id="footer">
<ul>
<li><a href="#">HOME</a>｜</li>
<li><a href="#">INFO</a>｜</li>
<li><a href="#">CONCEPT</a>｜</li>
<li><a href="#">SHOP</a>｜</li>
<li><a href="#">PRODUCTS</a>｜</li>
<li><a href="#">ACCESS</a>｜</li>
<li><a href="#">BLOG</a>｜</li>
<li><a href="#">CONTACT</a></li>
</ul>
<address>
Copyright(c)2012 インテリアショップ a Interior
</address>
</div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

body {
	color: #333;
	font-size: 0.8em;
	font-family:
　　　　"ヒラギノ角ゴ Pro W3",
　　　　"Hiragino Kaku Gothic Pro",
　　　　"Hiragino Kaku Gothic Pro W3",
　　　　"メイリオ",
　　　　Meiryo,
　　　　Osaka,
　　　　"ＭＳ Ｐゴシック",
　　　　"MS PGothic",
　　　　sans-serif;
	border-style: none;
	margin: 0;
	padding: 0;
	background-color: #D8E9D7;
}
#container {
	height: auto;
	width: 660px;
	padding: 0 0 0 187px;
	background-color: #FFF;
	background-image: url(images/side_image.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
h1, h2, h3, p, a, ul, li, img, address {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	
}
ul {
	list-style-type: none;
}
#main h1 {
	font-size: 1.0em; 
	font-weight: normal;
	margin-top: 0px;
	padding-top: 5px;
}
#main h1 a:link {
	color: #666;
	text-decoration: none;
}
#main h1 a:visited {
	color: #666;
	text-decoration: none;
}
#main h1 a:hover {
	color: #900;
	text-decoration: underline;
}
#main h2 {
	margin-top: 30px;
	margin-bottom: 10px;
}
#main h3 {
	margin-top: 15px;
	margin-bottom: 40px;
}
#main dl {
	margin: 10px 0 0 0;
	width: 400px;
	letter-spacing: 0.1em;
}
#main dt {
	float: left;
}
#main dd {
	color: #78AA8F;
	padding-left: 7em;
}
#footer {
	color: #666;
	padding-bottom: 20px;
	padding-top: 40px;
}
#footer li {
	display: inline;
	letter-spacing: 0.1em;
}
#footer li a:link {
	color: #666;
	text-decoration: none;
}
#footer li a:visited {
	color: #666;
	text-decoration: none;
}
#footer li a:hover {
	color: #900;
	text-decoration: underline;
}
#footer address {
	color: #333;
	font-size: 0.75em;
	font-style: normal;
	letter-spacing: 0.1em;
	text-align:center;
	margin: 25px 40px 0 0;
}