２カラムレイアウトと擬似クラス
卵料理カフェ Cockeyolly
卵料理カフェ Cockeyolly Home ニュース メニュー 今月のおすすめ オリジナル雑貨 マップ メール 今月のおすすめ きのこのオムライス ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。：800円 シーフードスパゲッティシーフードスパゲッティ バルサミコ風味 エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。：900円 (c)2015 卵料理カフェ Cockeyolly
ラップアラウンドで巻き戻す（body背景画像）
- Photoshopで作成
（1）Photoshopで新規画像を作成
（2）高さの値 34px の正円を新規レイヤーに 描く
（3）薄い色を塗る
（4）レイヤーを複製し濃い色を塗る
※透明部分をロックをしてから塗る
（5）自由変形で上のレイヤーの幅を狭くする
（6）レイヤーを結合する
（7）フィルター → その他 → スクロール
高さの半分の値をスクロールする
《index.html》
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>卵料理カフェ Cockeyolly</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1><img src="img/logo.gif" alt="卵料理カフェ Cockeyolly"></h1> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">ニュース</a></li> <li><a href="#">メニュー</a></li> <li class="this"><a href="#">今月のおすすめ</a></li> <li><a href="#">オリジナル雑貨</a></li> <li><a href="#">マップ</a></li> <li><a href="#">メール</a></li> </ul> </div><!-- /#header --> <div id="content"> <h2><img src="img/title.gif" alt="今月のおすすめ"></h2> <h3>きのこのオムライス</h3> <p><img src="img/photo01.jpg" alt="きのこのオムライス">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。<span class="price">800円</span></p> <h3>シーフードスパゲッティ<br> バルサミコ風味</h3> <p><img src="img/photo02.jpg" alt="シーフードスパゲッティバルサミコ風味">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。<span class="price">900円</span></p> </div><!-- /#content --> <div id="footer"> <p><small>(c)2015 卵料理カフェ Cockeyolly</small></p> </div><!-- /#footer --> </div><!-- /#container --> </body> </html>
《style.css》
@charset "utf-8"; /* reset ------------------------------------------------------------ */ html, body, div, h1, h2, h3, p, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } img { border: none; vertical-align: bottom; } /* fonts ------------------------------------------------------------ */ html { font-size: 62.5%; } /* =10px */ body { font-size: 16px; font-size: 1.6rem; } /* =16px */ h1 { font-size: 32px; font-size: 3.2rem; } h2 { font-size: 24px; font-size: 2.4rem; } h3 { font-size: 20px; font-size: 2.0rem; } p { font-size: 16px; font-size: 1.6rem; } ul { font-size: 16px; font-size: 1.6rem; } /* body ------------------------------------------------------------ */ body { background: #FFF url(../img/bg_img.gif) repeat-y; } /* layout ------------------------------------------------------------ */ #container { width: 670px; overflow: hidden; } #header { float: left; width: 170px; margin: 30px 0 0 15px; } #content { float: right; width: 480px; margin-top: 60px; } #footer { clear: both; margin-left: 160px; padding: 15px 0; text-align: center; border-top: #AAA dotted 1px; } /* #header ------------------------------------------------------------ */ h1 { margin: 0 0 50px 15px; } li { margin-bottom: 15px; } li a { color: #FFF; font-weight: bold; } li a:hover { color: #FF0; } li.this a { color: #FF0; } /* #content ------------------------------------------------------------ */ h2 { margin-bottom: 50px; text-align: center; } h3 { line-height: 1.2; margin-bottom: 15px; padding-left: 10px; color: #930; border-left: #B4761B solid 10px; } #content p { line-height: 1.5; margin-bottom: 50px; } #content p img { float: right; margin-left: 20px; } .price { font-weight: bold; } /* #footer ------------------------------------------------------------ */ small { font-size: 14px; font-size: 1.4rem; }
建築散歩
- 以下のように表示されるよう記述しなさい
建築散歩
フンデルトヴァッサー・ハウス
ウィーンの市営住宅はこんなに元気だ！
旅行中に、「フンデルトヴァッサー・ハウス」へ行ってきました。
ウィーンの旧市街を取り囲むリングシュトラッセ（環状道路）のやや外側、18〜19世紀に建てられた古風で静かな街並の中を歩いて行くと、この建物が現れます。まず目に飛び込んでくるのは、赤・黄・青・白の鮮やかな色で塗り分けられた外壁。その塗り分け方は、子供の落書きのようにぐにゃぐにゃと曲がっています。窓の大きさは不揃いで、しかも屋上には金色のネギ坊主のようなタワーが生えています。
どこから見てもびっくりするような建物ですが、不思議と周囲の街並に溶け込んでいるのは、壁を覆うツタや、建物から直接生え出したように見える樹々のせいかもしれません。呆気に取られ、なんだか楽しくなってくるこの建物、実はウィーンの市営住宅なのです。
この建物を作ったのは、ウィーンの画家・建築家フンデルト・ヴァッサー（1923-2000）。親日家で、作品に「百水（hudert wasser）」「豊和」と号することもあります。西欧近代の人工的な環境の在り方に疑問を呈し、「自然は全て曲線であり、直線に神は宿らない」と唱えて、建築物や絵画における直線を否定しました。
1986年に完成したフンデルトヴァッサー・ハウスは、その理念を実現させたもので、彼にとっての最初の建築作品です。
フンデルトヴァッサー・ハウスは市営住宅なので内部の見学はできませんが、向かいのビル内にショップがあります。また、近くには彼の作品などを展示したクンスト・ハウス・ウィーンがあります。
こちらもヴァッサーによって改装された建物です。日本国内では、大阪市扇町公園に隣接するキッズプラザ大阪や、大阪市環境事業局舞洲工場（ゴミ処理場）で彼の建築物を見ることができます。
ホーム
バックナンバー
© The Architecture
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>建築散歩</title> <link rel="stylesheet" href="style3.css"> </head> <body> <div id="container"> <div id="header"> <h1>建築散歩</h1> <h2>フンデルトヴァッサー・ハウス</h2> </div><!-- /#header --> <div id="wrapper"> <div id="content"> <h3>ウィーンの市営住宅はこんなに元気だ！</h3> <p>旅行中に、「フンデルトヴァッサー・ハウス」へ行ってきました。</p> <p>ウィーンの旧市街を取り囲むリングシュトラッセ（環状道路）のやや外側、18〜19世紀に建てられた古風で静かな街並の中を歩いて行くと、この建物が現れます。まず目に飛び込んでくるのは、赤・黄・青・白の鮮やかな色で塗り分けられた外壁。その塗り分け方は、子供の落書きのようにぐにゃぐにゃと曲がっています。窓の大きさは不揃いで、しかも屋上には金色のネギ坊主のようなタワーが生えています。<br> どこから見てもびっくりするような建物ですが、不思議と周囲の街並に溶け込んでいるのは、壁を覆うツタや、建物から直接生え出したように見える樹々のせいかもしれません。呆気に取られ、なんだか楽しくなってくるこの建物、実はウィーンの市営住宅なのです。</p> <p>この建物を作ったのは、ウィーンの画家・建築家フンデルト・ヴァッサー（1923-2000）。親日家で、作品に「百水（hudert wasser）」「豊和」と号することもあります。西欧近代の人工的な環境の在り方に疑問を呈し、「自然は全て曲線であり、直線に神は宿らない」と唱えて、建築物や絵画における直線を否定しました。<br> 1986年に完成したフンデルトヴァッサー・ハウスは、その理念を実現させたもので、彼にとっての最初の建築作品です。</p> <p>フンデルトヴァッサー・ハウスは市営住宅なので内部の見学はできませんが、向かいのビル内にショップがあります。また、近くには彼の作品などを展示したクンスト・ハウス・ウィーンがあります。<br> こちらもヴァッサーによって改装された建物です。日本国内では、大阪市扇町公園に隣接するキッズプラザ大阪や、大阪市環境事業局舞洲工場（ゴミ処理場）で彼の建築物を見ることができます。</p> </div><!-- /#content --> <div id="sidebar"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">バックナンバー</a></li> </ul> </div><!-- /#sidebar --> </div><!-- /#wrapper --> <div id="footer"> <p><small>© The Architecture</small></p> </div><!-- /#footer --> </div><!-- /#container --> </body> </html>
@charset "utf-8"; /* reset */ html, body, div, h1, h2, h3, p, ul, li, small { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } /* body */ body { font-size: 16px; color: #333; background: #FFF url(img/bg-image.jpg) no-repeat left top; } /* layout */ #container { width: 640px; } #header { margin: 50px 0 16px 220px; } #wrapper { overflow: hidden; } #content { float: right; width: 480px; } #sidebar { float: left; width: 150px; } #footer { background: #0FF; margin-left: 160px; padding: 10px 0 50px 0; text-align: center; border-top: 1px dotted #AAA; background: url(img/bg-point.jpg) no-repeat right bottom; } /* item */ #header h1 { visibility: hidden; } #header h2 { font-family: "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; color: #753E4F; } #content h3 { margin:0 0 20px 62px; color: #C1A872; } #content p { line-height: 1.7; margin-bottom: 16px; } #content img { float: right; margin: 0 0 10px 10px; } #sidebar ul { margin: 180px 0 0 16px; } #sidebar li { font-weight: bold; margin-bottom: 10px; } #sidebar a { color: #526182; } #sidebar a:hover { text-decoration: underline; }
