マークアップの実際
ヘッダーをマークアップ
- <header>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Green Leaf</title> <link rel="stylesheet" href="style.css"> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> </head> <body> Green Leaf 生活を楽しくする情報をもっと身近にお届けします トップ 森の工房について 季節のイベント お問い合わせ ブログ 森の工房について Forest Studioでは、自然の中にある「森の工房」を運営しています。森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。 森の中にある工房 森の中の様子 森の工房は、木々のあふれる森の中にあります。森の入口から細い小道を通り、森の奥に進んでください。しばらくすると、森の中にある小さな丘に出てきます。その丘の上にある木造の建物が「森の工房」です。 この丘はちょうど森の中央に位置しており、森の中を散歩したり、自然の中で遊んだりするときにも、ちょうどいい拠点になります。森全体を見渡すことも可能で、夜は満点の星空を満喫できます。 四季を楽しむことができる場所 冬の風景 森の工房では、春、夏、秋、冬と、四季折々の自然を楽しむことができます。 春には、雪解け水の中から芽を出す新しい命や、新緑の鮮やかな緑。夏には、緑濃く茂った木々の間を吹き抜けるさわやかな風に、川の清流での水遊び。秋には、森全体が赤や黄色に染まり、色鮮やかな紅葉に包まれます。木々の葉が落ち、冬になると、ここは雪に覆われて一面の銀世界になります。 工房のまわりにいる動物たち キツネさん 工房のまわりにはいろいろな動物たちが棲んでいます。キツネ、タヌキ、イタチ、ウサギ、リス、シカ、イノシシ…。森の中で出会うこともあれば、ひょこっと工房に顔を出すこともあります。土や雪の上に残った足跡から、正体を探るのも楽しみです。 ただし、森の工房では彼らに餌をやることはしていません。自然にあるがままの姿で、いっしょに生活していきたいと考えているからです。彼らに出会ったときには、びっくりさせないように遠くからそっと眺めてあげてください。 Copyright (C) Green Leaf, All rights reserved. </body> </html>
headerを記述
《hgroupを利用した場合》
<!-- ヘッダー --> <header> <hgroup> <h1><img src="img/logo.gif" alt="Green Leaf"></h1> <h2>生活を楽しくする情報をもっと身近にお届けします。</h2> </hgroup> </header>
《テキストの価値を優先したの場合》
<!-- ヘッダー --> <header> <h1>生活を楽しくする情報をもっと身近に | Green Leaf</h1> <p><img src="img/logo.gif" alt="Green Leafのロゴ"></p> </header>
ナビゲーションをマークアップ
- <nav>
navを記述
<!-- メニュー --> <nav> <ul> <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> </nav>
外部CSS（style.css）に記述
/* メニュー */ nav ul { font-size: 0.75em; margin-top: 0; margin-bottom: 30px; margin-left: 0; padding-left: 0; height: 30px; background-color: #005087; } nav ul li { list-style-type: none; float: left; } nav ul 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; } nav ul li a:hover { background-color: #017acd; }
ナビゲーションメニューをヘッダーに含める
<!-- ヘッダー --> <header> <h1><img src="img/logo.gif" alt="Green Leaf"></h1> <p>生活を楽しくする情報をもっと身近にお届けします</p> <!-- メニュー --> <nav> <ul> <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> </nav> </header>
CSSを調整する
/* ヘッダー */ header { background-color: #017acd; background-image: url(img/sky.jpg); padding: 28px 0 0; } header h1 { margin: 0 0 0 20px; } header h2 { color: #ffffff; font-size: 0.75em; margin: 0 0 98px 20px; }
記事をマークアップ
- <section>
- 汎用的なコンテンツブロックに設定
sectionを記述
<!-- コンテンツ --> <section> <h2>森の工房について</h2> <p>Forest Studioでは、自然の中にある「森の工房」を運営しています。森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。</p> </section> <section> <h2>森の中にある工房</h2> <p><img src="img/photo01.jpg" alt="森の中の様子" width="250" height="165"> 森の工房は、木々のあふれる森の中にあります。森の入口から細い小道を通り、森の奥に進んでください。しばらくすると、森の中にある小さな丘に出てきます。その丘の上にある木造の建物が「森の工房」です。</p> <p>この丘はちょうど森の中央に位置しており、森の中を散歩したり、自然の中で遊んだりするときにも、ちょうどいい拠点になります。森全体を見渡すことも可能で、夜は満点の星空を満喫できます。</p> </section> <section> <h2>四季を楽しむことができる場所</h2> <p><img src="img/photo02.jpg" alt="冬の風景" width="250" height="165"> 森の工房では、春、夏、秋、冬と、四季折々の自然を楽しむことができます。<br> 春には、雪解け水の中から芽を出す新しい命や、新緑の鮮やかな緑。夏には、緑濃く茂った木々の間を吹き抜けるさわやかな風に、川の清流での水遊び。秋には、森全体が赤や黄色に染まり、色鮮やかな紅葉に包まれます。木々の葉が落ち、冬になると、ここは雪に覆われて一面の銀世界になります。</p> </section> <section> <h2>工房のまわりにいる動物たち</h2> <p><img src="img/photo03.jpg" alt="キツネさん" width="250" height="165"> 工房のまわりにはいろいろな動物たちが棲んでいます。キツネ、タヌキ、イタチ、ウサギ、リス、シカ、イノシシ…。森の中で出会うこともあれば、ひょこっと工房に顔を出すこともあります。土や雪の上に残った足跡から、正体を探るのも楽しみです。</p> <p>ただし、森の工房では彼らに餌をやることはしていません。自然にあるがままの姿で、いっしょに生活していきたいと考えているからです。彼らに出会ったときには、びっくりさせないように遠くからそっと眺めてあげてください。</p> </section>
外部CSS（style.css）に記述
/* コンテンツ */ section { width: 564px; margin: 0 auto; } section header h1 { background-color: #014471; background-image: url(img/bar-darkblue.png); background-repeat: no-repeat; font-size: 1em; color: #ffffff; line-height: 45px; padding: 0 0 0 12px; margin-bottom: 0; } section section h1 { background-color: #ffffff; background-image: url(img/maru-skyblue.png); background-repeat: no-repeat; background-position: 0 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin: 30px 12px 0 12px; } section p { font-size: 0.75em; line-height: 1.6; margin-top: 10px 12px 0 12px; }
セクションをマークアップ
- <section>
- 汎用グループ
sectionを記述
<section> <header> <h1>森の工房について</h1> <p>Forest Studioでは、自然の中にある「森の工房」を運営しています。森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。</p> </header> <section> <h1>森の中にある工房</h1> <p><img src="img/photo01.jpg" alt="森の中の様子" width="250" height="165"> 森の工房は、木々のあふれる森の中にあります。森の入口から細い小道を通り、森の奥に進んでください。しばらくすると、森の中にある小さな丘に出てきます。その丘の上にある木造の建物が「森の工房」です。</p> <p>この丘はちょうど森の中央に位置しており、森の中を散歩したり、自然の中で遊んだりするときにも、ちょうどいい拠点になります。森全体を見渡すことも可能で、夜は満点の星空を満喫できます。</p> </section> <section> <h1>四季を楽しむことができる場所</h1> <p><img src="img/photo02.jpg" alt="冬の風景" width="250" height="165"> 森の工房では、春、夏、秋、冬と、四季折々の自然を楽しむことができます。<br> 春には、雪解け水の中から芽を出す新しい命や、新緑の鮮やかな緑。夏には、緑濃く茂った木々の間を吹き抜けるさわやかな風に、川の清流での水遊び。秋には、森全体が赤や黄色に染まり、色鮮やかな紅葉に包まれます。木々の葉が落ち、冬になると、ここは雪に覆われて一面の銀世界になります。</p> </section> <section> <h1>工房のまわりにいる動物たち</h1> <p><img src="img/photo03.jpg" alt="キツネさん" width="250" height="165"> 工房のまわりにはいろいろな動物たちが棲んでいます。キツネ、タヌキ、イタチ、ウサギ、リス、シカ、イノシシ…。森の中で出会うこともあれば、ひょこっと工房に顔を出すこともあります。土や雪の上に残った足跡から、正体を探るのも楽しみです。</p> <p>ただし、森の工房では彼らに餌をやることはしていません。自然にあるがままの姿で、いっしょに生活していきたいと考えているからです。彼らに出会ったときには、びっくりさせないように遠くからそっと眺めてあげてください。</p> </section> </section>
フッターをマークアップ
- <footer>
footerを記述
<!-- フッター --> <footer> <p><small>Copyright (C) Green Leaf, All rights reserved.</small></p> </footer>
/* フッター */ 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; display: block; }
