Webクリエイター能力認定試験<上級>の対策とコツ

知識を覚えてしまえば高い確率で合格できると思いますが、少しでも合格率を100%に近づけるための試験でのコツをまとめています。

出題傾向と時間配分

【規定問題】

規定問題は50分の試験で9問を解かなければいけません。問題1から問題9までそれぞれ異なるフォルダが用意され、文字色や背景色などを指示通りに入力していきます。最初からすべてを入力するわけではなく補足的にHTMLやCSSの記述を行うため、穴埋めと同じような感覚です。

規定問題と自由問題の難易度はほとんど変わりませんが、自由問題の120分（テキストエディタ使用の場合）に比べて規定問題は50分とかなり時間が短いので時間配分を考えなければいけません。出題傾向としては一問目に外部CSS（CSSフォルダ）とimages（画像フォルダ）、HTMLファイルが用意され、CSSの記述やHTMLでページのタイトルに受験番号を入力するような問題が出るようです。

試験時間は50分ですから平均すると一問あたり5分半程度ですが、一問目には少し時間がかかります。6～8分程度かかる問題が四問程度（問題1、objectとクリッカブルマップを使った問題、テーブルを使った問題、form作成の問題など）とHTMLファイルが一つだけでCSSをページ内に記述タイプの問題には3分程度の時間配分がベストだと思います。

規定問題、自由問題ともに60点以上での合格となるので、Webクリエイター能力認定試験の合否の鍵は規定問題と言っても良いほどです。とにかく規定問題は時間との勝負ですから、一つの問題にあまり時間を取られないようにしましょう。

【自由問題】

自由問題は一つのWebサイトを作成するような形になります。CSSフォルダ、imagesフォルダ、それと基本となるHTMLファイルが用意されています。

まず最初の問題はCSSの記述からです。CSSファイルに指示に従って記述を行います（いくつかCSSファイルが用意されている場合があります）。この段階ではHTMLファイルとリンクしていないため確認できないのが少し厄介かもしれません。

しかし、自由問題は出題形式がWebサイトの作成というだけで指示通りに記述すると言う点では規定問題と全く同じです。それでテキストエディタ使用の場合は120分と規定問題の倍以上（Webページ作成ソフト使用の場合は90分）の試験時間が設けられているため、規定問題を時間内に解ける人であればかなり時間に余裕ができます。CSSの記述にはある程度時間をかけても良いでしょう。

CSSの記述の次は基本となるHTMLファイルを作成し、それを複製しいくつかのページを作成していきます。作成内容については規定問題とほぼ同じような内容になっています。

【サンプル問題】

規定問題と自由問題のサンプル問題が配布されていますので、出題傾向を理解しコツをふまえて実際に読み解いて行きましょう。

サンプル問題のダウンロードはこちらのページから

ショートカットキー

規定問題対策としてなるべく時間短縮するためショートカットキーを使用します。

Ctrl+Z作業工程を前後に戻す
Ctrl+X選択したテキストを切り取る（切り取ったテキストは保存される）
Ctrl+C選択したテキストをコピーする
Ctrl+V保存したテキストを選択箇所へ貼付ける
Ctrl+Sファイルを上書き保存する

以上はメモ帳の基本的なショートカットキーです。かなりの時間短縮になりますのでぜひ使いこなせるようになりましょう。覚え方としてはCtrl＋S以外のキーはZXCVと横並びです。

コピーと貼付けを活用する

例えば自由問題で外部CSSへのリンクの追加の問題が出題された場合は、<link rel="stylesheet" type="text/css" href="css/style.css">の部分をコピーし、貼付けた後にstyle.cssの部分のみを変更することで簡単に追加することができます。

他にもlistを作成する場合は<li>と</li>をコピーし、必要なリスト分だけ貼り付けを行います。その他にも同じ文字列が続くような場合はコピーと貼付けを最大限活用して時間の短縮を行いましょう。

