思考停止するな

ネットワークとかアプリケーションとかWebとか

ウェブデザイン技能検定3級 実技試験攻略完全対策

スポンサーリンク

ウェブデザイン技能検定3級に合格したので、試験対策の記事を書いてみます。
ウェブデザイン技能検定3級の試験は学科試験と実技試験の2つに分かれています。

本記事では、実技試験攻略のために作業でやるべきことや作業のコツを書いていきたいと思います。

ウェブデザイン技能検定3級の実技試験は6つある作業の中から5つを選んで作業を行い、作業をしたファイルを提出する形式です。
作業の内容は平成27年時点の内容です。
過去問を見るとわかるのですが、大体のパターンはほぼ毎回同じような問題が出題されます。

ただし、
ディレクトリ構造、CSSファイル、パスについての理解は最低限必要
です。

それでは、それぞれの作業内容について書いていきます。

作業1

作業1では、指示されたディレクトリ構成に修正して正しくCSSを適用させたり、画像を表示させるように修正する作業を行います。
(1)ディレクトリ構成を指示された内容と同じにします。
その際に、フォルダを新規作成する作業が必要になります。
また、パスについての理解が必要になり、CSSファイルと画像のパスを修正します。

CSSを適用させるにはindex.htmlのCSSの指定記述を修正します。
hrefの指定をCSSファイルのパスにします。

<link href="CSSファイルのパス" rel="stylesheet" type="text/css">

画像を表示させるには、画像のパスの修正を行います。
srcの指定を画像ファイルのパスにします。

<img src="画像ファイルのパス">

正しく表示されているかどうかは、ブラウザで表示してみて、スタイルが正しく適用されているか、画像が表示されているかで確認できます。

(2)フォルダを指示された場所に保存します。

注意点 ブラウザで表示した時に、CSSが適用され、画像も表示される状態にしなければならない。

作業2

作業2ではリンクの修正を行います。
※4問ある場合は、(1)(2)ともにリンクの修正です。
(1)リンクの修正を行います。
リンクを貼るには hrefの指定を行います。

<a href="リンクしたいhtmlファイルのパス"></a>

(2)指定されてた箇所のテキストの修正を行います。
ページタイトルとは

<title>◯◯◯</title>

の◯◯◯の部分です。
指定された箇所を◯◯◯の文字に置き換えます。

(3)フォルダを指示された場所に保存します。

注意点 リンクの張り間違いに注意する必要があります。

作業3

問題のパターンが大きく3パターンあるのでそれぞれについて書きます。
(1)-1 スタイルシートの修正を行い横によっている要素を中央に配置します。
左に寄っているコンテンツを中央に配置します。
そのため、CSS内にmarginの設定を追加します。
具体的には以下の内容を追加します。

margin-right:auto;
margin-left:auto;

また、すでにmarginに

margin:0px;

という記述があった場合は、

margin:0px auto;

と修正します。

marginがどこにあるか見つける際にはctrl + f を行って検索すると楽です。

(1)-2 スタイルシートの修正を行い左右の位置を入れ替えます。
移動させたい要素を

float:left;

とすると左側に要素を持って来れます。
同様に

float:right;

とすると右側に要素を持って来れます。

(1)-3 最適なCSSを選択します。
1つずつCSSを適用させて、ブラウザで確認して最適なものを選びます。

(2)フォルダを指示された場所に保存します。

作業4

スタイルシートを修正して色の変更を行う作業を行います。

(1)スタイルシートを使って色の変更を行います。
背景色の変更方法

background-color: 指定された色;

文字色の変更方法

color: 指定された色;

のように修正します。

(2)フォルダを指示された場所に保存します。

作業5

背景に画像を適用させる作業を行います。

(1)背景画像の適用を行います。

background-image:url(画像のパス)

(2)フォルダを指示された場所に保存します。

注意点
・同じに見える画像が複数ある場合は、データ量が少ない方を利用する
・利用しなかった画像ファイルは削除する

作業6

HTMLで簡単な文章の作成を行います。

(1)文章配置を行います。
HTMLの知識が必要です。
指示された文章の内容に従ってh1要素、h2要素、p要素、ol要素、ul要素を使い文章を記述します。
h1要素、h2要素、p要素、ol要素、ul要素についてそれぞれの役割を調べておくといいと思います。

(2)フォルダを指示された場所に保存します。

注意点 txtファイルは削除する

全体的なコツと注意点

・ファイル名、ディレクトリ名が正しいが注意する
不要なファイルは削除する
・ctrl + fを使って検索を行う

実技試験攻略のために作業でやるべきことや作業のコツについて書いてみました。
ウェブデザイン技能検定3級の実技試験を受験しようと考えている人のお役に立てれば幸いです。

shimonss.hatenablog.com

shimonss.hatenablog.com