Webクリエイター能力認定試験 エキスパート
サンプル問題（HTML5）実技問題

Webサイトの概要・仕様

以下の「テーマ」「ページ構成」「フォルダーおよびファイル構成」「仕様」に従い、Webサイトを完成させなさい。

テーマ

  • 結婚式場「HOTEL IMPERIAL RESORT TOKYO」のWebサイトである。
  • トップページには、スライドショーとお知らせを掲載する。
  • 「結婚式場のコンセプト」ページでは、2つのコンセプトの紹介文を掲載する。
  • 「プランのご案内」ページでは、標準的なプランを一覧表で掲載する。
  • 「ブライダルフェア」ページでは、結婚式場の様子をサムネイルと紹介文とのセットで掲載する。
  • 「お問い合わせ」ページでは、結婚式場に関するお問い合わせフォームを設置する。

ページ構成

下図の通りのページ構成とし、トップページと各ページは相互にリンクさせること。

フォルダーおよびファイル構成

  • 「site」フォルダー内に必要なファイルを作成・修正し、Webサイトを完成させること。
  • 問題で使用する画像ファイルは、「images」フォルダー内のファイルを使用すること。
  • 問題で使用するCSSファイルは、「css」フォルダー内のファイルを使用すること。
  • 問題で使用するJavaScriptファイルは、「js」フォルダー内のファイルを使用すること。
  • 「material」フォルダーには、「start.html」に関連するファイルが格納されている。関連するファイルの閲覧は「start.html」からWebブラウザーで開き、確認すること。
  • 「実技用」フォルダー
    • start.html
    • 「material」フォルダー
    • 「site」フォルダー
      • base.html
      • concept.html ★新規作成
      • contact.html ★新規作成
      • fair.html ★新規作成
      • index.html ★新規作成
      • plan.html ★新規作成
      • 「css」フォルダー
        • common.css
        • responsive.css
        • style.css
      • 「js」フォルダー
        • slideshow.js
      • 「images」フォルダー
        • bg_arrow.png
        • bg_footer.png
        • bg_h1_bottom.png
        • bg_h1_head.png
        • bg_h2_bottom.png
        • bg_h2_head.png
        • bnr_contact.png
        • bnr_contact_hover.png
        • bnr_plan.jpg
        • breadcrumb_arrow.png
        • concept_photo1.jpg
        • concept_photo2.jpg
        • gallery_photo1.jpg
        • gallery_photo2.jpg
        • gallery_photo3.jpg
        • gallery_photo4.jpg
        • gallery_photo5.jpg
        • gallery_photo6.jpg
        • logo.png
        • nav1.png
        • nav2.png
        • nav3.png
        • nav4.png
        • slide1.jpg
        • slide2.jpg
        • slide3.jpg

仕様

以下の仕様で記述すること。

  • マークアップ言語：HTML5
  • スタイルシート：CSS 2.1およびCSS3
  • スクリプト：JavaScript
  • 文字コード：UTF-8（BOM付推奨）
  • 改行コード：CR+LF

問題1 基本ページの作成

仕上り見本を参考に基本ページを作成しなさい。

基本ページのHTMLの編集

「site」フォルダーにある「base.html」に、以下の設定を行い、保存しなさい。

meta要素の次の行に、title要素を挿入し、以下のテキストをコピー&ペーストする。

title要素のテキスト
結婚式場のコンセプト - HOTEL IMPERIAL RESORT TOKYO

title要素の次の行に、link要素を挿入し、「css」フォルダーにある「style.css」を設定する。
ただし、type属性は省略すること。

body要素の中に、header要素を挿入し、ページの先頭に戻るためのid属性「top」を設定する。

header要素の中に、画像「logo.png」を挿入し、以下の代替テキストをコピー&ペーストする。

代替テキスト HOTEL IMPERIAL RESORT TOKYO
幅 (属性は省略)
高さ (属性は省略)

画像「logo.png」に、h1要素をマークアップし、「index.html」へのリンクを設定する。
なお、リンクはh1要素の中に設定すること。

header要素の次の行に、nav要素を挿入する。

