認定試験サンプル問題（１）

www.sikaku.gr.jp

base.htmlの記述

サンプル問題では「base.html」は、完成形がありますがゼロから記述してみます

HOTEL IMPERIAL RESORT TOKYO

結婚式場のコンセプト
プランのご案内
ブライダルフェア
お問い合わせ

ホーム　結婚式場のコンセプト

結婚式場のコンセプト

プランのご案内
標準のプランをご紹介いたします。

お問い合わせ

ページの先頭へ戻る

東京都千代田区X-X-X 電話 0120-000-XXX 営業時間 11:00～20:00(水曜日定休)
Copyright 2014 HOTEL IMPERIAL RESORT TOKYO All rights reserved.

HTML記述例

サンプル問題のid名を残したまま、必要に応じてclass名を追加しました

<!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>
  </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記述例

共通モジュールの設定の記述（見本CSSとはかなり違います）

@charset "UTF-8";

/* -------------------------------------------
  reset
------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}

/* -------------------------------------------
  body
------------------------------------------- */
body {
  background-color: #f3f2e9;
  color: #5f5039;
  font-size: 16px;
  font-family: 
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  line-height: 1.0;
}

/* -------------------------------------------
  layout
------------------------------------------- */
.container {
  width: 840px;
  margin: 0 auto;
}

/* -------------------------------------------
  header
------------------------------------------- */
#top {
  margin: 28px 0 26px;
  text-align: center;
}

/* -------------------------------------------
  nav
------------------------------------------- */
.gnav > ul {
  display: flex;
  margin-bottom: 20px;
}
.gnav li {
  width: calc(100% / 4);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.gnav li > a {
  display: block;
  height: 45px;
  background-repeat: no-repeat;
  background-position: left top;
}
.gnav li > a.current {
  background-position: left bottom;
}
.gnav li > a:hover {
  background-position: left bottom;
}
.gnav li#nav_concept > a {
  background-image: url(../img/nav1.png);
}
.gnav li#nav_plan > a {
  background-image: url(../img/nav2.png);
}
.gnav li#nav_fair > a {
  background-image: url(../img/nav3.png);
}
.gnav li#nav_contact > a {
  background-image: url(../img/nav4.png);
}

/* -------------------------------------------
  breadcrumb
------------------------------------------- */
#breadcrumb ul {
  display: flex;
  margin-bottom: 20px;
  font-size: 14px;
}
#breadcrumb li > a {
  margin-right: 8px;
  padding-right: 15px;
  background-image: url(../img/breadcrumb_arrow.png);
  background-repeat: no-repeat;
  background-position: right center;
  text-decoration: underline;
}

/* -------------------------------------------
  content
------------------------------------------- */
#content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 70px;
}
#main {
  width: 570px;
}
  .main_title {
    margin-bottom: 30px;
    padding: 39px 0 40px 65px;
    background-image: url(../img/bg_h1_head.png),url(../img/bg_h1_bottom.png);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, left bottom;
    font-size: 22px;
  }
#sub {
  width: 230px;
  font-size: 14px;
}
  .bnr_inner dl {
    margin-bottom: 36px;
  }
  .bnr_inner dt {
    margin-bottom: 8px;
  }

/* -------------------------------------------
  footer
------------------------------------------- */
.footer {
  text-align: center;
}
#pagetop {
  text-align: right;
}
#pagetop > a {
  display: inline-block;
  padding: 6px 0 6px 28px;
  background: url(../img/bg_arrow.png) no-repeat left bottom;
  text-decoration: underline;
  font-size: 14px;
}
address {
  margin-bottom: 8px;
  padding-top: 16px;
  border-top: 1px solid #ccc;
  font-size: 14px;
  font-style: normal;
}
#copyright {
  margin-bottom: 20px;
}
#copyright small {
  font-size: 14px;
}