Webクリエイター能力認定試験 スタンダード
サンプル問題(HTML5)実技問題

Webサイトの概要・仕様

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

テーマ

  • 「HAPPINESS FITNESS CLUB」を紹介するWebサイトである。
  • トップページには、イメージとお知らせを掲載する。
  • 「施設のご案内」ページでは、施設に関する案内文と施設のイメージ画像を掲載する。
  • 「料金プラン」ページでは、会員制の料金プランを一覧表で掲載する。
  • 「ご意見・ご要望」ページでは、施設に関するご意見・ご要望を承るフォームを設置する。

ページ構成

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

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

  • 「site」フォルダー内に必要なファイルを作成・修正し、Webサイトを完成させること。
  • 問題で使用する画像ファイルは、「images」フォルダー内のファイルを使用すること。
  • 問題で使用するCSSファイルは、「css」フォルダー内のファイルを使用すること。
  • 「material」フォルダーには、「start.html」に関連するファイルが格納されている。関連するファイルの閲覧は「start.html」からWebブラウザーで開き、確認すること。
  • 「実技用」フォルダー
    • start.html
    • 「material」フォルダー
    • 「site」フォルダー
      • fee.html ★新規作成
      • index.html
      • info.html ★新規作成
      • opinion.html ★新規作成
      • 「css」フォルダー
        • common.css
        • style.css
      • 「images」フォルダー
        • bg_footer.png
        • bg_header.png
        • bnr_info.png
        • bnr_opinion.png
        • graphic.jpg
        • h1.png
        • h2.png
        • logo.png
        • nav1.png
        • nav2.png
        • nav3.png
        • pic.jpg

仕様

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

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

問題1 トップページと基本レイアウトの作成

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

トップページのHTMLの編集

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

文書型宣言をHTML 4.01からHTML5に変更する。

文字コードがあるmeta要素のhttp-equiv属性とcontent属性を削除し、以下の属性を追加する。

charset utf-8

以下のmeta要素を削除する。

削除するmeta要素
<meta http-equiv="Content-Style-Type" content="text/css">

link要素のtype属性を削除する。

id属性「header」があるdiv要素をheader要素に変更し、変更後はid属性を削除する。

id属性「nav」があるdiv要素をnav要素に変更し、変更後はid属性を削除する。

id属性「section」があるdiv要素をsection要素に変更し、変更後はid属性を削除する。

id属性「aside」があるdiv要素をaside要素に変更し、変更後はid属性を削除する。

id属性「footer」があるdiv要素をfooter要素に変更し、変更後はid属性を削除する。

以下のテキストをsmall要素でマークアップする。
なお、small要素はp要素の中にマークアップすること。

small要素を設定するテキスト
Copyright 2014 HAPPINESS FITNESS CLUB All rights reserved.

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

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

2箇所ある「#header」を「header」に変更する。

変更するセレクター
#header
#header h1

3箇所ある「#nav」を「nav」に変更する。

変更するセレクター
#nav
#nav ul
#nav ul li

ナビゲーション領域にロールオーバーを設定する。

セレクター nav ul li a:hover
ボックスの透明度 0.7

1箇所ある「#footer」を「footer」に変更する。

変更するセレクター
#footer p

フッター領域のコピーライトに文字のサイズを設定する。

セレクター footer small
文字のサイズ 100%

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

問題2 各ページのフォーマットの複製

仕上り見本を参考にフォーマットを作成しなさい。

ページのフォーマットの複製

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

「index.html」を複製し、「info.html」として保存する。

フォーマットのHTMLの編集

「info.html」に、以下の設定を行い、保存しなさい。

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

title要素のテキスト
施設のご案内 - HAPPINESS FITNESS CLUB

ヘッダー領域のh1要素の画像に対して、トップページに戻るためのリンクを設定する。
なお、リンクはh1要素の中に設定すること。

メイン領域の中を空白にする。

メイン領域にarticle要素を挿入する。

メイン領域のarticle要素の中に、以下のテキストをコピー&ペーストし、h1要素でマークアップする。

h1要素のテキスト
施設のご案内

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

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

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

セレクター #main h1
マージン
上: 0、
下: 20ピクセル、
左: 0、
右: 0
パディング
上: 8ピクセル、
下: 3ピクセル、
左: 40ピクセル、
右: 0
背景画像 h1.png
背景画像の繰り返し なし
文字のサイズ 162%

フォーマットを使用した各ページの複製

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

「info.html」を複製し、「fee.html」、「opinion.html」として保存する。

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

問題3 「施設のご案内」ページの作成

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

「施設のご案内」ページのHTMLの編集

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

h1要素の次の行に、以下のテキストをコピー&ペーストする。
仕上り見本を参考に、テキストごとにp要素でマークアップし、必要に応じて段落内改行を入れること。

テキスト
当施設は、スタジオやプールのほか、100台ものマシンを所有するフィットネスクラブです。
マシンはフィットネスに合わせた様々な設備が揃い、各専門分野のインストラクターが常に指導できるよう常駐しています。
肩こりや腰痛の改善、ダイエット、体力づくりなど、様々な目的に合わせて専門のインストラクターから的確なアドバイスが受けられる体制を整えています。
スタジオプログラムは多彩なプログラムをご用意し、随時開催しています。定員さえ超えなければ、いくつでもご自由にご参加いただけます。
大浴場は、ジェットバス、シャワー、サウナ、水風呂を完備し、マッサージルームでは運動後の疲れや痛みを残さないよう資格をもったスタッフがマッサージをいたします。
ご興味のある方は、ぜひ無料見学にお越しください。

