Webクリエイター能力認定試験 エキスパート
模擬問題1(HTML5)実技問題

Webサイトの概要・仕様

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

テーマ

  • 動物園「ZOO LOGICAL」のWebサイトである。
  • トップページには、スライドショーとお知らせを掲載する。
  • 「動物園について」ページでは、動物園の説明と広場の紹介文を掲載する。
  • 「ガイドのご案内」ページでは、動物解説のガイド案内を一覧表で掲載する。
  • 「人気の動物たち」ページでは、動物を画像と紹介文とのセットでサムネイルとして掲載する。
  • 「お問い合わせ」ページでは、お問い合わせフォームを設置する。

ページ構成

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

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

  • 「site」フォルダー内に必要なファイルを作成・修正し、Webサイトを完成させること。
  • 問題で使用する画像ファイルは、「images」フォルダー内のファイルを使用すること。
  • 問題で使用するCSSファイルは、「css」フォルダー内のファイルを使用すること。
  • 問題で使用するJavaScriptファイルは、「js」フォルダー内のファイルを使用すること。
  • 「material」フォルダーには、「start.html」に関連するファイルが格納されている。関連するファイルの閲覧は「start.html」からWebブラウザーで開き、確認すること。
  • 「実技用」フォルダー
    • start.html
    • 「material」フォルダー
    • 「site」フォルダー
      • about.html ★新規作成
      • animals.html ★新規作成
      • base.html
      • contact.html ★新規作成
      • guide.html ★新規作成
      • index.html ★新規作成
      • 「css」フォルダー
        • common.css
        • responsive.css
        • style.css
      • 「js」フォルダー
        • slideshow.js
      • 「images」フォルダー
        • about_photo1.jpg
        • about_photo2.jpg
        • animals_photo1.jpg
        • animals_photo2.jpg
        • animals_photo3.jpg
        • animals_photo4.jpg
        • animals_photo5.jpg
        • animals_photo6.jpg
        • bg.jpg
        • bg_arrow.png
        • bg_footer.png
        • bg_h1_bottom.gif
        • bg_h1_left.png
        • bg_h2_bottom.png
        • bg_h2_head.png
        • bnr_contact.png
        • bnr_guide.png
        • graphic1.png
        • graphic2.png
        • graphic3.png
        • logo.png
        • nav1.png
        • nav2.png
        • nav3.png
        • nav4.png
        • path_arrow.png

仕様

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

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

問題1 基本ページの作成

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

基本ページのHTMLの編集

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

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

title要素のテキスト
動物園について : ZOO LOGICAL

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

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

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

代替テキスト ZOO LOGICAL
(属性は省略)
高さ (属性は省略)

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

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

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

テキスト 動物園について
リンク先 about.html
li要素のid名 nav_about
テキスト ガイドのご案内
リンク先 guide.html
li要素のid名 nav_guide
テキスト 人気の動物たち
リンク先 animals.html
li要素のid名 nav_animals
テキスト お問い合わせ
リンク先 contact.html
li要素のid名 nav_contact

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

ソース
<ol>
<li><a href="index.html">ホーム</a></li>
<li>動物園について</li>
</ol>

div要素(id属性「path」)の次の行に、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_area">
<dl>
<dt><img src="images/bnr_guide.png" alt="ガイドのご案内"></dt>
<dd>飼育員が動物たちをご紹介</dd>
</dl>
</div>
<div class="bnr_area">
<a href="contact.html">
<p><img src="images/bnr_contact.png" alt="お問い合わせ"></p>
</a>
</div>

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

div要素(id属性「contents」)の次の行に、footer要素を挿入し、以下のソースをコピー&ペーストする。

ソース
<p id="pagetop"><a href="#top">ページの先頭へ戻る</a></p>
<address>山梨県富士吉田市X-X-X 電話 0120-XXX-XXX 営業時間 9:00~17:00(休園日:月曜日、年末年始)</address>
<p id="copyright"><small>Copyright 2014 ZOO LOGICAL All rights reserved.</small></p>

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

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

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

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

