認定試験 サンプル問題（３）
plan.htmlの作成
【plan.html】 ホーム プランのご案内 プランのご案内 標準的なプラン例 標準的な内容のプランをご紹介いたします。実際のプランはお客様に合わせてご提案いたしますので、お気軽にお問い合わせください。 項目 説明 挙式会場 アルカンジュ（チャペル） 披露宴 お料理、お飲み物、花嫁衣裳（2種類）、花婿衣裳（2種類）、招待状、ブーケ、引き出物、写真撮影など オプション オリジナルスイーツ、お子様用お料理、キャンドルサービス 費用 計40名様…1,852,381円 計60名様…2,743,290円 プランのご案内 標準のプランをご紹介いたします。 お問い合わせ
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">結婚式場のコンセプト</a></li> <li id="nav_plan"><a href="plan.html" class="current">プランのご案内</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>標準的な内容のプランをご紹介いたします。実際のプランはお客様に合わせてご提案いたしますので、お気軽にお問い合わせください。</p> <table> <tr><th>項目</th><th>説明</th></tr> <tr><th>挙式会場</th><td>アルカンジュ（チャペル）</td></tr> <tr><th>披露宴</th><td>お料理、お飲み物、花嫁衣裳（2種類）、花婿衣裳（2種類）、招待状、ブーケ、引き出物、写真撮影など</td></tr> <tr><th>オプション</th><td>オリジナルスイーツ、お子様用お料理、キャンドルサービス</td></tr> <tr><th>費用</th><td>計40名様…1,852,381円<br>計60名様…2,743,290円</td></tr> </table> </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記述例
/* ------------------------------------------- plan.html ------------------------------------------- */ table { border-collapse: collapse; border: 1px solid #5f5039; } th { width: 110px; } td { width: 510px; } th, td { padding: 14px 16px; border: 1px solid #5f5039; font-size: 14px; line-height: 1.5; } tr:first-of-type { background-color: #eee8cc; } tr:nth-of-type(even) { background-color: #fff; }
