■
2012年12月08日
実践演習(1)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>石垣島観光ガイド</title> <link rel="stylesheet" href="css/style1.css" media="screen,print"> </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> </body> </html>
@charset "UTF-8"; * { margin: 0; padding: 0; } body { font-size:1.0em; font-family:sans-serif; line-height: 1.0; text-align: center;/*行揃えの位置・均等割付を指定する 中央揃え*/ background-color: #bde2fd; } #container { width: 800px; height: auto; margin: 10px auto; padding: 15px; text-align: left; background-color: #fff; } h1 { font-size: 2.0em; color: #06c; margin: 0 0 20px 0; padding: 10px 0 0; } p.lead { text-indent: 1em; margin :0 2.0em 25px 2.0em; } h2 { color: #039; border-left: 8px solid #69f; letter-spacing: 0.3em;/*文字の間隔を指定する*/ font-size: 1.6em; margin: 0 0 30px; padding 0 0 010px; } h3 { font-size: 1.2em; color: #006; background: #d7ebff; margin: 0 0 20px 0; padding: 5px; border-top:thin dotted #000066;/*上ボーダーのスタイル・太さ・色を指定に白い点線?*/ border-bottom: thin dotted #000066; border-right-style: none; border-left-style: none; } h4 { font-size: medium; color: #6699ff; margin: 5px 0 0 0; } p { color: #333; font-size: 0.875; line-height: 1.6; margin: 10px 0 20px 1em; }
レイアウト
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Cafe Cockeyolly</title> <link rel="stylesheet" href="css/style2.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <h1><img src="img/logo.gif" width="82" height="78" alt="おいしい卵料理のレストラン Cockyolly"></h1> </div> <div id="content"> <h2><img src="img/title.gif" width="231" height="49" alt="今月のおすすめ"></h2> <h3>きのこのオムライス</h3> <p class="photo"><img src="img/photo01.jpg" width="185" height="129" alt="きのこのオムライス">ふんわりのアツアツオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムライスには新鮮な特選地卵を使って、ほんのり甘く仕上げます。</p> <p class="price">800円</p> <h3>シーフードスパゲッティシーフード<br>パルサミコ風味</h3> <p class="photo"><img src="img/photo02.jpg" width="184" height="130" alt="シーフードスパゲッティシーフードスパゲッティ<br />バルサミコ風味">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。</p> <p class="price">900円</p> </div> <div id="sidebar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">ニュース</a></li> <li><a href="#">メニュー</a></li> <li><a href="#" class="this">今月のおすすめ</a></li> <li><a href="#">オリジナル雑貨</a></li> <li><a href="#">マップ</a></li> <li><a href="mailto:xxx@xxxx.com">メール</a></li> </ul> </div> <div id="footer"> <address>Copyright(c)2012 Cafe Cockeyolly</address> </div> </div> </body> </html>
@charset "UTF-8"; * { margin: 0; padding: 0; } body { font-family: sans-serif; line-height: 1.0; background-image: url(../img/02.jpg); background-repeat: repeat-y; } div#container { width: 640px; padding: 20px 0 0 0; } div#header{ text-align: center; width: 150px; margin: 0 0 43px 0; } div#content{ width:460px; float: right; margin: -125px 0 0 30px; } div#content h2 { text-align: center; margin: 0 0 80px 0; } div#content h3 { color: #7c533f; line-height: 1.3; border-left: 8px solid #da8125; padding: 0 0 0 0.5em; margin: 0 0 10px 0; } div#content p.photo{ font-size: 0.95em; line-height:1.5; margin: 0; } div#content p.photo img { float: right; margin: 0 0 0 1em; } div#sidebar { width: 150px; } div#sidebar ul{ list-style-type: none; margin: 0 0 0 18px; line-height: 2em;/*縦メニューの間*/ font-weight: bold; } div#sidebar li a { color:#fff; text-decoration: none; } div#sidebar ul li .this { color:#ff9; } div#footer { clear: both; } div#footer address { color:#999; font-style:normal; font-size: 0.8em; text-align: center; margin: 0 0 0180px; padding-top: 10px; border-top: 1px solid #999; } #content .price { margin: 10px 0px 60px; font-weight: bold; text-align: right; }