セレクター body
背景画像 bg.jpg
背景画像の繰り返し 横方向のみ繰り返し
背景画像の位置
水平方向: 中央、
垂直方向: 上
文字色 #666666

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

セレクター header, nav, #path, #contents, footer
860ピクセル
マージン
上: 0、
下: 0、
左: (各自考える)、
右: (各自考える)

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

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

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

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

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

セレクター nav ul li
215ピクセル
フロート

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

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

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

セレクター nav ul li#nav_about a
背景画像 nav1.png
セレクター nav ul li#nav_guide a
背景画像 nav2.png
セレクター nav ul li#nav_animals a
背景画像 nav3.png
セレクター nav ul li#nav_contact a
背景画像 nav4.png

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

セレクター #main
550ピクセル
パディング 20ピクセル
背景色 #ffffff
フロート

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

セレクター #sub
240ピクセル
フロート

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

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

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

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

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

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

「base.html」を複製し、「index.html」、「about.html」、「guide.html」、「animals.html」、「contact.html」として保存する。

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

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

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

ファイル名 body要素のid名
about.html about
guide.html guide
animals.html animals
contact.html contact

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

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

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

セレクター #about #nav_about a, #guide #nav_guide a, #animals #nav_animals a, #contact #nav_contact a, nav ul li a:hover
背景画像の位置
水平方向: 0、
垂直方向: -60ピクセル

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

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

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

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

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

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

title要素のテキスト
ZOO LOGICAL

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

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

パンくずリスト領域のid属性「path」をid属性「graphic」に変更する。
また、番号付きリストのol要素、li要素を削除し、以下のソースをコピー&ペーストすること。

ソース
<ul>
<li class="now"><img src="images/graphic1.png" alt="「ペンギンのすみか」が4月25日にオープン!遊びにきてね!" class="image1"></li>
<li><img src="images/graphic2.png" alt="ZOO LOGICALにパンダが登場!5月10日から6月29日まで" class="image2"></li>
<li><img src="images/graphic3.png" alt="トラさんが「みんなの来場を待ってるよ!」と言っている。" class="image3"></li>
</ul>

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

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

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

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

h1要素をh2要素に変更し、テキスト「動物園について」を以下のテキストに変更する。
なお、テキストはコピー&ペーストすること。

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

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

ソース
<ul>
<li>2014年07月25日動物園にライオンがやってきます。</li>
<li>2014年05月10日緊急企画『パンダ展』を開催します。</li>
<li>2014年04月25日ゴールデンウィーク展『ペンギンのライフスタイル』を開催します。</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ピクセル、
左: 160ピクセル、
右: 0
下ボーダー
太さ: 1ピクセル、
スタイル: 点線、
色: #fb484e
インデント -160ピクセル

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

問題2(3)で保存した「index.html」に、レスポンシブWebデザインの設定を行い、保存しなさい。
なお、レスポンシブWebデザインの表示はブラウザーの幅を縮めて確認すること。

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

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

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

問題3 「動物園について」ページの作成

仕上り見本を参考に「動物園について」ページを作成しなさい。

「動物園について」ページのメイン領域のHTMLの編集

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

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

ソース
<h2>ZOO LOGICALとは</h2>
<p><img src="images/about_photo1.jpg" alt="" class="photo_right">ZOO LOGICALは大きな池と緑豊かな森に囲まれた、人も動物も大自然の中でゆっくりとできる動物園です。</p>
<p>来園者の皆様に動物を見て楽しんでいただくだけでなく、動物の生態や自然環境などにも理解を深めていただくため、長年培った飼育方法や生態研究の結果なども公開するよう取り組んでいます。<br>環境学習のため、動物や自然に関する出張講座も受け付けております。お問い合わせフォームよりご相談ください。</p>
<p>動物と親しむため、知るため、ぜひ当園をご利用ください。</p>

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

ソース
<h2>動物たちとのふれあい</h2>
<p><img src="images/about_photo2.jpg" alt="" class="photo_right">通常の動物展示だけではなく、動物たちとふれあえる広場もあり、小さいお子様から大人まで楽しめるスポットになっています。</p>
<p>ここにいる動物たちは好奇心旺盛で人懐っこいため、初めての方でも自然に動物とともだちになれるでしょう。</p>

「動物園について」ページのCSSの編集

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

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

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

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

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

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

問題4 「ガイドのご案内」ページの作成

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

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

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

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

title要素のテキスト
ガイドのご案内 : ZOO LOGICAL
パンくずリスト領域のli要素のテキスト「動物園について」
ガイドのご案内
メイン領域のh1要素のテキスト
ガイドのご案内

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

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

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

ソース
<table>
<tr><th scope="col">動物</th><th scope="col">開始時刻</th><th scope="col">集合場所</th></tr>
<tr><td class="animal_name">ゴリラ</td><td>10時00分</td><td>第一森エリア入口</td></tr>
<tr><td class="animal_name">パンダ</td><td>12時00分</td><td>第二森エリア入口</td></tr>
<tr><td class="animal_name">トラ</td><td>15時00分</td><td>第三森エリア入口</td></tr>
<tr><td class="animal_name">ホッキョクグマ</td><td>10時30分</td><td>海エリア入口</td></tr>
<tr><td class="animal_name">ライオン</td><td>13時00分</td><td>第一草原エリア入口</td></tr>
<tr><td class="animal_name">シマウマ</td><td>14時30分</td><td>第二草原エリア入口</td></tr>
</table>

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

ソース
<strong>開始時刻と集合場所</strong><p>飼育員が動物について詳しく解説いたします。各ガイドは、事前申し込みは不要ですので、開始時刻までに各集合場所へ直接おいでください。所要時間はすべて約20分です。</p>

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

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

「ガイドのご案内」ページのCSSの編集

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

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

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

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

問題5 「人気の動物たち」ページの作成

仕上り見本を参考に「人気の動物たち」ページを作成しなさい。

「人気の動物たち」ページのタイトルに関連するHTMLの編集

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

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

title要素のテキスト
人気の動物たち : ZOO LOGICAL
パンくずリスト領域のli要素のテキスト「動物園について」
人気の動物たち
メイン領域のh1要素のテキスト
人気の動物たち

「動物紹介」ページのメイン領域のHTMLの編集

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

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

ソース
<p>ZOO LOGICALでは、特にゴリラ、ホッキョクグマなどが人気です。動物たちも皆さんに会えるのを楽しみにしています。ぜひ、会いに来てください。</p>
<div class="animals_area">
<img src="images/animals_photo1.jpg">
ゴリラ<br>優しい性格で、バナナや葉だけではなく、昆虫も食べる雑食動物です。
<img src="images/animals_photo2.jpg">
ホッキョクグマ<br>泳ぎが大得意で、何十kmも海を泳ぐことができます。
</div>
<div class="animals_area">
<img src="images/animals_photo3.jpg">
ニホンザル<br>群れを作り集団生活をしています。知能が高く学習能力があります。
<img src="images/animals_photo4.jpg">
シマウマ<br>名前の由来であるその縞模様は、外敵から身を守る保護色といわれています。
</div>
<div class="animals_area">
<img src="images/animals_photo5.jpg">
ツキノワグマ<br>特徴は胸の三日月形の模様です。昼にも活動しますが、実は夜行性です。
<img src="images/animals_photo6.jpg">
ヒョウ<br>ご飯は木の上で食べることもあります。食事の時間にはその姿が見られるかもしれません。
</div>

img要素とimg要素の直下にあるテキスト(段落内改行含む)をfigure要素で6箇所にマークアップする。

figure要素の中にあるテキスト(段落内改行含む)をfigcaption要素で6箇所にマークアップする。

「人気の動物たち」ページのCSSの編集

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

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

セレクター .animals_area figure
265ピクセル
マージン
上: 0、
下: 15ピクセル、
左: 20ピクセル、
右: 0
フロート
オーバーフロー hidden

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

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

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

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

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

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

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

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

title要素のテキスト
お問い合わせ : ZOO LOGICAL
パンくずリスト領域の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 message

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

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

type submit
value 確認する

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

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

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

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

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

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

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