認定試験 サンプル問題（４）
fair.htmlの作成
【fair.html】 ホーム ブライダルフェア ブライダルフェア 各会場の様子やお料理、ドレスをはじめ、弊社プランナーがおふたりのウェディングをご提案させていただきます。 思い出の曲をピアノで弾く演出が人気です。 様々なデザインのドレスをご用意しております。 こだわりのヒレ肉を使った和牛ローストビーフです。 優れた採光が人気の会場、アルカンジュです。 深紅のカーペットには純白のドレスがよく似合います。 真鯛を使った贅沢なカルパッチョです。 プランのご案内 標準のプランをご紹介いたします。 お問い合わせ
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">プランのご案内</a></li> <li id="nav_fair"><a href="fair.html" class="current">ブライダルフェア</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> <p>各会場の様子やお料理、ドレスをはじめ、弊社プランナーがおふたりのウェディングをご提案させていただきます。</p> <ul class="gallery"> <li> <img src="img/gallery_photo1.jpg" alt=""> <p>思い出の曲をピアノで弾く演出が人気です。</p> </li> <li> <img src="img/gallery_photo2.jpg" alt=""> <p>様々なデザインのドレスをご用意しております。</p> </li> <li> <img src="img/gallery_photo3.jpg" alt=""> <p>こだわりのヒレ肉を使った和牛ローストビーフです。</p> </li> <li> <img src="img/gallery_photo4.jpg" alt=""> <p>優れた採光が人気の会場、アルカンジュです。</p> </li> <li> <img src="img/gallery_photo5.jpg" alt=""> <p>深紅のカーペットには純白のドレスがよく似合います。</p> </li> <li> <img src="img/gallery_photo6.jpg" alt=""> <p>真鯛を使った贅沢なカルパッチョです。</p> </li> </ul> </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記述例
/* ------------------------------------------- fair.html ------------------------------------------- */ .gallery { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .gallery li { width: calc((100% - 20px) / 3); margin-bottom: 8px; font-size: 14px; } .gallery li > img { margin-bottom: 8px; } .gallery li > p { width: 12em; line-height: 1.5; }
