実践演習
練習1
color、font-size、margin、padding、background-colorなどを使ってcssをつくりなさい。
【元の文章】
石垣島観光ガイド
石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。 沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、 1年を通じて平均気温は27度もあります。亜熱帯気候のため、 マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、 そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、 特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。
観光スポット
「 川平(かびら)湾」
石垣港から車で約20分
石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。
「宮良川(みやらがわ)のヒルギ林」
石垣港からバスで30分宮良橋で下車
巨大なマングローブ林(ヒルギ群落)があり、国の天然記念物に指定されているほど壮大です。
「底地(すくじ)ビーチ 」
川平湾から車で約10分
マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。
「フサキビーチ」
石垣港からバスで30分、宮良橋下車
島の西側にあるビーチで、西表(いりおもて)島に沈む美しいサンセットが見られるビーチとして有名です。
「米原海岸」
石垣空港より車で約30分
米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。
「マエザトビーチ」
石垣空港より車で約5分
ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。
【HTML】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>石垣島観光ガイド</title> <link rel="stylesheet" href="css/style.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> </div> </body> </html>
【CSS】
@charset "utf-8"; /* CSS Document */ *{ margin: 0px; padding: 0px; } body{ font-size: 0.85em; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "MS Pゴシック", sans-serif; line-height: 1.5; text-align: center; background: #d7ebff; color: #333333; background-color: #cbe7ff; } #container{ text-align: left; margin: 0px auto; padding: 10px 15px; height: auto; width: 800px; background-color: #ffffff; } #header{ height: 260px; width: 740px; margin: 0px 0px 16px 0px; background-image: url(../img/03.jpg); } h1{ font-size: xx-large; color: #0066cc; margin: 0px; padding: 10px 0px 0px; } p.lead{ font-size: small; line-height: 20px; text-indent: 1em; margin: 20px 0px; padding: 0px; } h2{ color: #003399; border-left: 8px solid #6699ff; letter-spacing: 0.3em; font-size: x-large; margin: 0 0 30px; padding: 0px 0px 0 10px; } h3{ font-size: medium; color: #000066; background: #d7ebff; margin: 0px 0px 10px; border-top: thin dotted #000066; border-bottom: this dotted #000066; border-right-style: none; border-left-style: none; } h4{ font-size: medium; color: #6699ff; margin: 0px; padding: 0px; } p{ font-size: small; margin: 10px 0px 20px; padding: 0px; }
授業では【header】をつくって、そこに画像をのせました。
できあがりはこんな感じです。
練習2
レイアウトに気をつけてつくりなさい。
【元の文章】
Cafe Cockeyolly
今月のおすすめ
きのこのオムライス
ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。
800円
シーフードスパゲッティシーフードスパゲッティ
バルサミコ風味
エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。
900円
Home
ニュース
メニュー
今月のおすすめ
オリジナル雑貨
マップ
メール
Copyright(c)2012 Cafe Cockeyolly
【HTML】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Cafe Cockeyolly</title> <link rel="stylesheet" href="css/style.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>
【CSS】
@charset "utf-8"; /* CSS Document */ *{ margin: 0; padding: 0; } body { font-family: sans-serif; line-height: 1.0; background-image: url(../img/05.jpg); background-repeat: repeat-y; } #container { width: 640px; padding: 20px 0 0 0; overflow: hidden; } #header { text-align: center; width: 150px; margin: 0 0 43px 0; } #content { width: 460px; float: right; margin: -125px 0 0 30px; } #content h2 { text-align: center; margin: 0 0 80px 0; } #content h3 { color: #7C533F; line-height: 1.3; border-left: 8px solid #DA8125; padding: 0 0 0 0.5em; margin: 0 0 10px 0; } #content p.photo { font-size: 0.95em; line-height: 1.5; margin: 0; } #content p.photo img { float: right; margin: 0 0 0 1em; } #sidebar { width: 150px; } #sidebar ul { list-style-type: none; margin: 0 0 0 18px; line-height: 2em; font-weight: bold; } #sidebar li a { color: #fff; text-decoration: none; } #sidebar ul li .this { color: #FF9; } div#footer { clear: both; } #footer address { color: #999; font-style: normal; font-size: 0.8em; text-align: center; margin: 0 0 0 180px; padding-top: 10px; border-top: 1px solid #999; } #content .price { margin: 10px 0px 60px; font-weight: bold;S text-align: right; }
【sidebar】の画像は以前やった、バナーやボタンのつくり方で作りました。
このページは【content】のみ【float: right;】指示です。
また【content】内のオムライスなどの画像は、HTML内ではpの前においているが、
回り込んで画面のようなレイアウトになっています。
★入力メモ★
- 【background:〜;】は背景にかかる色、画像、サイズなど全般をさす。【background-color:〜;】は色だけの指定だった場合。
- 画像を使用する場合、【Photoshop】をつかってサイズ変更など上手く編集するといい。
もし、どうしても画像のサイズが足りない場合は、同じ画像を反転して続けたりするのもあり。
この場合、【カンパスサイズ】を選んで【編集】→【変形】→【反転】。
ただし、これはレイヤーでないと自由に動かせないので注意。
- 普通、背景色が真っ白に文字色が真っ黒、というのは少ないらしい。大体が濃いグレーなどを使用。