【ウェブデザイン技能検定】2級実技試験　作業3の解説・回答

本記事では、ウェブデザイン技能検定の2級実技試験の作業3の解説・回答を行います。

問題については、令和5年度第2回をベースに問題解説を行います。

実技試験については、毎回ほぼ同一問題のため、今回の演習で試験対策を行えます。

2級実技試験の概要解説は下記よりアクセスできます。

: 参考【ウェブデザイン技能検定】2級実技試験の概要と対策の解説

続きを見る

①作業3の概要
②成果物
③指定素材
④回答・解説

①作業3の概要

作業3の概要は下記の通りです。

フォルダに保存されているindex.htmlとsample.cssファイルを編集し、作業 1 と作業 2 で作成したファイルを用いて、ブラウザ表示できるようにします。

仕様は下記の通りです。

タイトルを「ウェブデザイン技能競技会公式サイト」とする。
上部バナーとして作業 2 で作成したアニメーションを配置する。
CSS で幅 800px のコンテンツエリアを作成し中央に配置する。コンテンツエリアは任意の背景色を CSS で指定する。
ナビゲーションはヘッダ下部の 800px×42px のエリアにグローバルナビゲーションとして、作業 1 で作成した画像ファイルを配置する。順番は左から「HOME」「大会情報」「ウェブデザイン技能競技会」「参加申込」の順で配置する。また、マウスポインタが画像の上にある時だけ別の画像を表示するロールオーバー機能を、2種の画像を用いて実装すること。
フッターにグローバルナビゲーションと同じ名称、同じ順にてテキストナビゲーションを配置する。

詳しい問題の文章や内容は、ウェブデザイン技能検定の過去問題の公表を参考ください。

②成果物

ブラウザで成果物を表示すると下記のイメージになります。

※作業3で記入した部分は赤字です。

 index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ウェブデザイン技能検定公式サイト</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<header>
<img src="images/banner.gif" alt="">
</header>
<nav>
<a class="btn" id="home"; href="#">
</a> <a class="btn" id="info"; href="#"></a>
<a class="btn" id="web"; href="#"></a>
<a class="btn" id="sannka"; href="#"></a>
</nav>
<main>
<p>テキスト</p>
</main>
<footer>
<a href="#">HOME</a>/
<a href="#">大会情報</a>/
<a href="#">ウェブデザイン技能検定</a>/
<a href="#">参加申込</a>
</footer>
</body>
</html>

 sample.css
@charset "UTF-8";
/* CSS Document */
body{ width: 800px; margin: 0 auto; }
header{ height: 48px; background-color: darkcyan; }
nav{ height: 42px; background-color: darkgreen; letter-spacing: -.4em; }
main{ height: 800px; background-color: darkgray; }
footer{ height: 42px; background-color: darkolivegreen; }
.btn{ display: inline-block; width: 200px; height: 42px; }
#home{ background-image: url("images/home.gif"); }
#info{ background-image: url("images/info.gif"); }
#web{ background-image: url("images/web.gif"); }
#sannka{ background-image: url("images/sanka.gif"); }
#home:hover{ background-image: url("images/home_hover.gif"); }
#info:hover{ background-image: url("images/info_hover.gif"); }
#web:hover{ background-image: url("images/web_hover.gif"); }
#sannka:hover{ background-image: url("images/sanka_hover.gif"); }

③指定素材

「index.html」と「sample.css」が試験本番に試提供されています。

今回は、仮の素材として下記を用意しておきます。

「作業3の素材」フォルダデータはこちらよりダウンロードもできます

 index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
</html>

 sample.css
@charset "UTF-8";

また、作業3は「作業1の成果物のグローバルナビゲーション用の GIFファイル」と「作業2の成果物のアニメーションバナー」を使用します。

下記を参考ください。作業1の成果物はこちら、作業2の成果物はこちらからもダウンロードできます。

【作業1の成果物】

データ名：home.gif

データ名：info.gif

データ名：web.gif

データ名：sanka.gif

データ名：home_hover.gif

データ名：info_hover.gif

データ名：web_hover.gif

データ名：sanka_hover.gif

【作業2の成果物】

データ名：banner.gif

④回答・解説

1.事前準備として、デスクトップ等にフォルダを作成し（今回はt3という名前のフォルダにしていますが、試験本番ではフォルダの名前の指定もあります）、指定素材index.htmlとsample.cssをフォルダに保存します。

続けて、t3フォルダに「images」フォルダを作成し、「作業1の成果物のグローバルナビゲーション用の GIFファイル」と「作業2の成果物のアニメーションバナー」を格納します。

2.ここからはVisual Studio Codeを使用し、コードを記載していきます。

Visual Studio Codeを起動し、1.で作成した、「t3」フォルダごとVisual Studio Codeにドラッグアンドドロップし、展開します。

データの展開後は、下記のようになります。

3.仕様の「ページタイトルを「ウェブデザイン技能競技会公式サイト」とすること」より、ページタイトルを設定していきます。

下記の通り、titleタグを記載します。

4.sample.cssのスタイルシートを適応します。

下記の通り、linkタグを記載します。

5.ここからは、実際に表示されるコンテンツエリアの編集していきます。

ブラウザで表示するコンテンツエリアの指定をします。

index.html内に下記の通り、body要素を記載します。sample.css内に、下記の通り記載します。

6.コンテンツエリアの各エリアの背景色を指定します。

各エリアの表示領域は、仕様の図を元に、下記の通り設定します。

アニメーションバナー：幅800px、高さ48px
グローバルナビゲーション：幅800px、高さ42px
コンテンツエリア：幅800px、高さは指定なし（高さは任意のため、今回は800pxにしています）
テキストナビゲーション（フッター）：幅800px、高さ36px（高さは任意で、今回は36pxにしています）

index.html内に下記の通り、header、nav、main、footerを記載します。また、sample.css内に、それぞれの高さを指定します。色は任意でOKなので、下記の通りとします。

ここまでを、ブラウザで確認すると、下記のようになります。

7.仕様「上部バナーとして作業 2 で作成したアニメーションを配置する」より、headerエリアに作業2で作成したアニメーションバナーを設置します。

下記の通り、imgタグを記載します。

アニメーションバナー設置後は、下記の通りになります。

8.仕様「ナビゲーションはヘッダ下部の 800px×42px のエリアにグローバルナビゲーションとして、作業 1 で作成した画像ファイルを配置する。順番は左から「HOME」「大会情報」「ウェブデザイン技能競技会」「参加申込」の順で配置する。また、マウスポインタが画像の上にある時だけ別の画像を表示するロールオーバー機能を、2種の画像を用いて実装すること。」より、navエリアに作業1で作成したメニューを設置します。

index.html内に、class=btnとidを指定したaタグを記載します。また、sample.css内に、btnには大きさを指定し、idには作業1で作成したメニューを指定します。