演習課題6
実践演習課題H06
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="h06.css"> <title>建築散歩</title> </head> <body> <div id="container"> <div id="header"> <h1>フンデルトヴァッサー・ハウス</h1> <p class="head">ウィーンの市営住宅はこんなに元気だ!</p> </div> <div id="wrapper"> <div id="content"> <p class="photo"><img src="img/ph01.jpg" width="180" height="125" alt="フンデルトヴァッサー・ハウス">旅行中に、「フンデルトヴァッサー・ハウス」へ行ってきました。</p> <br> <p>ウィーンの旧市街を取り囲むリングシュトラッセ(環状道路)のやや外側、18〜19世紀に建てられた古風で静かな街並の中を歩いて行くと、この建物が現れます。まず目に飛び込んでくるのは、赤・黄・青・白の鮮やかな色で塗り分けられた外壁。その塗り分け方は、子供の落書きのようにぐにゃぐにゃと曲がっています。窓の大きさは不揃いで、しかも屋上には金色のネギ坊主のようなタワーが生えています。</p> <p>どこから見てもびっくりするような建物ですが、不思議と周囲の街並に溶け込んでいるのは、壁を覆うツタや、建物から直接生え出したように見える樹々のせいかもしれません。呆気に取られ、なんだか楽しくなってくるこの建物、実はウィーンの市営住宅なのです。</p><br> <p>この建物を作ったのは、ウィーンの画家・建築家フンデルト・ヴァッサー(1923-2000)。親日家で、作品に「百水(hudert wasser)」「豊和」と号することもあります。西欧近代の人工的な環境の在り方に疑問を呈し、「自然は全て曲線であり、直線に神は宿らない」と唱えて、建築物や絵画における直線を否定しました。</p> <p>1986年に完成したフンデルトヴァッサー・ハウスは、その理念を実現させたもので、彼にとっての最初の建築作品です。</p> <br> <p>フンデルトヴァッサー・ハウスは市営住宅なので内部の見学はできませんが、向かいのビル内にショップがあります。また、近くには彼の作品などを展示したクンスト・ハウス・ウィーンがあります。</p> <p>こちらもヴァッサーによって改装された建物です。日本国内では、大阪市扇町公園に隣接するキッズプラザ大阪や、大阪市環境事業局舞洲工場(ゴミ処理場)で彼の建築物を見ることができます。</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>©2013 The Architecture</small></p> </div> </div><!-- /container --> </body> </html>
@charset "UTF-8"; /*リセット*/ body,h,p,ul,li,img,div,a{ margin: 0; padding: 0; } ul{ list-style-type: none; } /*全体*/ body{ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.5; background: url(./img/bg-image.jpg)no-repeat; } #container{ width: 650px; height: auto; } /*ヘッダー*/ #header{ width: 480px; margin: 100px 0 30px 200px; line-height: 0.8; } #header h1{ font-family: "ヒラギノ明朝 ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif; font-weight: bold; color: #339933; font-size: 180%; letter-spacing: -1px; } .head{ font-size: 20px; color: #66CC33; } /*コンテンツ*/ #wrapper{ width: 660px; overflow: hidden; } #content{ width: 500px; float: right; } p img{ float: right; margin-left: 10px; } /*サイドバー*/ #sidebar { width: 120px; margin: 100px 0 0 20px; } /*フッター*/ #footer{ width: 500px; height: auto; clear: both; color: #99CCFF; border-top: 1px solid #99CCFF; margin-left: 160px; text-align: center; background: url(./img/bg-point.jpg)no-repeat; background-position: 375px 0; padding-bottom: 50px; }
ポイント
・フッターに背景画像があるからといってフッターに背景画像を指定するのではなく、#containerなどにフッターの背景画像を指定しても良い
・letter-spacingで文字の間隔を調整できる。
・ font-family:
"ヒラギノ明朝 ProN",
"HG明朝E",
"MS P明朝",
"MS 明朝",
serif;
を見出しなどに使うと良い(かも)