認定試験 サンプル問題（２）
concept.htmlの作成
【concept.html】 ホーム 結婚式場のコンセプト 結婚式場のコンセプト すべてのお客様のご満足のために 豊富な経験に基づき、お客様のどのようなご要望にもご満足いただけるプランニングを行っております。 500人までご招待いただける広大なガーデンから、10人ほどでささやかなお祝いができる素敵なお部屋まで、ご要望に応じたぴったりの会場をお選びいただけます。 また、妊婦様のためのマタニティプラン、お子様とご一緒のファミリープランなど、多様なニーズにお応えいたします。 お気に入りの会場を見つけていただくため、見学会やフェアを随時行っております。クリスマスやバレンタインなどには素敵なイベントを行っておりますので、お気軽にご来場ください。 料理へのこだわり 富士山麓の山で汲みあげた天然水を使い、有機農法で作られた体にやさしい野菜を使用しております。 また、新郎新婦の思い出の品を模したケーキなど、世界に1つだけのオリジナルスイーツをおつくりいたします。 プランのご案内 標準のプランをご紹介いたします。 お問い合わせ
HTML記述例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>結婚式場のコンセプト - HOTEL IMPERIAL RESORT TOKYO</title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <!-- #top --> <header id="top"> <h1><a href="index.html"><img src="img/logo.png" alt="HOTEL IMPERIAL RESORT TOKYO"></a></h1> </header> <!-- /#top --> <!-- .gnav --> <nav class="gnav"> <ul> <li id="nav_concept"><a href="concept.html" class="current">結婚式場のコンセプト</a></li> <li id="nav_plan"><a href="plan.html">プランのご案内</a></li> <li id="nav_fair"><a href="fair.html">ブライダルフェア</a></li> <li id="nav_contact"><a href="contact.html">お問い合わせ</a></li> </ul> </nav> <!-- /.gnav --> <!-- #breadcrumb --> <div id="breadcrumb"> <ul> <li><a href="index.html">ホーム</a></li> <li>結婚式場のコンセプト</li> </ul> </div> <!-- /#breadcrumb --> <div id="content"> <main id="main"> <h2 class="main_title">結婚式場のコンセプト</h2> <h3>すべてのお客様のご満足のために</h3> <p><img src="img/concept_photo1.jpg" alt="">豊富な経験に基づき、お客様のどのようなご要望にもご満足いただけるプランニングを行っております。</p> <p>500人までご招待いただける広大なガーデンから、10人ほどでささやかなお祝いができる素敵なお部屋まで、ご要望に応じたぴったりの会場をお選びいただけます。<br>また、妊婦様のためのマタニティプラン、お子様とご一緒のファミリープランなど、多様なニーズにお応えいたします。</p> <p>お気に入りの会場を見つけていただくため、見学会やフェアを随時行っております。クリスマスやバレンタインなどには素敵なイベントを行っておりますので、お気軽にご来場ください。 <h3>料理へのこだわり</h3> <p><img src="img/concept_photo2.jpg" alt="">富士山麓の山で汲みあげた天然水を使い、有機農法で作られた体にやさしい野菜を使用しております。</p> <p>また、新郎新婦の思い出の品を模したケーキなど、世界に1つだけのオリジナルスイーツをおつくりいたします。</p> </main><!-- /#main --> <div id="sub"> <aside> <div class="bnr_inner"> <a href="plan.html"> <dl> <dt><img src="img/bnr_plan.jpg" alt="プランのご案内"></dt> <dd>標準のプランをご紹介いたします。</dd> </dl> </a> </div> <div class="bnr_inner"> <a href="contact.html"> <p><img src="img/bnr_contact.png" alt="お問い合わせ"></p> </a> </div> </aside> </div><!-- /#sub --> </div><!-- /#content --> <!-- footer --> <footer class="footer"> <p id="pagetop"><a href="#top">ページの先頭へ戻る</a></p> <address>東京都千代田区X-X-X 電話 0120-000-XXX 営業時間 11:00～20:00(水曜日定休)</address> <p id="copyright"><small>Copyright 2014 HOTEL IMPERIAL RESORT TOKYO All rights reserved.</small></p> </footer> <!-- /footer --> </div><!-- /.container --> </body> </html>
CSS記述例
/* ------------------------------------------- concept.html ------------------------------------------- */ #main > h3 { margin-bottom: 14px; padding: 16px 0 16px 24px; background-image: url(../img/bg_h2_head.png); background-repeat: no-repeat; background-position: left top; border-bottom: 1px solid #ccc; font-size: 16px; } #main > h3:not(:first-of-type) { margin-top: 30px; } #main > p { margin-bottom: 20px; font-size: 14px; line-height: 1.5; } #main p:nth-of-type(1) img { float: right; margin: 0 0 20px 20px; } #main p:nth-of-type(4) img{ float: left; margin-right: 20px; }