nav要素の中に、以下のテキストをコピー&ペーストし、箇条書きリストをul要素、li要素でマークアップする。
なお、これらのテキストに、リンクと、それを内包するli要素のid属性を設定すること。

テキスト 結婚式場のコンセプト
リンク先 concept.html
li要素のid名 nav_concept
テキスト プランのご案内
リンク先 plan.html
li要素のid名 nav_plan
テキスト ブライダルフェア
リンク先 fair.html
li要素のid名 nav_fair
テキスト お問い合わせ
リンク先 contact.html
li要素のid名 nav_contact

nav要素の次の行に、div要素を挿入し、id属性「breadcrumb」を設定するとともに、以下のソースをコピー&ペーストする。

ソース
<ul>
<li><a href="index.html">ホーム</a></li>
<li>結婚式場のコンセプト</li>
</ul>

div要素（id属性「breadcrumb」）の次の行に、div要素を挿入し、id属性「contents」を設定する。

div要素（id属性「contents」）の中に、div要素を挿入し、id属性「main」を設定するとともに、以下のソースをコピー&ペーストする。

ソース
<article>
<h1>結婚式場のコンセプト</h1>
</article>

div要素（id属性「main」）の次の行に、div要素を挿入し、id属性「sub」を設定する。

div要素（id属性「sub」）の中に、aside要素を挿入し、以下のソースをコピー&ペーストする。

ソース
<div class="bnr_inner">
<dl>
<dt><img src="images/bnr_plan.jpg" alt="プランのご案内"></dt>
<dd>標準のプランをご紹介いたします。</dd>
</dl>
</div>
<div class="bnr_inner">
<a href="contact.html">
<p><img src="images/bnr_contact.png" alt="お問い合わせ"></p>
</a>
</div>

ソースの中にあるdl要素に、「plan.html」へのリンクを設定する。
なお、リンクはdl要素の外に設定すること。

div要素（id属性「contents」）の次の行に、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>

基本レイアウトのCSSの編集

「css」フォルダーにある「style.css」の「/* 基本レイアウト ここから↓ */」と「/* 基本レイアウト ここまで↑ */」の中に、以下の設定を行い、保存しなさい。

外部スタイルシート「common.css」を設定する。

ページ全体のスタイルを設定する。

セレクター body
背景色 #f3f2e9
文字色 #5f5039

ヘッダー領域、ナビゲーション領域、パンくずリスト領域、コンテンツ領域、フッター領域が左右中央揃えに配置されるようにマージンを設定する。

セレクター header, nav, #breadcrumb, #contents, footer
幅 840ピクセル
左マージン (各自考える)
右マージン (各自考える)

ヘッダー領域のh1要素にスタイルを設定する。

セレクター header h1
マージン
上: 0、
下: 26ピクセル、
左: 0、
右: 0
上パディング 28ピクセル
行揃え 中央

ナビゲーション領域のリストのマーカーの表示を消し、位置を設定する。

セレクター nav ul
リストマーカーの種類 なし
マージン
上: 0、
下: 20ピクセル、
左: 0、
右: 0
左パディング 0
オーバーフロー hidden

ナビゲーション領域にある、リストを横並びに設定する。

セレクター nav ul li
幅 210ピクセル
フロート 左

ナビゲーション領域にある、リンクのスタイルを設定する。
高さを0にし、パディングとオーバーフロー時の処理を設定することで画像置換を行う。

セレクター nav ul li a
表示形式 ブロックレベル
高さ 0
上パディング 44ピクセル
オーバーフロー hidden

画像置換によって表示するリンクの画像を設定する。

セレクター nav ul li#nav_concept a
背景画像 nav1.png
セレクター nav ul li#nav_plan a
背景画像 nav2.png
セレクター nav ul li#nav_fair a
背景画像 nav3.png
セレクター nav ul li#nav_contact a
背景画像 nav4.png

メイン領域のスタイルを設定する。

セレクター #main
幅 570ピクセル
フロート 左

サブ領域のスタイルを設定する。

セレクター #sub
幅 230ピクセル
フロート 右

フッター領域の余白を設定する。

セレクター footer
上パディング 70ピクセル

メイン領域のh1要素にスタイルを設定する。