また、意外なところで「漢字が読めない」という場合にも、用意されているテキスト内にあればコピーして貼り付けることでカバーできることがあります。

全角入力してしまった場合

誤ってタグを全角入力してしまった場合は、F10を押すことで半角英数字に変換することができます。記述し直す手間が省けるので時間短縮を図れます。変換されるだけなので、続けて半角英数字入力する場合は切り替えてから行いましょう。

具体例：＜ｓぱん＞→<span>

新規ファイル作成

自由問題は一つのファイルをもとに、新しくページを作成していきます。メモ帳で「ファイル」メニューから「名前を付けて保存」を行うと新規ファイルとして保存され、編集中のファイルが新しく名前をつけたファイルに置き換わります（もちろん、名前をつける前のファイルはそのままです）。

HTMLの記述について

終了タグ（開始タグの前に/を付加したもの）は省略できるものもありますが、統一して記述する癖をつけておきましょう（br要素やimg要素等の空要素は除く）。思わぬレイアウトの崩れを防ぐことができます。

CSSでの記述について

CSSはセレクタ{プロパティ:値;}の最後のプロパティの値の;（セミコロン）は省略可能ですが、省略せずにきちんと書く癖をつけておきましょう。後からプロパティを追加した場合に、;（セミコロン）を付け忘れるミスを防ぐことができます。

擬似クラス

a要素の擬似クラスは、記述する順序によって思ったようなスタイルの指定ができないことがあります。CSSの優先順位によって上書きされてしまうことが原因ですが、そうならないための順序を覚えておきましょう。

a:link未アクセスのリンク
a:visitedアクセス済みのリンク
a:hoverポイント時のリンク
a:activeクリック時（押した状態）のリンク

上記のように、a:link、a:visited、a:hover、a:activeの順になります。試験問題では記述順に指示が出されますが、指示のない擬似クラスがある場合は飛ばして記述しましょう。また、単にリンク部分に指示があった場合は擬似クラスではなくa要素にスタイルを指定します。

また、一度クリックしたリンクはアクセス済みリンクとなります。未アクセスのリンクを確認できるよう、すべてをクリックしないようにしましょう。a:activeの指定を確認する場合、クリックはマウスボタンを押した後リンク上で離すことで認識されますので、マウスボタンを押したままリンク外で離すとリンク先に飛ばずに確認することができます。

擬似リンクの覚え方はそれぞれですが、一例でliving hack（リビングハック）をあげておきます。li（link）vi（visited）ng h（hover）ac（active）kの順になっています。living hack自体に特別な意味はなく、暗記用のものです。

CSSでの相対パス

CSSフォルダ（フォルダ内にCSSファイル）、imagesフォルダ（フォルダ内にjpgやgifなどの画像ファイル）、HTMLファイルというように用意されている場合、HTML内にCSSを記述する場合に比べて注意点があります。

CSSファイルで背景イメージを指定するにはimagesフォルダ内の画像ファイルを指定する必要がありますが、CSSファイルから見てimagesフォルダは（../images）、imagesフォルダ内の画像ファイルは（images/bg.jpg）というように表します。つまり、CSSファイルからimagesフォルダ内の画像ファイルを指定する場合は（../images/bg.jpg）というような相対パスになります。(../)を記述する点に注意です。

CSSプロパティcolor

