ウェブデザイン技能検定2級を受けるにあたり役に立った問題集や過去問サイトをメモ。2級は3級に比べて教材が少ないです。実務経験やスキルを備えた方が受けるので、あまり需要がないのかもしれません。
本
テキスト
2023年に発売された比較的新しいテキストで、現時点で買えるものはこれしか見当たりません。
ウェブデザイン技能検定 2級ガイドブック
過去問題集
2つとも10年以上前に発売されたもので古いのですが、買えるものはこれしかなさそうです。どんなジャンルの問題がでるのか本で知りたければ、参考になるかもしれませんが、公式サイトの直近の過去問の方が役立ちそうです。
過去問サイト
公式サイト
公式サイトの過去3回分の学科・実技の問題と解答（1級・2級・3級）
過去問題の公表 – ウェブデザイン技能検定 (webdesign.gr.jp)
公式サイト以外の過去問公開サイト
実技試験対策
実技試験用素材
FOM出版社のダウンロードサイト。2級の実技試験用のファイルをダウンロードできます。平成25年版で古い内容ですが、練習用に使えます。
ウェブデザイン技能検定 データダウンロード | FOM出版
実技試験対策の参考サイト
参考になる動画
実技試験「作業5a」対策
正規表現
自分用のメモなので、説明は省いています。ある程度、正規表現がわかっていればなんとなくわかるかもしれません。
問題で用意されたテキストを<option>に置き換える場合
試験問題として用意されたテキストデータが
1 ABC 〇〇空港
2 EFG ××空港
で
<option value="ABC">〇〇空港</option>
<option value="EFG">××空港</option>
と置き換えたいとき。
検索語
(\S*)(\s*)(\S*)(\s*)(\S*)(\s*)
置換語
<option value="$3">$5</option>\r\n
余計な空白行を一度に全部削除したいとき
もし、正規表現で文字列を置き替えた際に、余計な空白行が大量に発生してしまい、削除するのが大変な場合に使います。
検索語
^\n
置換語
（空白）
SELECTの選択肢の連番をJavascriptで設定したいとき
例えば1940年～2024年までの84年分を選択する<option value="1940">1940</option>を連番でSELECTタグの中に84個も作るのは大変です。直近では実際に「令和5年度 第3回」の問題で出ています。時間が無い中でこんな問題が出たら焦るでしょう。Javascriptが苦手ならがんばって打つしかありませんが、Javascriptに慣れていれば、ループで作成することができます。
<select name="date[0]">
<script>
for (let i = 1940; i <= 2024; i++) {
document.write(`<option value="${i}">${i}</option>`)
}
</script>
</select> 年
document.write()内の`はシングルクォーテーションではないので注意してください。
1990年を初期値としてselectedをIF文で追加する際は以下のようになります。
<select name="date[0]">
<script>
for (let i = 1940; i <= 2024; i++) {
if ( i == 1990 ) {
document.write(`<option value="${i}" selected>${i}</option>`)
} else {
document.write(`<option value="${i}">${i}</option>`)
}
}
</script>
</select> 年
実技試験「作業5b」対策
公式サイトで公表されている問題を見ると、毎年同じようにJavascriptを使ってスタイルを変更する内容がほとんどです。基本的にはgetElementByIdで指定したID要素のスタイルをCSSで指定すればいいみたいです。
Javascriptを多少触ったことがあり、CSSもそれなり分かっていれば、「作業5a」でHTMLをたくさん書くよりも時間的にも難易度的にも簡単かもしれません。
ただし、試験時はサンプルコードなどはなく、命令を１字ずつ打っていかないといけないので、ソースコードを確実に書けるスキルが必要です。文法やスペルミスで動作しないときはパニックになりそうですが…。
Javascriptでスタイルを変更するソース例
HTML例
適当に私が用意したHTMLですが、仮に試験問題のindex.htmlが以下の内容だった場合。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>ウェブデザイン技能検定</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<a href="#" id="change" onclick="change();">変更</a>
<p id="contents">何らかのテキスト</p>
</body>
</html>
q5.jsに書くJavascrit例
基本的には例年、以下の2行を書くだけでOK。paddingで上下10px、左右30pxを指定した例。
function change() {
//以下の2行
const obj = document.getElementById("contents"); //constまたはvar
obj.style.padding = "10px 30px";
}
その他、過去の問題やこんなのが出てきたら書けないかもというスタイルは以下。
function change()
const obj = document.getElementById("contents"); //constまたはvar
// ここでスタイルを指定/
obj.style.textDecoration = "underline";
obj.style.display = "block";
obj.style.color = "red";
obj.style.border = "1px solid #000";
obj.style.width = "fit-content";
//万が一アラートを出す問題だったら
alert('変更しました。');
}
getElementByIdの書き方やサンプルコーは以下のページが参考にまります。
注意すること
getElementByIdの大文字と小文字
getElementByIdの大文字と小文字の組み合わせを正しく書かないと間違うとスクリプトが動きません。例えばよくある例としてIdの部分をIDと書いたりすることがあります。全部大文字や全部小文字もNGです。確実にgetElementByIdと書くことが必要です。VS Codeでは入力中に候補が表示されるので、大丈夫かと思いますが。
ハイフンを含むスタイル
例えばfont-size、text-decoration、background-colorなど、ハイフンがあるとJavascriptが引き算のマイナスとして捉えるためエラーになります。この場合はfontSize、textDecoration、backgroundColorなど。ハイフンの後ろの文字を大文字にします。