セレクター #main h1
マージン
上: 0、
下: 30ピクセル、
左: 0、
右: 0
パディング
上: 35ピクセル、
下: 35ピクセル、
左: 65ピクセル、
右: 0
背景画像(複数指定)
1枚目: bg_h1_head.png、
2枚目: bg_h1_bottom.png
背景画像の繰り返し(複数指定)
1枚目: なし、
2枚目: なし
背景画像の位置(複数指定)
1枚目の水平方向: 左、
1枚目の垂直方向: 上、
2枚目の水平方向: 左、
2枚目の垂直方向: 下
文字のサイズ 156.25%

基本ページを使用した各ページの複製

問題1(1)で保存した「base.html」を複製し、保存しなさい。

「base.html」を複製し、「index.html」、「concept.html」、「plan.html」、「fair.html」、「contact.html」として保存する。

各ページのCSSスプライトに関連するHTMLの編集

各HTMLファイルに、以下の設定を行い、保存しなさい。

以下のファイルのbody要素にid属性を設定する。

ファイル名 body要素のid名
concept.html concept
plan.html plan
fair.html fair
contact.html contact

各ページのCSSスプライトに関連するCSSの編集

「css」フォルダーにある「style.css」の「/* 基本レイアウト ここから↓ */」と「/* 基本レイアウト ここまで↑ */」の中に、以下の設定を行い、保存しなさい。

CSSスプライトを用いて、「concept.html」、「plan.html」、「fair.html」、「contact.html」のナビゲーション領域で、現在表示されているページのリンクの背景画像が変わるようにし、各リンクにロールオーバーを設定する。

セレクター #concept #nav_concept a, #plan #nav_plan a, #fair #nav_fair a, #contact #nav_contact a, nav ul li a:hover
背景画像の位置
水平方向: 0、
垂直方向: -45ピクセル

問題1は終了です。問題2に進んでください。

問題2 トップページの作成

仕上り見本を参考にトップページを作成しなさい。

トップページのタイトルに関連するHTMLの編集

問題1(3)で保存した「index.html」に、以下の設定を行い、保存しなさい。

title要素を以下のテキストに変更する。
なお、テキストはコピー&ペーストすること。

title要素のテキスト
HOTEL IMPERIAL RESORT TOKYO

トップページのJavaScriptに関連するHTMLの編集

「index.html」に、JavaScriptによるスライドの設定を行い、保存しなさい。
なお、スライドの表示はブラウザーで確認すること。

パンくずリスト領域のid属性「breadcrumb」をid属性「graphic」に変更する。
また、箇条書きリスト（ul要素、li要素）を削除し、以下のソースをコピー&ペーストすること。

ソース
<ul>
<li class="now"><img src="images/slide1.jpg" alt="こだわりの空間で心地よいひとときを" class="image1"></li>
<li><img src="images/slide2.jpg" alt="幸福に満ちた神聖なチャペル" class="image2"></li>
<li><img src="images/slide3.jpg" alt="「ありがとう」の気持ちが伝わるウェディング" class="image3"></li>
</ul>

フッター領域の次の行に、スクリプト要素を挿入し、「js」フォルダーの中の「slideshow.js」を設定する。
ただし、type属性は省略すること。

トップページのメイン領域のHTMLの編集

「index.html」のメイン領域に、以下の設定を行い、保存しなさい。

article要素をsection要素に変更し、id属性「news」を設定する。

h1要素をh2要素に変更し、テキスト「結婚式場のコンセプト」を以下のテキストに変更する。
なお、テキストはコピー&ペーストすること。

h2要素のテキスト
お知らせ

h2要素の次の行に、以下のソースをコピー&ペーストする。

ソース
<ul>
<li>2014年04月25日ランチ・ディナーのテイスティングフェア</li>
<li>2014年03月03日春の特別見学会</li>
<li>2014年02月20日期間限定の割引プラン</li>
<li>2014年02月14日バレンタインフェア</li>
</ul>

ソースの中にある日付をtime要素でマークアップし、以下の属性を設定する。

datetime(※1) (YYYY-MM-DD形式)

(※1) 例：2014年01月01日は、「2014-01-01」。