color（文字色）を指定する場合は{color:#ffffff;}のような記述になりますが、#と;の間にきちんと6桁記述されているかを確認し、ひとつ足りなかったり、ひとつ多かったりなどがないように気をつけましょう。

CSSプロパティfloat

floatを使った問題では記述を誤るとレイアウトが極端に崩れてしまうことがあります。floatを使用する問題でレイアウトが崩れてしまった場合は、floatが「froat」や「flort」など誤った記述になっていないか、floatを解除するclearプロパティがきちんと記述されているかを確認しましょう。

CSSショートハンド

ショートハンドとは{border-style:solid;}、{border-weight:2px;}、{border-color:#000000;}を｛border:solid 2px #000000;}というようにまとめて指定することです。規定問題では「borderプロパティで一括指定せよ」というように指示がありますが、自由問題では指定する値が同じ枠線の中に記載されています。

ただ、過去問題で同じ枠線の中に記載されているのにショートハンドで記述すると完成例と異なる表示になる場合がありました。ショートハンドは省略した値をデフォルトの値に指定し直す特徴があります。過去問題の傾向から見ると、記載ミスであると思われますが例外として覚えておいた方が良いかもしれません。

ショートハンドは「省略した値をデフォルトに指定し直す」ということを理解しておくことが重要です。

時間がかかりやすい問題

いくつか時間のかかる問題がありますが、出題傾向はほとんど同じなのでしっかり理解しておきましょう。

【object要素によるFlashファイルの埋め込み】

  1. <object></object>と記述します。
  2. <object>に指示通りに設定値を記述します。→<object data="ファイルのパス" type="MIMEタイプ" width="幅" height="高さ">
  3. object要素の間に<param>を記述します（param要素には終了タグはありません）。
  4. <param>に指示通りに設定値を記述します。→<param name="パラメータの名前" value="パラメータの値">
  5. 指示がある場合はobject要素を段落に指定します。
◎一例
<p><object data="movies/flash.swf" type="application/x-shockwave-flash" width="500" height="300">
<param name="src" value="movies/flash.swf">
<param name="loop" value="flase">
</object></p>←段落に設定

objectの属性値は記述が長くなりますが、パターンが決まっていますのでスムーズに記述できるようにしておきましょう。また、param要素はひとつ作成したらコピーして貼り付けし、値だけを変更することで時間を短縮できます。srcを指定した場合のvalueの値はobjectの属性値であるdataの値と等しくなりますので、こちらもコピーして貼り付けましょう。

object要素はインライン要素であるため、ブロックレベル要素であるdiv要素やp要素の中に記述します。問題の傾向ではp要素による段落指定が多いので、見落としがないように注意しましょう。

【クリッカブルマップ】

  1. <img src="ファイルのパス" usemap="#マップ名">のようにusemap="#マップ名"を追加します。#をつけ忘れないように注意しましょう。
  2. img要素の直ぐ下に<map name="マップ名"></map>を記述します。この場合のマップ名には#をつけません。
  3. map要素の間に<area>を記述します（area要素には終了タグはありません）。
  4. <area>に指示通りに設定値を記述します。→<area shape="形状" coords="座標" href="リンク先のファイルパス" alt="代替文字">
◎一例
<img src="images/zukei.jpg" usemap="#map">
<map name="map">
<area shape="rect" coords="50,60,150,100" href="index.html" alt="トップ">←コピーする
<area shape="rect" coords="150,60,250,100" href="news.html" alt="ニュース">←貼り付けし、一部修正
<area shape="rect" coords="250,60,350,100" href="about.html" alt="概要">←貼り付けし、一部修正
<area shape="rect" coords="350,60,450,100" href="contact.html" alt="お問合わせ">←貼り付けし、一部修正
</map>

クリッカブルマップを作成する場合の注意点はusemapの値に#を付け忘れないことと、ひとつarea要素を作成したらコピー貼り付けを行うことです。area要素は座標、リンク先のファイルパス、代替文字の記述だけが異なる場合が多く大幅に時間を短縮することができます。

【tableの作成】

  1. <table></table>を記述します。
  2. テーブルタイトルを指定する場合は<caption></caption>を記述します。
  3. 2列6行の場合は<tr><td></td><td></td></tr>が1行分になるので、これをコピーし6行分table要素内に貼り付けます。
  4. セルの結合を行う場合はブラウザの更新を確認しながら行います。まとめて行うと訂正が難しくなる場合があるからです。
  5. 後はセル内の記述を指示通りに行います。
◎一例
<table>
<caption>テーブルタイトル</caption>
<tr><td>A</td><td>B</td></tr>←コピーする
<tr><td>C</td><td>D</td></tr>←貼り付けし、一部修正
<tr><td>E</td><td>F</td></tr>←貼り付けし、一部修正
<tr><td>G</td><td>H</td></tr>←貼り付けし、一部修正
<tr><td>I</td><td>J</td></tr>←貼り付けし、一部修正
<tr><td>K</td><td>L</td></tr>←貼り付けし、一部修正
</table>

tableを作成する場合はまず1行分を記述したら、作成する分コピーを行います。1列目を見出しセルに指定する場合は、ｔd要素をｔｈ要素に変更します。

tableに関する問題ではtableの作成以外にセルの結合を行う問題があります。この場合はrowspan（行と行の結合なので縦に結合）やcolspan（列と列の結合なので横に結合）で結合を行ったら、不要なセルが出ますので、セルの結合と不要なセルの削除を一つのセットとして考え、ブラウザで確認しながら行いましょう。

【formの作成】

  1. <form></form>を記述します。
  2. form要素の間にinput要素を記述します。input要素はtype属性とセットで使用し、その属性値によって記述内容が異なります。また、input要素は終了タグを用いず、p要素やtable要素などのブロックレベル要素の中に記述を行います。
  3. プルダウンメニューの選択リストを作成する場合は<select name="名前"></select>をform要素の間に記述し、セットとしてその中に<option value="値">選択項目名</option>を記述します。select要素は、p要素やtable要素などのブロックレベル要素の中に記述を行います。
  4. テキストエリアを作成する場合は<textarea name="名前" cols="幅" rows="高さ"></textarea>をform要素の間に記述します。textarea要素は、p要素やtable要素などのブロックレベル要素の中に記述を行います。
◎一例
<form>
<p>お名前<br>
<input type="text" name="name" size="30" maxlength="30"></p>
<p>性別<br>
<input type="text" name="mail" size="30" maxlength="30"></p>
<p><input type="radio" name="seibetu" value="male" checked>男性&nbsp;
<input type="radio" name="seibetu" value="female">女性</p>
<p>血液型<br>
<select name="blood">
<option value="a">A型</option>
<option value="b">B型</option>
<option value="c">C型</option>
<option value="d">D型</option>
</select></p>
<p>お問合わせ<br>
<textarea name="contact" cols="40" rows="4"></textarea></p>
<p><input type="submit" value="送信"><input type="reset" value="クリア"></p>
</form>

formを作成する場合はそれぞれの属性の記述方法を覚えておきましょう。また、input要素は終了タグを用いませんが、select要素やそれとセットで用いるoption要素、textarea要素は終了タグが必要です。form要素内の各要素はp要素やtable要素で囲むことも忘れないようにしましょう。

ブラウザでの確認

こまめにブラウザで表示確認することで、間違いや訂正箇所が把握しやすくなります。backgroundの指定なら正しく背景が変化したか、borderの指定ならきちんと線が表示されたか、などの指定された部分に着目しながら解いていきましょう。ブラウザの更新はCtrl+RまたはF5キーでショートカットを行うことができます。

もし思ったように表示されなかった場合は、タイプミス、記述不足（/スラッシュや、＜小なり、＞大なりが抜けているなど）、半角スペースや記号が全角で記述されていないかを確認します。

この段階で解決しなければ、要素や属性、プロパティの指定自体が間違っている可能性が高いため先の問題へと進み、すべての問題に目を通した後にリファレンスで確認します。優先すべきことは解ける問題から解いていくことです。

見直し

最後は完成例とじっくり見比べ、表示と異なる部分はないか、くまなくチェックしましょう。見た目が同じように表示されていれば、合格点である60点以上はまず堅いかと思います。

inserted by FC2 system