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

Webサイトの概要・仕様

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

テーマ

  • 「ウッソン美容室」を紹介するWebサイトである。
  • トップページには、イメージ画像とニュースの案内文を掲載する。
  • 「ウッソン美容室について」ページでは、紹介文とイメージ画像を掲載する。
  • 「ヘアメニュー」ページでは、施術内容とプライスを一覧表で掲載する。
  • 「ご予約・お問い合わせ」ページでは、ご予約やお問い合わせを受け付けるフォームを設置する。

ページ構成

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

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

  • 「site」フォルダー内に必要なファイルを作成・修正し、Webサイトを完成させること。
  • 問題で使用する画像ファイルは、「images」フォルダー内のファイルを使用すること。
  • 問題で使用するCSSファイルは、「css」フォルダー内のファイルを使用すること。
  • 「実技用」フォルダー
    • start.html
    • 「site」フォルダー
      • menu.html ★新規作成
      • index.html
      • usson.html ★新規作成
      • contact.html ★新規作成
      • 「css」フォルダー
        • common.css
        • style.css
      • 「images」フォルダー
        • banner1.png
        • banner2.png
        • button_visit.png
        • footer.png
        • h1_right.gif
        • h2_left.png
        • header.png
        • logo.png
        • navigation1.png
        • navigation2.png
        • navigation3.png
        • usson_image.jpg
        • top_image.jpg

この問題は試験対策用にオリジナルで作成用意したものです。
Copyright 2017 MITSUYO NAKATA All rights reserved.

仕様

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

  • マークアップ言語: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 2017 ウッソン美容室 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.8

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

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

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

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

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

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

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

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

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

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

フォーマットのHTMLの編集

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

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

title要素のテキスト
サロンについて | ウッソン美容室

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

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

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

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

h1要素のテキスト
ウッソン美容室について

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

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

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

セレクター #main h1
マージン
上: 0、
下: 20ピクセル、
左: 0、
右: 0
パディング
上: 5ピクセル、
下: 5ピクセル、
左: 10ピクセル、
右: 35ピクセル
背景画像 h1_right.gif
背景画像の繰り返し なし
背景画像の位置
水平方向: 530ピクセル、
垂直方向: 10ピクセル
左ボーダー
太さ: 10ピクセル、スタイル: 実線、色: #fc9705
背景色 #fceae8
文字のサイズ 150%
文字色 #630717

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

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

「usson.html」を複製し、「menu.html」、「contact.html」として保存する。

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

問題3 「ウッソン美容室について」ページの作成

仕上り見本を参考に「ウッソン美容室について」ページを作成しなさい。

「ウッソン美容室について」ページのHTMLの編集

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

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

テキスト
ウッソン美容室は、大阪南船場に位置するゆっくりとした時間の流れるプライベートサロンです。ヨーロッパ調の店内は、アットホームな癒しの空間でお寛ぎいただけます。
お客様1人1人のこだわり、髪の悩み、要望を納得のいくまでカウンセリングして施術を行います。
貴方の魅力を最大限に引き出す丁寧なカウンセリング、確かな技術力、リーズナブルな料金で髪の悩みにお応えしながら、貴方に似合うスタイルをご提案しています。
清潔感あふれるお店で、スタッフ一同心よりご来店をお待ちしています。

「ウッソン美容室は、大阪南船場に位置する~」の直前(テキストを内包するp要素の中)に、「usson_image.jpg」を挿入する。
なお、img要素には、以下の属性を設定すること。

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

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

「ウッソン美容室について」ページのCSSの編集

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

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

セレクター .picture_left
マージン
上: 0、
下: 40ピクセル、
左: 20ピクセル、
右: 20ピクセル
フロート

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

問題4 「ヘアメニュー」ページの作成

仕上り見本を参考に「ヘアメニュー」ページを作成しなさい。

「コース紹介」ページのタイトルに関連するHTMLの編集

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

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

title要素のテキスト
ヘアメニュー | ウッソン美容室
メイン領域のh1要素のテキスト
ヘアメニュー

「ヘアメニュー」ページのHTMLの編集

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

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

ソース
<table> <caption><strong>多彩なニーズにお応えするヘアサロンメニュー</strong><p>当店では、長さ、スタイル、量などに応じて追加料が加算される場合がございます。<br>カウンセリングの際、担当カウンセラーにご確認ください。</p></caption> <tr><td>施術内容</td><td>施術内容</td><td>金額</td></tr> <tr><td>シャンプー・カット</td><td>スタイリング有</td><td>1,500円</td></tr> <tr><td>シャンプー・カット</td><td>スタイリング無</td><td>1,300円</td></tr> <tr><td>シャンプー・カット</td><td>小学生以下</td><td>1,000円</td></tr> <tr><td>ヘアカラー</td><td>仕上げ別料金</td><td>3,500円</td></tr> </table>

一行目の「施術内容」と「金額」のセルを、見出しセルに変更し、以下の属性を設定する。

scope col

仕上り見本を参考に、一行目の「施術内容」のセルを結合し、見出しセルに変更するとともに、以下の属性を設定する。
なお、余計な文字は削除すること。

scope colgroup

仕上り見本を参考に、二行目から四行目からまでの「シャンプー・カット」のセルを結合する。 なお、余計な文字は削除すること。

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

テキスト
パーマ カット・ブロー・スタイリング付 6,000円

三列目のセルに、幅を設定するためのクラス「price」を設定する。

「ヘアメニュー」ページのCSSの編集

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

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

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

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

セレクター table caption
オーバーフロー hidden
行揃え

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

セレクター table th, table td
パディング 10ピクセル
ボーダー
太さ: 1ピクセル、
スタイル: 実線、
色: #666666

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

セレクター table th
背景色 #65161b
文字の色 #ffffff
行揃え

テーブルの二行目(見出し行含む)以降の三列目のデータセルに幅を設定する。

セレクター table td.price
75ピクセル
行揃え 中央

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

問題5 「ご予約・お問い合わせ」ページの作成

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

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

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

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

title要素のテキスト
ご予約・お問い合わせ | ウッソン美容室
メイン領域のh1要素のテキスト
ご予約・お問い合わせ

「ご予約・お問い合わせ」ページのHTMLの編集

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

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

テキスト
「ご予約内容」には、「ご希望」「ご予約日時」「連絡先」を入力してください。
また、「ホームページを見ました」と入力していただくと、初めての方のみ10%オフさせていただきます。

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

action #

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

テキスト
お名前

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

type (テキスト形式で設定)
name name
id名 name

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

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

テキスト
ご予約内容

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

name request
id名 request

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

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

type image
ファイル名 button_visit.png
alt 確認画面へ

「ご予約・お問い合わせ」ページのCSSの編集

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

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

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

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

セレクター input#name, textarea#request
ボーダー
太さ: 1ピクセル、
スタイル: 実線、
色: #999999

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

セレクター textarea#request
450ピクセル
高さ 150ピクセル
オーバーフロー スクロールバー

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