「当施設は、スタジオや~」の前(テキストを内包するp要素の中)に、「pic.jpg」を挿入する。
なお、img要素には、以下の属性を設定すること。

200ピクセル
高さ 200ピクセル
代替テキスト ""(空の代替テキスト)

「pic.jpg」に、回り込みを設定するためのクラス「float_right」を設定する。

「施設のご案内」ページのCSSの編集

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

画像の回り込みを設定するクラス「float_right」のスタイルを設定する。

セレクター img.float_right
下マージン 20ピクセル
左マージン 20ピクセル
フロート

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

問題4 「料金プラン」ページの作成

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

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

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

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

title要素のテキスト
料金プラン - HAPPINESS FITNESS CLUB
メイン領域のh1要素のテキスト
料金プラン

「料金プラン」ページのHTMLの編集

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

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

ソース
<table>
<caption><strong>ご利用料金</strong><p>ご利用する時間帯、料金をご確認いただき、ご希望に合った会員プランをお選びください。また、入会金、年会費等は一切かかりませんので、お気軽にご入会ください。</p></caption>
<tr>
<td>会員プラン</td>
<td>利用時間</td>
<td>金額</td>
</tr>
<tr>
<td>正会員A(全施設利用)</td>
<td>10:00-23:00</td>
<td>9,625円/月</td>
</tr>
<tr>
<td>正会員B(プールのみ利用)</td>
<td>10:00-23:00</td>
<td>3,980円/月</td>
</tr>
<tr>
<td>デイ会員</td>
<td>10:00-18:00</td>
<td>6,890円/月</td>
</tr>
<tr>
<td>都度会員</td>
<td>10:00-23:00</td>
<td>ご利用1回ごとに<br>2,030円</td>
</tr>
</table>

一行目のすべてのセルを、見出しセルに変更し、以下の属性を設定する。

scope col

仕上り見本を参考に、テーブルの二列目の「10:00-23:00」のセルを結合し、余計な文字は削除する。

仕上り見本を参考に、四行目と五行目(見出し行も含む)の間に行を追加し、以下のテキストをコピー&ペーストする。

テキスト
ナイト会員 18:00-23:00 7,950円/月

三列目(見出しセルとデータセル)にスタイルを設定するためのクラス「price」を設定する。

「料金プラン」ページのCSSの編集

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

テーブルのスタイルを設定する。

セレクター table
568ピクセル
下マージン 20ピクセル
border-collapse collapse

テーブルのキャプションに行揃えを設定する。

セレクター table caption
行揃え

見出しセルとデータセルの両方に適用するスタイルを設定する。

セレクター table th, table td
190ピクセル
パディング 10ピクセル
ボーダー
太さ: 1ピクセル、
スタイル: 実線、
色: #7aa7a2
行揃え 中央

見出しセルに背景色を設定する。

セレクター table th
背景色 #cce8e4

テーブルの三列目(見出しセルとデータセル)に幅を設定する。

セレクター table .price
125ピクセル

テーブルの三列目(データセルのみ)に行揃えを設定する。

セレクター table td.price
行揃え

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

問題5 「ご意見・ご要望」ページの作成

仕上り見本を参考に「ご意見・ご要望」ページを作成しなさい。

「ご意見・ご要望」ページのタイトルに関連するHTMLの編集

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

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

title要素のテキスト
ご意見・ご要望 - HAPPINESS FITNESS CLUB
メイン領域のh1要素のテキスト
ご意見・ご要望

「ご意見・ご要望」ページのHTMLの編集

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

h1要素の次の行に、以下のテキストをコピー&ペーストする。
仕上り見本を参考に、テキストをp要素でマークアップし、必要に応じて段落内改行を入れること。

テキスト
サービス改善のため、皆様のお声をお聞かせください。
会員の方はもちろん、ご入会を検討している方のご意見・ご要望もお待ちしております。

p要素の次の行に、form要素を挿入し、以下の属性を設定する。

action #

仕上り見本を参考に、form要素の中に以下のテキストをコピー&ペーストし、p要素でマークアップする。

テキスト
お名前

「お名前」の後に段落内改行を入れ、次の行にテキストフィールドを挿入し、以下の属性を設定する。

type (テキスト形式で設定)
name name
クラス textfield

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

仕上り見本を参考に、form要素の中に以下のテキストをコピー&ペーストし、p要素でマークアップする。

テキスト
ご意見・ご要望

「ご意見・ご要望」の後に段落内改行を入れ、次の行にテキストエリアを挿入し、以下の属性を設定する。

name comment

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

仕上り見本を参考に、form要素の中に送信ボタンを挿入し、p要素でマークアップする。

type submit
value 確認する

「ご意見・ご要望」ページのCSSの編集

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

form要素の余白を設定する。

セレクター form
上マージン 30ピクセル

テキストフィールドとテキストエリアに罫線を設定する。

セレクター input.textfield, textarea
ボーダー
太さ: 1ピクセル、
スタイル: 実線、
色: #d1ccb4

テキストフィールドの幅を設定する。

セレクター input.textfield
250ピクセル

テキストエリアの幅と高さを設定する。

セレクター textarea
500ピクセル
高さ 170ピクセル
オーバーフロー(y軸) スクロールバー

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