トップページのCSSの編集

「css」フォルダーにある「style.css」の「/* トップページ ここから↓ */」と「/* トップページ ここまで↑ */」の中に、以下の設定を行い、保存しなさい。

トップページの「お知らせ」のリストにスタイルを設定する。

セレクター #news ul
リストマーカーの種類 なし
左パディング 0
セレクター #news ul li
パディング
上: 20ピクセル、
下: 20ピクセル、
左: 175ピクセル、
右: 0
下ボーダー
太さ: 1ピクセル、
スタイル: 点線、
色: #6c5f45
文字色 #342300
インデント -175ピクセル

トップページのレスポンシブWebデザインに関連するHTMLの編集

問題2(3)で保存した「index.html」に、レスポンシブWebデザインの設定を行い、保存しなさい。

  • ・レスポンシブWebデザインの表示はブラウザーの幅を縮めて確認すること。
  • ・ブラウザーがEdgeの場合はInternet Explorerで開き、レスポンシブWebデザインの表示を確認すること。

link要素の次の行に、続けてlink要素を挿入し、「css」フォルダーの「responsive.css」を設定するとともに、以下の属性を設定する。
ただし、type属性は省略すること。

メディアクエリー screen and (max-width: 480px)

問題2は終了です。問題3に進んでください。

問題3 「結婚式場のコンセプト」ページの作成

仕上り見本を参考に「結婚式場のコンセプト」ページを作成しなさい。

「結婚式場のコンセプト」ページのメイン領域のHTMLの編集

問題1(4)で保存した「concept.html」のメイン領域に、以下の設定を行い、保存しなさい。

h1要素の次の行に、section要素を挿入し、クラス「concept_box」を設定するとともに、以下のソースをコピー&ペーストする。

ソース
<h2>すべてのお客様のご満足のために</h2>
<p><img src="images/concept_photo1.jpg" alt="" class="image_right">豊富な経験に基づき、お客様のどのようなご要望にもご満足いただけるプランニングを行っております。</p>
<p>500人までご招待いただける広大なガーデンから、10人ほどでささやかなお祝いができる素敵なお部屋まで、ご要望に応じたぴったりの会場をお選びいただけます。<br>また、妊婦様のためのマタニティプラン、お子様とご一緒のファミリープランなど、多様なニーズにお応えいたします。</p>
<p>お気に入りの会場を見つけていただくため、見学会やフェアを随時行っております。クリスマスやバレンタインなどには素敵なイベントを行っておりますので、お気軽にご来場ください。</p>

section要素の次の行に、続けてsection要素を挿入し、クラス「concept_box」を設定するとともに、以下のソースをコピー&ペーストする。

ソース
<h2>料理へのこだわり</h2>
<p><img src="images/concept_photo2.jpg" alt="" class="image_left">富士山麓の山で汲みあげた天然水を使い、有機農法で作られた体にやさしい野菜を使用しております。</p>
<p>また、新郎新婦の思い出の品を模したケーキなど、世界に1つだけのオリジナルスイーツをおつくりいたします。</p>

「結婚式場のコンセプト」ページのCSSの編集

「css」フォルダーにある「style.css」の「/* 「結婚式場のコンセプト」ページ ここから↓ */」と「/* 「結婚式場のコンセプト」ページ ここまで↑ */」の中に、以下の設定を行い、保存しなさい。

section要素の余白を空けるためにクラス「concept_box」のスタイルを設定する。

セレクター .concept_box
下マージン 30ピクセル
オーバーフロー hidden

メイン領域をトップページの余白と合わせるためにクラス「concept_box」のスタイルを設定する。

セレクター .concept_box:last-child
下マージン 0

問題3は終了です。問題4に進んでください。

問題4 「プランのご案内」ページの作成

仕上り見本を参考に「プランのご案内」ページを作成しなさい。

「プランのご案内」ページのタイトルに関連するHTMLの編集

問題1(4)で保存した「plan.html」に、以下の設定を行い、保存しなさい。

各要素内のテキストを以下のテキストに変更する。
なお、テキストはコピー&ペーストすること。

