Last active
August 29, 2015 14:02
-
-
Save omas/99dd871b237ab82eb069 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| a { | |
| color: #017acd; | |
| } | |
| /* コンテナ */ | |
| div#container { | |
| width: 760px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| header { | |
| background-color: #017acd; | |
| background-image: url(sky.jpg); | |
| padding: 28px 20px 98px; | |
| } | |
| div#header h1 { | |
| margin: 0; | |
| } | |
| div#header p { | |
| color: #ffffff; | |
| font-size: 0.75em; | |
| margin: 0; | |
| } | |
| /* メニュー */ | |
| ul#menu { | |
| font-size: 0.75em; | |
| margin-top: 0; | |
| margin-bottom: 30px; | |
| margin-left: 0; | |
| padding-left: 0; | |
| height: 30px; | |
| background-color: #005087; | |
| } | |
| ul#menu li { | |
| list-style-type: none; | |
| float: left; | |
| } | |
| ul#menu li a { | |
| display: block; | |
| width: 120px; | |
| line-height: 30px; | |
| text-decoration: none; | |
| text-align: center; | |
| color: #ffffff; | |
| background-color: #005087; | |
| border-right: solid 1px #ffffff; | |
| } | |
| ul#menu li a:hover { | |
| background-color: #017acd; | |
| } | |
| /* コンテンツ */ | |
| div#content { | |
| width: 564px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| div#content h2 { | |
| background-color: #014471; | |
| background-image: url(bar-darkblue.png); | |
| background-repeat: no-repeat; | |
| font-size: 1em; | |
| color: #ffffff; | |
| line-height: 45px; | |
| padding-left: 12px; | |
| margin-bottom: 0; | |
| } | |
| div#content h3 { | |
| background-color: #ffffff; | |
| background-image: url(maru-skyblue.png); | |
| background-repeat: no-repeat; | |
| background-position: 0px 2px; | |
| font-size: 0.875em; | |
| line-height: 22px; | |
| padding-left: 26px; | |
| margin-top: 30px; | |
| margin-bottom: 0; | |
| margin-left: 12px; | |
| margin-right: 12px; | |
| } | |
| div#content p { | |
| font-size: 0.75em; | |
| line-height: 1.6; | |
| margin-top: 10px; | |
| margin-left: 12px; | |
| margin-right: 12px; | |
| } | |
| /* フッター */ | |
| footer { | |
| color: #ffffff; | |
| background-color: #005087; | |
| margin-top: 25px; | |
| padding-top: 8px; | |
| padding-bottom: 8px; | |
| } | |
| small { | |
| font-size: 0.75em; | |
| font-style: normal; | |
| text-align: center; | |
| } | |
| /* 画像の配置 */ | |
| img.photo-odd { | |
| float: right; | |
| margin-left: 15px; | |
| margin-bottom: 15px; | |
| } | |
| img.photo-even { | |
| float: left; | |
| margin-right: 15px; | |
| margin-bottom: 15px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>森の工房 [Forest Studio] - 森の工房について</title> | |
| <link rel="stylesheet" href="sample_a.css"> | |
| </head> | |
| <body> | |
| <!-- コンテナ --> | |
| <div id="container"> | |
| <!-- ヘッダー --> | |
| <header> | |
| <h1><img src="logo.gif" alt="Green Leaf"></h1> | |
| <p>生活を楽しくする情報をもっと身近にお届けします</p> | |
| </header> | |
| <!-- メニュー --> | |
| <ul id="menu"> | |
| <li><a href="index.html">トップ</a></li> | |
| <li><a href="about.html">森の工房について</a></li> | |
| <li><a href="event.html">季節のイベント</a></li> | |
| <li><a href="contact.html">お問い合わせ</a></li> | |
| <li><a href="http://blog.xxx.xxx/">ブログ</a></li> | |
| </ul> | |
| <!-- コンテンツ --> | |
| <div id="content"> | |
| <h2>森の工房について</h2> | |
| <p id="summary">Forest Studioでは、自然の中にある「森の工房」を運営しています。森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。</p> | |
| <h3>森の中にある工房</h3> | |
| <p><img src="photo01.jpg" alt="森の中の様子" width="250" height="165" class="photo-odd" /> | |
| 森の工房は、木々のあふれる森の中にあります。森の入口から細い小道を通り、森の奥に進んでください。しばらくすると、森の中にある小さな丘に出てきます。その丘の上にある木造の建物が「森の工房」です。 | |
| </p> | |
| <p>この丘はちょうど森の中央に位置しており、森の中を散歩したり、自然の中で遊んだりするときにも、ちょうどいい拠点になります。森全体を見渡すことも可能で、夜は満点の星空を満喫できます。 | |
| </p> | |
| <h3>四季を楽しむことができる場所</h3> | |
| <p><img src="photo02.jpg" alt="冬の風景" width="250" height="165" class="photo-even" /> | |
| 森の工房では、春、夏、秋、冬と、四季折々の自然を楽しむことができます。<br /> | |
| 春には、雪解け水の中から芽を出す新しい命や、新緑の鮮やかな緑。夏には、緑濃く茂った木々の間を吹き抜けるさわやかな風に、川の清流での水遊び。秋には、森全体が赤や黄色に染まり、色鮮やかな紅葉に包まれます。木々の葉が落ち、冬になると、ここは雪に覆われて一面の銀世界になります。 | |
| </p> | |
| <h3>工房のまわりにいる動物たち</h3> | |
| <p><img src="photo03.jpg" alt="キツネさん" width="250" height="165" class="photo-odd" /> | |
| 工房のまわりにはいろいろな動物たちが棲んでいます。キツネ、タヌキ、イタチ、ウサギ、リス、シカ、イノシシ…。森の中で出会うこともあれば、ひょこっと工房に顔を出すこともあります。土や雪の上に残った足跡から、正体を探るのも楽しみです。 | |
| </p> | |
| <p>ただし、森の工房では彼らに餌をやることはしていません。自然にあるがままの姿で、いっしょに生活していきたいと考えているからです。彼らに出会ったときには、びっくりさせないように遠くからそっと眺めてあげてください。 | |
| </p> | |
| </div> | |
| <!-- フッター --> | |
| <footer> | |
| <small>Copyright (C) Green Leaf, All rights reserved.</small> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment