令和 5 年度
第3回
ウェブデザイン技能検定
2級
実技試験問題◇受検上の留意事項◇
1.試験会場では、技能検定委員の指示に従うこと。
2.実技試験用 PC の OS は Microsoft Windows 10 以降である。OS やアプリケーションソフトの操作方法等についての質問への回答や補助など一切応じない。
3.本検定試験では、Google Chrome、Mozilla Firefox、Microsoft Edge(Internet Explorer11 は使用可能とするが非推奨とする)の最新安定版を指定ウェブブラウザとする。検定用 PC にインストールされた本検定試験指定ソフトウェアは、TeraPad、サクラエディタ、Sublime Text、Visual Studio Code、画像処理ソ
フトウェア:Adobe Photoshop、ウェブエディタおよびウェブコンテンツ作成ソフトウェア:Adobe Dreamweaver、検定用 PC 上で配布される JavaScript ライブラ
リの jQuery、および OS に標準で備えられているアクセサリソフトウェアとし、各データを処理するために適切なものを受検者各自で判断し使用すること。指定されたソフトウェア以外を利用して作業を行うことはできない。指定されたソフトウェア以外を使用して作業を行った場合は不合格とする。検定用 PC からインターネットへのアクセスができないことに十分注意すること。
4. 受検中は、用具の貸し借り、PC およびデータの交換、不正に持ち込んだデータの利用、検定用 PC からインターネットへのアクセス、イヤフォンおよび携帯電話やスマートウォッチの使用、他受検者への妨害行為等を禁止する。水分補給の為、閉栓可能な飲料は持ち込み可能であるが、その飲料などが原因で機材等にトラブルが発生した場合は自己責任となるため注意すること。受検中に不正があった場合や技能検定委員に不正を指摘された場合、受検者は作業を中止して退場すること。なお、不正行為があった場合は、不合格とする。
5.受検の際、机上には受検票、身分証明書類、筆記用具、閉栓可能な飲料のみ置くことができる。携帯電話やスマートウォッチなどの通信機器は机上には置かず、受検中は必ず電源を切っておくこと。携帯電話やスマートウォッチなどの通信機器を時計の代わりに利用することはできない。
6.計時は、技能検定委員に説明された時計を利用すること。受検の際には、30 分経過、受検終了 10 分前に技能検定委員からアナウンスを行う。開始より 30 分を超え、制限時間内に試験を終了した場合、技能検定委員に試験終了の意思表示を行い、試験会場より退出することができる。ただし、再入場は認めない。
退室は技能検定委員の指示に従うこと。
7.受検中のトイレ、体調不良の際は必ず技能検定委員に申し出ること。所要時間については受検時間に含まれる。また、座席などを離れる場合、アプリケーション等の操作画面、ブラウザ画面などが表示されないよう留意すること。
8.検定用 PC のトラブル等により作成中のデータが失われる場合もあるため、各自データ保存やバックアップに留意して作業を行うこと。受検中、検定用 PC がフリーズするなど、機器にトラブルが発生し作業が中断した場合は、作業再開までの時間を技能検定委員が記録し、規定試験時間終了後も受検者は記録された時間を追加して作業の継続ができる。
9.制作した課題の著作権は試験主催者である、特定非営利活動法人インターネットスキル認定普及協会に帰属する。
10.その他、いかなる場合にも技能検定委員の指示に従って、受検すること。

◇解答にあたっての注意◇1. 『試験設備点検表および実技試験課題選択表』について、次の指示に従うこと。指示に従わない場合には採点されない場合があるので注意すること。
(1) 受検番号欄には、必ず受検票に記載されている実技試験受検番号を記入すること。
(2) 氏名欄には、必ず受検票に記載されている氏名を記入すること。
(3) ＨＢ程度の鉛筆またはシャープペンシルを使用し、解答を訂正する場合は消しゴムできれいに消し、消しくずを残さないようにすること。
(4) 『実技試験課題選択表』に選択した作業番号を必ず記入すること。
2. 受検票は、試験時間中は必ず技能検定委員が見やすい机上の、通路側の位置に提示しておくこと。
3. 試験時間終了時に、『試験設備点検表』および『実技試験課題選択表』を回収する。試験問題は持ち帰ること。
4. 作業を実施するにあたり、ソースなどをウェブブラウザで正しく表示されるように修正することが必要な場合がある。
5. 受検者は課題 1 から 4 までの 4 課題と課題 5a、5b より 1 課題を選択し、計 5 課題を 120 分間で作業し完了させること。
6. 作業で利用する素材は、デスクトップ上の data2 フォルダで配布している。また、受検者はデスクトップ(または技能検定委員に指示された場所)の wd2 フォル
ダに、課題に従いフォルダ、ソースファイルなどを配置し提出すること(wd2 フォルダが作成されていない場合は受検者が作成すること)。なお、保存するデータは 5 課題分のみとし、不適切なデータの保存や不要なファイルがある場合は減点の対象となる。
7. 作成するファイル名には全角文字は使用せず、半角英数字のみとして、スペースなどを入れずに作成すること。またファイルのデータ形式、拡張子等にも留意すること。データの保存は問題で作成を指示されたフォルダに保存すること。
8. 本検定試験では、ハイパテキストマーク付け言語(HTML)については JIS X 4156:2000 (ISO/IEC15445:2000) および W3C(ワールドワイドウェブコンソーシアム)HTML4.01 以降を対象とし、拡張可能なハイパテキストマーク付け言語(XHTML)はW3C XHTML 1.0 以降を対象とする。段階スタイルシート(CSS)については JIS X4168:2004 およびW3C CSS 2.1 以降を対象とする。ただし、HTMLについてはHTML Review Draft—Published 29 January
2020、CSS3 以降の各モジュールは 2023 年 4 月 1 日の時点でW3Cにおいて勧告されているものを推奨する(http://www.w3.org/Style/CSS/ 参照)。なお、素材に予め文書型宣言が記述してある場合は、それに従うこと。また、作成するHTMLファイルの文字コードはUTF-8 にすること。

ウェブデザイン技能検定 実技試験 2 級

作業 1 から 4 について、各設問の文章に従い作業を行いなさい。
また作業 5a、および 5bから一問を選択し、各設問の文章に従い作業を行うこと。
作業で利用する素材は、デスクトップ上のdata2 フォルダのものを使用すること。
各設問の指示に従い、デスクトップ上のwd2 フォルダにフォルダ、ソースファイルなどを配置し提出すること。
wd2 フォルダが作成されていない場合は受検者が作成すること。
すべての課題提出データは検定指定ウェブブラウザで正しく表示されること。
作業 1：以下の文章に従い作業を行いなさい。
下記の仕様に従って、『ウェブデザイン技能検定』の公式サイトのナビゲーションシステム用のパーツ画像をデザインし作成しなさい。ナビゲーションはウェブサイトのサイトヘッダ部分下部の 800 px × 46 px のエリアに「HOME」、「協会情報」、「ウェブデザイン技能検定」、「受検申請」の 4 つの項目が水平に配置されるものとする。それぞれ 4 つのメニュー項目は、横幅寸法 800 px に収まっていること。また、作成する画像ファイルは、ロールオーバーのためにそれぞれ統一感のある 4 つのメニュー項目毎に 2 種の画像を作成し、合計 8 ファイルとする。
下記に掲げる仕様の要件はすべて含まれなければならないが、指定以外の要素については任意とする。
作成したデータファイルは、デスクトップ上のwd2 フォルダ内にt1 というフォルダを作成し保存すること。

作業 1 仕様･ 幅 800 px 高さ 46 px 内で 4 つのメニュー項目を作成すること(各々のメニュー項目の幅は任意とする)。
･ 解像度 72 ppi(dpi)・ GIF 形式・ 256 色・ ロールオーバーのためにメニュー項目毎に、視認性のためのコントラスト（十分に異なる明度差）に配慮した 2 種の統一感のある画像を作成すること。
・ ナビゲーションの項目は次の表記とすること。

HOME、協会情報、ウェブデザイン技能検定、受検申請

作業 2：以下の文章に従い作業を行いなさい。
下記の仕様に従って、『ウェブデザイン技能検定』の公式サイトに利用するアニメーションバナーを作成しなさい。JavaScriptによるアニメーションもしくはGIF形式いずれかとして作成すること。
下記に掲げる仕様の要件はすべて含まれなければならないが、指定以外の要素については任意とする。
素材ファイルimg001.bmp、img002.jpg、img003.pngは、data2 フォルダのq2 フォルダ内に保存されている。画像は仕様に準ずる限り編集することが出来る。
JavaScriptとして作成する場合はdata2 フォルダ内にあるjQueryファイルを利用することができる。それ以外のJavaScriptライブラリなどは利用することができない。またDreamweaver同梱のテンプレートやBootstrapモジュールおよびスニペット機能などを利用して作成した場
合には減点の対象となることがある。
作成したデータファイルは、デスクトップ上のwd2 フォルダ内にt2 というフォルダを作成し保存すること。
JavaScriptとして作成した場合には表示に必要な他のファイルとともに保存し、HTMLの名称はanim.htmlとすること。
なお作業 2 で作成したアニメーションバナーは次の設問（作業３）で使用されることに配慮して作成する必要がある。

作業 2 仕様･ 幅 800 px 高さ 56 px･ 指定された画像より 2 つ選択し、適切な状態に加工して必ず使用すること。
img001.bmp、img002.jpg、img003.png･ バナーに掲載する情報は次の素材テキストファイルの文章をもれなくすべて利用すること。テキストの文字は可読であること。
banner_copy.txt･ アニメーションでいずれかの要素が変化(動き・切替等)する設定がされていること。
･ アニメーションファイルの総容量は 500 k バイト以内とすること（jQuery ファイルを使用した場合はそれらも含む）。

2

ウェブデザイン技能検定 実技試験 2 級

作業 3：以下の文章に従い作業を行いなさい。
下記の仕様に従って、data2 フォルダのq3 フォルダに保存されているindex.htmlおよびsample.cssファイルを編集し、作業 1 および作業2 で作成したファイルを用いてそれらが検定指定ウェブブラウザでもれなく閲覧できるようにレイアウトしなさい。
下記に掲げる仕様の要件はすべて含まれなければならないが、指定以外の要素については任意とする。
作成したデータファイルは、デスクトップ上のwd2 フォルダ内にt3 というフォルダを作成し、index.html という名称で保存すること。その際は、サーバにアップロードする場合と同様に必要なソースファイルを配置し、またフォルダ構造にも留意して、必ずウェブブラウザで表示できるようパスの設定を行うこと。

作業 3 仕様･ ページタイトルを「ウェブデザイン技能検定公式サイト」とすること。
･ ページ上部に、バナーとして作業 2 で完成したアニメーションを配置し表示させること。
･ ブラウザウインドウ内に、CSS で幅 800 px のコンテンツエリアを作成し中央に配置すること。
図 1.レイアウト図参照･ コンテンツエリアは任意の背景色を CSS で指定すること。
･ ナビゲーションはウェブサイトのサイトヘッダ部分下部の 800 px×46 px のエリアにグローバルナビゲーションとして、作業 1で作成した画像ファイルを配置すること(HOME、協会情報、ウェブデザイン技能検定、受検申請の順で配置する)。
･ グローバルナビゲーションでは、マウスポインタが画像の上にある時だけその画像の代わりに別の画像を表示するロールオーバー機能を、作業 1 で作成された各項目につき 2 種の画像を用いて実装すること。ロールオーバー機能は CSS またはJavaScript によって実装されなければならない。
・ コンテンツエリア下部(フッター)にグローバルナビゲーションと同じ名称、同じ順にてテキストナビゲーションを配置すること。

グローバルナビゲーション

図 1.レイアウト図3

ウェブデザイン技能検定 実技試験 2 級

作業 4：以下の文章に従い作業を行いなさい。
作業 3 で作成したindex.html ファイルに、data2 フォルダのq4 フォルダ内に保存してあるsample2.txtの文章をよく読み、構造化し配置しなさい。
作成したデータファイルは、デスクトップ上のwd2 フォルダ内にt4 というフォルダを作成し保存すること。その際は、サーバにアップロードする場合と同様に必要なソースファイルを配置し、またフォルダ構造にも留意して、必ずウェブブラウザで表示できるようパスの設定を行うこと。

作業 5a：以下の文章に従い作業を行いなさい。
data2 フォルダのq5aフォルダ内にあるform.htmlを用いて、「表 1 フォームの条件」および「表 2 HTTP リクエストインタフェース(各パラメータ)」に従い、大会参加予約用ページを作成しなさい。
修正したform.htmlファイルはデスクトップ上のwd2 フォルダ内にt5aというフォルダを作成し保存すること。なお、actionに指定するURLは現在存在していないが、制作を依頼しているものとする。
表 1 フォームの条件
actionhttps://webdesign.gr.jp/form.php

methodpost

表 2 HTTP リクエストインタフェース(各パラメータ)
名前

name

生年月日

date[0],date[1],date[2](*1)

参加区分participation

(*2)

メール

mail

*1 生年月日は date[0]年 date[1]月 date[2]日 となるように 3 つのパラメータを送信すること。それぞれ 1940～2023、1～12、1～31 の値から選択できるようにすること。date[0]年の初期値は 1990 とすること。
*2 参加区分は participation.txtを元に、表示は区分名、送信は数値にすること。

作業 5b：下記の文章に従い作業を行いなさい。
data2 フォルダの q5b フォルダ内にある q5.js を編集し、同フォルダ内にある index.html の id 属性の値に change が指定された要素をクリックすると、id 属性の値に contents が指定された要素内の文字に実線の下線がつくようにしなさい。
q5.js 以外のファイルを編集する必要はない。
完成した q5.js は、表示に必要な他の HTML ファイルなどとともにデスクトップ上の wd2 フォルダ内に t5b というフォルダを作成し保存すること。

◇写真素材について◇
本検定試験における写真素材の一部は、写真 AC 様よりご協力をいただいております。
◇免責事項◇
本検定試験において記載されている企業名、製品名は、それぞれの企業の商標又は登録商標である。
受検上の留意事項、設問内等ではⓇ、TM マークを明記しない。

4