title要素のテキスト
プランのご案内 - HOTEL IMPERIAL RESORT TOKYO
パンくずリスト領域のli要素のテキスト「結婚式場のコンセプト」
プランのご案内
メイン領域のh1要素のテキスト
プランのご案内

「プランのご案内」ページのメイン領域のHTMLの編集

「plan.html」のメイン領域に、以下の設定を行い、保存しなさい。

h1要素の次の行に、以下のソースをコピー&ペーストする。

ソース
<table>
<tr><th scope="col">項目</th><th scope="col">説明</th></tr>
<tr><th scope="row">挙式会場</th><td>アルカンジュ（チャペル）</td></tr>
<tr><th scope="row">披露宴</th><td>お料理、お飲み物、花嫁衣裳（2種類）、花婿衣裳（2種類）、招待状、ブーケ、引き出物、写真撮影など</td></tr>
<tr><th scope="row">オプション</th><td>オリジナルスイーツ、お子様用お料理、キャンドルサービス</td></tr>
<tr><th scope="row">費用</th><td>計40名様…1,852,381円<br>計60名様…2,743,290円</td></tr>
</table>

table要素の中にcaption要素を挿入し、以下のソースをコピー&ペーストする。

ソース
<strong>標準的なプラン例</strong><p>標準的な内容のプランをご紹介いたします。実際のプランはお客様に合わせてご提案いたしますので、お気軽にお問い合わせください。</p>

テーブルの一行目をthead要素でマークアップする。

テーブルの二行目～五行目を一つの括りとして、tbody要素でマークアップする。

「プランのご案内」ページのCSSの編集

「css」フォルダーにある「style.css」の「/* 「プランのご案内」ページ ここから↓ */」と「/* 「プランのご案内」ページ ここまで↑ */」の中に、以下の設定を行い、保存しなさい。

テーブルに交互の背景色を設定する。

セレクター table thead tr th
背景色 #eee8cc
セレクター table tbody tr:nth-child(奇数のアルファベット値を設定)
背景色 #ffffff

問題4は終了です。問題5に進んでください。

問題5 「ブライダルフェア」ページの作成

仕上り見本を参考に「ブライダルフェア」ページを作成しなさい。

「ブライダルフェア」ページのタイトルに関連するHTMLの編集

問題1(4)で保存した「fair.html」に、以下の設定を行い、保存しなさい。

各要素内のテキストを以下のテキストに変更する。
なお、テキストはコピー&ペーストすること。

title要素のテキスト
ブライダルフェア - HOTEL IMPERIAL RESORT TOKYO
パンくずリスト領域のli要素のテキスト「結婚式場のコンセプト」
ブライダルフェア
メイン領域のh1要素のテキスト
ブライダルフェア

「ブライダルフェア」ページのメイン領域のHTMLの編集

「fair.html」のメイン領域に、以下の設定を行い、保存しなさい。

h1要素の次の行に、以下のソースをコピー&ペーストする。

ソース
<p>各会場の様子やお料理、ドレスをはじめ、弊社プランナーがおふたりのウェディングをご提案させていただきます。</p>
<div class="gallery_box">
<img src="images/gallery_photo1.jpg">
思い出の曲をピアノで弾く演出が人気です。
<img src="images/gallery_photo2.jpg">
様々なデザインのドレスをご用意しております。
<img src="images/gallery_photo3.jpg">
こだわりのヒレ肉を使った和牛ローストビーフです。
</div>
<div class="gallery_box">
<img src="images/gallery_photo4.jpg">
優れた採光が人気の会場、アルカンジュです。
<img src="images/gallery_photo5.jpg">
深紅のカーペットには純白のドレスがよく似合います。
<img src="images/gallery_photo6.jpg">
真鯛を使った贅沢なカルパッチョです。
</div>

img要素とimg要素の直下にあるテキストをfigure要素で6箇所にマークアップする。

figure要素の中にあるテキストをfigcaption要素で6箇所にマークアップする。

「ブライダルフェア」ページのCSSの編集

「css」フォルダーにある「style.css」の「/* 「ブライダルフェア」ページ ここから↓ */」と「/* 「ブライダルフェア」ページ ここまで↑ */」の中に、以下の設定を行い、保存しなさい。

