2級実技解説

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

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

 

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

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

 

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

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

続きを見る

 

①作業4の概要

作業3で作成したindex.htmlファイルに、フォルダに保存してあるsample2.txtの文章を、構造化し配置 します。

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

 

②成果物

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

 

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

 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>
<h1>ウェブデザイン技能検定</h1> 
<p>ウェブデザインとはパソコンや携帯端末を通して、様々な情報をインターネット上に掲載し、これを配信することを目的に、ウェブサイト（ホームページ）のデザイン（設計）を行う職種を指します。ウェブデザイン技能検定とは、こうしたウェブデザインに関わる技能を照査するための国家検定です。</p> 
<h2>技能検定とは</h2> 
<p>技能検定（ぎのうけんてい）とは、働く人々の有する技能を一定の基準により検定し、これを公証する国家検定制度であり、技能に対する社会一般の評価を高め、働く人々の技能と地位の向上、産業の発展の寄与を目的として、職業能力開発促進法に基づき、昭和34年度より実施されています。技能検定は試験に合格することにより、「技能士」と称することができます。</p> 
<h2>新着情報</h2> 
<ul> 
<li>2014-2015年 試験日程</li> 
<li>第1回試験の合格者発表</li> 
</ul> 
<h2>検定情報</h2> 
<ol> 
<li>学科試験について 
<ul> 
<li>2014年度版　試験細目</li> 
<li>学科試験問題解答</li> 
</ul> 
</li> 
<li>実技試験について 
<ul> 
<li>公式ソフトウェアについて</li> 
<li>受検用PCについて</li> 
</ul> 
</li>
</main>
<footer>
<a href="#">HOME</a>/
<a href="#">大会情報</a>/
<a href="#">ウェブデザイン技能検定</a>/
<a href="#">参加申込</a>
</footer>
</body>
</html>

 

 sample.css
「sample.css」は作業3と同様で、追記なしです。

 

③指定素材

「sample2.txt」が試験本番に提供されています。

「sample2.txt」フォルダデータはこちらよりダウンロードもできます

【sample2.txt】

ウェブデザイン技能検定

ウェブデザインとはパソコンや携帯端末を通して、様々な情報をインターネット上に掲載し、これを配信することを目的に、ウェブサイト（ホームページ）のデザイン（設計）を行う職種を指します。ウェブデザイン技能検定とは、こうしたウェブデザインに関わる技能を照査するための国家検定です。

技能検定とは
技能検定（ぎのうけんてい）とは、働く人々の有する技能を一定の基準により検定し、これを公証する国家検定制度であり、技能に対する社会一般の評価を高め、働く人々の技能と地位の向上、産業の発展の寄与を目的として、職業能力開発促進法に基づき、昭和34年度より実施されています。技能検定は試験に合格することにより、「技能士」と称することができます。

新着情報
・2014-2015年 試験日程
・第1回試験の合格者発表

検定情報
1.学科試験について
・2014年度版　試験細目
・学科試験問題解答
2.実技試験について
・公式ソフトウェアについて
・受検用PCについて

 

また、作業4は「作業3の成果物」を使用します。

作業3の成果物はこちらよりダウンロードできます。

 

④回答・解説

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

 

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

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

 

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

 

3.「sample2.txt」のテキストをコピーして、「index.html」内の「main要素」内に貼り付けます。

 

4.「main要素」に貼り付けたテキストを「sample2.txt」のテキスト構造にならって、「h1、h2、p、ul、ol、li」を指定していきます。

 

下記の通り、テキスト構造が実装されていることを確認します。

 

作業4は終了です。

-2級実技解説