<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>H02C02</title>
<linkrel="stylesheet"href="CSS/H02C02.css">
</head>
<body>
<divid="container">
<divid="header">
<h1>石垣島観光ガイド</h1>
</div>
<pclass="lead">
石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に
大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に
近く南に位置します。気候は亜熱帯気候で、1年を通じて平均
気温は27度もあります。亜熱帯気候のため、マングローブの森
や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何より
も、鮮やかなコバルトブルーの海岸は、多くの観光客をひき
つけ、特にダイバーやシュノーケリングを楽しむ人にとっては
格好の場所になっています。
</p>
<h2>観光スポット</h2>
<divclass="section">
<h3>「 川平(かびら)湾」</h3>
<pclass="time">石垣港から車で約20分</p>
<p>
石垣を代表する景勝地で、エメラルド色の
サンゴ礁と黒真珠の養殖でよく知られて
います。 潮の流れが早いため、遊泳は禁止
されています。
</p>
</div>
<divclass="section">
<h3>「宮良川(みやらがわ)のヒルギ林」</h3>
<pclass="time">石垣港からバスで30分宮良橋で下車</p>
<p>
巨大なマングローブ林(ヒルギ群落)があり、
国の天然記念物に指定されているほど壮大です。
</p>
</div>
<divclass="section">
<h3>「底地(すくじ)ビーチ 」</h3>
<pclass="time">川平湾から車で約10分</p>
<p>
マリンスポーツが楽しめ、マンタが見られる
ことから、ダイバーに人気があります。
</p>
</div>
<divclass="section">
<h3>「フサキビーチ」</h3>
<pclass="time">石垣港からバスで30分、宮良橋下車</p>
<p>
島の西側にあるビーチで、西表(いりおもて)島
に沈む美しいサンセットが見られるビーチとして有名です。
</p>
</div>
<divclass="section">
<h3>「米原海岸」</h3>
<pclass="time">石垣空港より車で約30分</p>
<p>
米原キャンプ場が隣接していて、ビーチパーティ
が楽しめます。潮の流れが早いため、遊泳は禁止
されています。
</p>
</div>
<divclass="section">
<h3>「マエザトビーチ」</h3>
<pclass="time">石垣空港より車で約5分</p>
<p>
ホテル内にあるリゾートビーチですが、宿泊者
以外でも利用可能です。ファミリー向けリゾート地
で、 シュノーケルのレンタルもあります。
</p>
</div>
<divid="footer">
<small>Copyright 2013 xxx All Right Researved.</small>
</div>
</div>
</body>
</html>
@charset "UTF-8";
body, div, h1, h2, h3, p {
margin: 0;
padding: 0;
}
body {
font-family:
"Hiragino Kaku Gothic Pro",
Meiryo,
sans-serif;
background-color: #D3EBFF;
}
#header, h2, p{
margin-bottom: 20px;
}
#container {
width: 850px;
padding: 16px;
margin: 20px auto;
background-color: #ffffff;
}
#header {
height: 200px;
background-image: url(../img/02headerimg.jpg);
background-repeat:: no-repeat;
background-position: 0px -100px ;
border-radius: 10px;
position: relative;
}
h1 {
color: #ffffff;
padding: 0px 562px 0px 16px;
letter-spacing: 2px;
background-color: #001C90;
position: absolute;
top: 120px;
}
p.lead {
text-indent: 1em;
}
h2 {
color: #001C90;
border-left: 10px solid #4194FF;
padding-left: 10px;
letter-spacing: 3px;
line-height: 35px;
}
h3 {
color: #000080;
border-top: dotted 2px #000080;
border-bottom: dotted 2px #000080;
background-color: #D3EBFF;
padding: 3px 0 3px 5px;
margin-bottom: 10px;
}
p.time {
color: #4194FF;
font-weight: bold;
margin-bottom: 10px;
}
#footer {
text-align: center;
padding-top: 15px;
border-top: 2px solid #c0c0c0;
color: #c0c0c0;
}
<!doctype html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>H03C03</title>
<linkrel="stylesheet"href="css/H03C03.css">
</head>
<body>
<divid="container">
<divid="main">
<h1>ガラスの靴の持ち主を捜しています!</h1>
</div>
<divid="lead">
<imgsrc="img/03/b_1.gif"alt="川崎アゼリア
・オープン懸賞 パソコンで応募する方は">
<p>下記の「応募規約」、「個人情報のお取り扱い
について」をお読みいただき、ご同意いただける
方は「はい」をクリックし、応募フォームにお進み
ください。
</p>
</div>
<divid="content">
<h2>【応募規約】</h2>
<ul>
<li>○パソコンでのご応募は、お一人様一回限り
(複数ご応募いただいた場合は最終応募のみ有効)
とさせていただきます。
</li>
<liclass="rice">※但し、郵便ハガキでのご応募は、
ハガキ1通を1口として、お一人様何口でもご応募
できます。
</li>
<li>○商店街で同時期に行われる他のキャンペーン
と重複して当選することはできません。
</li>
<li>○当選後の権利譲渡、換金はできません。
</li>
<li>○応募の際の必要事項に、不備や虚偽があった
場合は、無効になります。
</li>
<li>○ご応募は日本国内在住の方に限らせていただきます。
</li>
<li>○応募受付の確認、抽選結果に関するお問合せ
には、お受けいたしかねますのでご了承ください。
</li>
<li>○景品の"ガラスの靴"は、11月17日から12月25日
まで商店街内(サン広場)に展示した靴となりますので、
予めご了承ください。また、サイズは23.5cmとなります。
</li>
</ul>
<h2>【個人情報のお取扱いについて】</h2>
<p>
ご応募にあたり、ご記入いただいた個人情報
(郵便番号、住所、氏名、電話番号、年齢)は、
当社にて適切に管理し、ご当選の場合の景品
受け渡し、及び個人を識別できない統計情報
として、応募状況の傾向把握に利用します。
当社は、上記の目的範囲内で、個人情報の
取り扱いを外部の第三者に委託することが
あります。この場合、個人情報の漏洩等が
無いよう、業務委託契約に基づく適切な管理を
行います。
</p>
<h2>【個人情報のお取扱いについて】</h2>
<p><ahref="#">(川崎アゼリアプライバシーポリシー)</a></p>
</div>
<divid="apply">
<imgsrc="img/03/b_2.gif"alt="上記の内容に同意して応募しますか?">
<divid="wrapper">
<divid="yes">
<ahref="#"><imgsrc="img/03/b_yes.gif"alt="はい"
width="72"height="31"></a>
</div>
<divid="no">
<ahref="#"><imgsrc="img/03/b_no.gif"alt="いいえ"
width="72"height="31"></a>
</div>
</div>
</div>
<divid="footer">
</div>
</div>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
body, div, h1, h2, p, ul, li {
margin: 0;
padding: 0;
}
body {
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
color: #721911;
}
h1 {
visibility: hidden;
}
p{
font-size: 14px;
}
h2 {
text-indent: -20px;
font-size: 16px;
padding-top: 20px;
padding-bottom: 5px;
}
ul {
list-style: none;
font-size: 12px;
}
li {
text-indent: -1em;
}
li.rice{
margin-left: 2em;
}
#container{
width: 634px;
margin: 0 auto;
}
#main{
height: 445px;
background-image: url(../img/03/main.gif);
background-repeat: no-repeat;
background-position: center top;
}
#lead, #content ,#apply{
background-image: url(../img/03/bg.gif);
}
#lead{
padding: 30px 92px 0px 92px;
}
#content{
padding: 0 40px 20px 50px;
}
#apply{
text-align: center;
padding-bottom: 20px;
}
#wrapper{
margin: 0 auto;
padding: 10px;
width: 164px;
height: 31px;
overflow: hidden;
}
#yes {
width: 72px;
height: 31px;
float: left
}
#no {
width: 72px;
height: 31px;
float: right
}
#footer{
height: 96px;
background-image: url(../img/03/address.gif);
background-repeat: no-repeat;
background-position: center top;
}
<!doctype html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>H04C04</title>
<linkrel="stylesheet"href="css/H04C04.css"media="all">
</head>
<body>
<divid="container">
<divid="header">
<h1>卵料理カフェ Cockeyolly</h1>
</div>
<divid="content">
<h2><imgsrc="img/04/title.gif"alt="今月のおすすめ"></h2>
<h3>きのこのオムライス</h3>
<pclass="img"><imgsrc="img/04/photo01.jpg"alt="きのこのオムライス">
ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。
オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。:800円
</p>
<h3>シーフードスパゲッティ
バルサミコ風味</h3>
<pclass="img"><imgsrc="img/04/photo02.jpg"alt="シーフードスパゲッティバルサミコ風味">
エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と
生クリームで作ったさっぱりソースをお楽しみください。:900円
</p>
</div>
<divid="nav">
<ul>
<li><ahref="#">Home</a></li>
<li><ahref="#">ニュース</a></li>
<li><ahref="#">メニュー</a></li>
<li><ahref="#">今月のおすすめ</a></li>
<li><ahref="#">オリジナル雑貨</a></li>
<li><ahref="#">マップ</a></li>
<li><ahref="#">メール</a></li>
</ul>
</div>
<divid="footer">
<small>©2013 卵料理カフェ Cockeyolly</small>
</div>
</div>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
body, div, h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
}
body{
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
#container{
width: 600px;
margin: 20px auto;
background-image: url(../img/04/bg_img.gif);
background-repeat: repeat-y;
overflow: hidden;
}
#header{
width: 160px;
height: 120px;
background-image: url(../img/04/logo.gif);
background-repeat: no-repeat;
background-position: 30px 20px;
}
#content{
width: 440px;
float:right;
margin: -120px 0 0 0;
}
#nav{
width: 160px;
}
#footer{
clear: both;
margin-left: 160px;
border-top: 2px solid #C8C8C8;
color: #C8C8C8;
text-align: center;
}
h1 {
visibility: hidden;
}
h2 {
text-align: center;
margin-top: 10px;
margin-bottom: 65px;
}
h3 {
border-left: 8px solid #D98200;
color: #6E4C44;
padding-left: 10px;
margin-bottom: 20px;
margin-left: 16px;
}
p {
margin-bottom: 80px;
margin-left: 16px;
}
p.img img{
float: right;
margin-left: 1em;s
}
ul {
list-style: none;
padding: 10px 0 0 15px;
}
a {
text-decoration: none;
}
li {
line-height: 2em;
font-weight: bold;
}
li a:link, li a:visited{
color: #ffffff;
}
li a:hover, li a:active{
color: #f5f04b;
}
<!doctype html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>H05C05</title>
<linkrel="stylesheet"href="css/H05C05.css"media="all">
</head>
<body>
<divid="container">
<divid="header">
<h1>provence</h1>
</div>
<divid="wrapper">
<divid="content">
<p><imgsrc="img/05/illust.gif"alt=""width="250"height="196">
プロヴァンス(la Provence)は、フランス革命以前のフランスに置かれていた州のひとつであり、フランスの南東部に位置する。フランス王国併合前(15世紀末)にあった独立国(プロヴァンス伯爵領)の名前でもある。「プロヴァンス」の名称は、古代ローマ時代の属州(プロウィンキア、Provincia)であったことにちなみ、プロヴァンス語で"Provenco"や"Provenca"などとも呼ぶ。プロヴァンスの名は現在でも特に観光上の観点から親しまれている。
地域の区分としては、ローヌ川の左岸(東岸)とヴァール川の右岸とデュランス川の南側で区切られた一帯であり、現在の地域圏でいえばプロヴァンス=アルプ=コート・ダジュール地域圏の大部分に当たる。
</p>
</div>
<divid="nav">
<ul>
<liid="home"><ahref="#"><span>Home</span></a></li>
<liid="about"><ahref="#"><span>About</span></a></li>
<liid="product"><ahref="#"><span>Product</span></a></li>
<liid="shop"><ahref="#"><span>Shop</span></a></li>
<liid="access"><ahref="#"><span>Access</span></a></li>
<liid="contact"><ahref="#"><span>Contact</span></a></li>
</ul>
</div>
</div>
<divid="footer">
<p><small>©provence</small></p>
</div>
</div>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
body, div, h1, p, ul, li, img{
margin: 0;
padding: 0;
}
body{
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
color: #696969;
}
#container{
width: 700px;
margin: 20px auto;
}
#header{
width: 700px;
height: 120px;
background-image: url(../img/05/header.gif);
background-repeat: no-repeat;
margin-bottom: 20px;
}
#wrapper{
width: 700px;
overflow: hidden;
margin-bottom: 20px;
}
#content{
width: 480px;
float:right;
}
#nav{
width: 200px;
}
#footer{
clear: both;
width: 700px;
height: 60px;
background-image: url(../img/05/footer.gif);
}
h1 {
padding: 40px 0 0 20px;
color: #FFFFFF;
font-family:
Georgia,
"Times New Roman",
Times,
serif;
}
img{
float: right;
margin-left: 10px;
}
ul {
list-style: none;
}
li {
margin-bottom: 10px;
}
span {
visibility: hidden;
}
a {
width: 200px;
height: 50px;
text-decoration: none;
display: block;
}
li#home{
background:url(../img/05/nav_bg001.gif) no-repeat;
}
li#about{
background:url(../img/05/nav_bg002.gif) no-repeat;
}
li#product{
background:url(../img/05/nav_bg003.gif) no-repeat;
}
li#shop{
background:url(../img/05/nav_bg004.gif) no-repeat;
}
li#access{
background:url(../img/05/nav_bg005.gif) no-repeat;
}
li#contact{
background:url(../img/05/nav_bg006.gif) no-repeat;
}
#footer p{
text-align: center;
color: #ffffff;
padding: 20px 0 0 0;
}