サムネイルを横並びにし、スタイルを設定する。

セレクター .gallery_box figure
幅 180ピクセル
マージン
上: 0、
下: 15ピクセル、
左: 15ピクセル、
右: 0
フロート 左

サムネイルの三列目がカラム落ちしないように、マージンを設定する。

セレクター .gallery_box figure:first-child
左マージン 0

問題5は終了です。問題6に進んでください。

問題6 「お問い合わせ」ページの作成

仕上り見本を参考に「お問い合わせ」ページを作成しなさい。

「お問い合わせ」ページのタイトルに関連するHTMLの編集

問題1(4)で保存した「contact.html」に、以下の設定を行い、保存しなさい。

各要素内のテキストを以下のテキストに変更する。
なお、テキストはコピー&ペーストすること。

title要素のテキスト
お問い合わせ - HOTEL IMPERIAL RESORT TOKYO
パンくずリスト領域のli要素のテキスト「結婚式場のコンセプト」
お問い合わせ
メイン領域のh1要素のテキスト
お問い合わせ

「お問い合わせ」ページのメイン領域のHTMLの編集

「contact.html」のメイン領域に、以下の設定を行い、保存しなさい。

h1要素の次の行に、以下のソースをコピー&ペーストする。

ソース
<p>会場やプランについてのお問い合わせは、下記フォームよりお気軽にお寄せください。</p>
<ul>
<li>必要事項を記入し、「確認する」をクリックしてください。</li>
<li>ご登録いただいた個人情報は、お問い合わせ内容の確認以外には使用いたしません。</li>
</ul>
<form action="#">
<p>お名前（必須）</p>
<p>メールアドレス（必須）</p>
<p>お問い合わせ種類<br>
事前のご相談　その他</p>
<p>内容</p>
</form>

テキスト「お名前（必須）」の後に、段落内改行を挿入し、続けて名前を入力するためのテキストフィールドを挿入するとともに、以下の属性を設定する。

type (テキスト形式を設定）
name name
必須 (属性名のみ設定)

テキスト「お名前（必須）」からテキストフィールドまでをlabel要素でマークアップする。
なお、label要素はp要素の中に設定すること。

テキスト「メールアドレス（必須）」の後に、段落内改行を挿入し、続けてメールアドレスを入力するためのテキストフィールドを挿入するとともに、以下の属性を設定する。

type (メールアドレス形式を設定)
name mail
必須 (属性名のみ設定)

テキスト「メールアドレス（必須）」からテキストフィールドまでをlabel要素でマークアップする。
なお、label要素はp要素の中に設定すること。

テキスト「事前のご相談」の前に、一つ目のラジオボタンを挿入し、以下の属性を設定する。

type (ラジオボタンを設定)
name kind
value 0

一つ目のラジオボタンからテキスト「事前のご相談」までをlabel要素でマークアップする。

テキスト「その他」の前に、二つ目のラジオボタンを挿入し、以下の属性を設定する。

type (ラジオボタンを設定)
name kind
value 1

二つ目のラジオボタンからテキスト「その他」までをlabel要素でマークアップする。

テキスト「内容」の後に、段落内改行を挿入し、続けて内容を入力するためのテキストエリアを挿入するとともに、以下の属性を設定する。

name comment

テキスト「内容」からテキストエリアまでをlabel要素でマークアップする。
なお、label要素はp要素の中に設定すること。

テキストエリアを内包しているp要素の次の行に、送信ボタンを挿入し、p要素でマークアップする。
なお、送信ボタンには、以下の属性を設定すること。

type submit
value 確認する

「お問い合わせ」ページのCSSの編集

「css」フォルダーにある「style.css」の「/* 「お問い合わせ」ページ ここから↓ */」と「/* 「お問い合わせ」ページ ここまで↑ */」の中に、以下の設定を行い、保存しなさい。

「お名前」のテキストフィールドの幅を設定する。

セレクター input[(type属性を設定)]
幅 200ピクセル

「メールアドレス」のテキストフィールドの幅を設定する。

セレクター input[(type属性を設定)]
幅 300ピクセル

問題6は終了です。実技問題は以上です。