2カラムレイアウト(2)
2カラムレイアウト
- 以下のように表示されるよう記述しなさい
建築散歩 フンデルトヴァッサー・ハウス ウィーンの市営住宅はこんなに元気だ! 旅行中に、「フンデルトヴァッサー・ハウス」へ行ってきました。 ウィーンの旧市街を取り囲むリングシュトラッセ(環状道路)のやや外側、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="css/style.css"> </head> <body> <div id="container"> <div id="header"> <h1>フンデルトヴァッサー・ハウス</h1> <p>ウィーンの市営住宅はこんなに元気だ!</p> </div><!-- /#header --> <div id="wrapper"> <div id="content"> <p><img src="img/ph01.jpg" width="180" height="125" alt="フンデルトヴァッサー・ハウス">旅行中に、「フンデルトヴァッサー・ハウス」へ行ってきました。</p> <p>ウィーンの旧市街を取り囲むリングシュトラッセ(環状道路)のやや外側、18〜19世紀に建てられた古風で静かな街並の中を歩いて行くと、この建物が現れます。まず目に飛び込んでくるのは、赤・黄・青・白の鮮やかな色で塗り分けられた外壁。その塗り分け方は、子供の落書きのようにぐにゃぐにゃと曲がっています。窓の大きさは不揃いで、しかも屋上には金色のネギ坊主のようなタワーが生えています。<br> どこから見てもびっくりするような建物ですが、不思議と周囲の街並に溶け込んでいるのは、壁を覆うツタや、建物から直接生え出したように見える樹々のせいかもしれません。呆気に取られ、なんだか楽しくなってくるこの建物、実はウィーンの市営住宅なのです。</p> <p>この建物を作ったのは、ウィーンの画家・建築家フンデルト・ヴァッサー(1923-2000)。親日家で、作品に「百水(hudert wasser)」「豊和」と号することもあります。西欧近代の人工的な環境の在り方に疑問を呈し、「自然は全て曲線であり、直線に神は宿らない」と唱えて、建築物や絵画における直線を否定しました。<br> 1986年に完成したフンデルトヴァッサー・ハウスは、その理念を実現させたもので、彼にとっての最初の建築作品です。</p> <p>フンデルトヴァッサー・ハウスは市営住宅なので内部の見学はできませんが、向かいのビル内にショップがあります。また、近くには彼の作品などを展示したクンスト・ハウス・ウィーンがあります。<br> こちらもヴァッサーによって改装された建物です。日本国内では、大阪市扇町公園に隣接するキッズプラザ大阪や、大阪市環境事業局舞洲工場(ゴミ処理場)で彼の建築物を見ることができます。</p> </div><!-- /#content --> <div id="nav"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">バックナンバー</a></li> </ul> </div><!-- /#nav --> </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, 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; } /* body */ body { font-size: 16px; background: url(../img/bg-image.jpg) no-repeat left top; } /* layout */ #container { width: 640px; } #header { margin: 80px 0 0 220px; } #wrapper { overflow: hidden; } #content { float: right; width: 480px; } #nav { float: left; width: 120px; margin: 160px 0 0 20px; } #footer { clear: both; height: 60px; color: #666; text-align: center; margin-left: 160px; background: url(../img/bg-point.jpg) no-repeat right bottom; } /* paragraph */ #header h1 { font-size: 24px; font-family: "ヒラギノ明朝 ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif; letter-spacing: -2px; color: #6F3E37; margin-bottom: 10px; } #header p { font-size: 18px; color: #AD8D33; margin-bottom: 30px; font-weight: bold; } #content p { font-size: 15px; line-height: 1.6; margin-bottom: 22px; } #content p img { float: right; margin: 0 0 5px 5px; } #nav li { margin-bottom: 10px; } #nav li a:hover { color: #F30; }