【ウェブデザイン技能検定2級】試験勉強に使える本、過去問サイト

Mon, 27 May 2024 00:00:00 +0000

ウェブデザイン技能検定2級を受けるにあたり役に立った問題集や過去問サイトをメモ。2級は3級に比べて教材が少ないです。実務経験やスキルを備えた方が受けるので、あまり需要がないのかもしれません。

本

テキスト

2023年に発売された比較的新しいテキストで、現時点で買えるものはこれしか見当たりません。
ウェブデザイン技能検定 2級ガイドブック

過去問題集

2つとも10年以上前に発売されたもので古いのですが、買えるものはこれしかなさそうです。どんなジャンルの問題がでるのか本で知りたければ、参考になるかもしれませんが、公式サイトの直近の過去問の方が役立ちそうです。

過去問サイト

公式サイト

公式サイトの過去3回分の学科・実技の問題と解答（1級・2級・3級）
過去問題の公表 - ウェブデザイン技能検定 (webdesign.gr.jp)

公式サイト以外の過去問公開サイト

https://dol.co.jp/archives/column/%E3%80%90%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%8A%80%E8%83%BD%E6%A4%9C%E5%AE%9A2%E7%B4%9A%E3%80%91%E4%BB%A4%E5%92%8C5%E5%B9%B4%E5%BA%A6%E7%AC%AC2%E5%9B%9E%E5%AD%A6 https://dol.co.jp/archives/column/%E3%80%90%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%8A%80%E8%83%BD%E6%A4%9C%E5%AE%9A2%E7%B4%9A%E3%80%91%E4%BB%A4%E5%92%8C5%E5%B9%B4%E5%BA%A6%E7%AC%AC2%E5%9B%9E%E5%AD%A6

https://webdesignskill-strategy.com/2ndclass-writing-list https://webdesignskill-strategy.com/2ndclass-writing-list

実技試験対策

実技試験用素材

FOM出版社のダウンロードサイト。2級の実技試験用のファイルをダウンロードできます。平成25年版で古い内容ですが、練習用に使えます。
ウェブデザイン技能検定データダウンロード | FOM出版

実技試験対策の参考サイト

https://webdesignskill-strategy.com/2ndclass-practical-work-01 https://webdesignskill-strategy.com/2ndclass-practical-work-01

参考になる動画

https://nttdocomo-developers.jp/entry/20231220\_2 https://nttdocomo-developers.jp/entry/20231220\_2

実技試験「作業5a」対策

正規表現

自分用のメモなので、説明は省いています。ある程度、正規表現がわかっていればなんとなくわかるかもしれません。

問題で用意されたテキストを

試験問題として用意されたテキストデータが

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の書き方やサンプルコーは以下のページが参考にまります。

https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

注意すること

getElementByIdの大文字と小文字

getElementByIdの大文字と小文字の組み合わせを正しく書かないと間違うとスクリプトが動きません。例えばよくある例としてIdの部分をIDと書いたりすることがあります。全部大文字や全部小文字もNGです。確実にgetElementByIdと書くことが必要です。VS Codeでは入力中に候補が表示されるので、大丈夫かと思いますが。

ハイフンを含むスタイル

例えばfont-size、text-decoration、background-colorなど、ハイフンがあるとJavascriptが引き算のマイナスとして捉えるためエラーになります。この場合はfontSize、textDecoration、backgroundColorなど。ハイフンの後ろの文字を大文字にします。

国家検定 on qwerty.work

【ウェブデザイン技能検定1級】過去問サイトと試験対策の参考ページのメモ

公式サイトの過去問

学科試験の過去問サイト

有料問題集（オンライン）を販売しているサイト

参考ブログ

実技試験の参考

ペーパー実技を含めた全般的な参考ページ

制作実技の参考動画

【ウェブデザイン技能検定2級】試験勉強に使える本、過去問サイト

本

テキスト

過去問題集

過去問サイト

公式サイト

公式サイト以外の過去問公開サイト

実技試験対策

実技試験用素材

実技試験対策の参考サイト

参考になる動画

実技試験「作業5a」対策

正規表現

問題で用意されたテキストを

検索語

置換語

余計な空白行を一度に全部削除したいとき

検索語

置換語

SELECTの選択肢の連番をJavascriptで設定したいとき

実技試験「作業5b」対策

Javascriptでスタイルを変更するソース例

HTML例

q5.jsに書くJavascrit例

注意すること

getElementByIdの大文字と小文字

ハイフンを含むスタイル

国家検定 on qwerty.work

【ウェブデザイン技能検定1級】過去問サイトと試験対策の参考ページのメモ

公式サイトの過去問

学科試験の過去問サイト

有料問題集（オンライン）を販売しているサイト

参考ブログ

実技試験の参考

ペーパー実技を含めた全般的な参考ページ

制作実技の参考動画

【ウェブデザイン技能検定2級】試験勉強に使える本、過去問サイト

本

テキスト

過去問題集

過去問サイト

公式サイト

公式サイト以外の過去問公開サイト

実技試験対策

実技試験用素材

実技試験対策の参考サイト

参考になる動画

実技試験「作業5a」対策

正規表現

問題で用意されたテキストをに置き換える場合

検索語

置換語

余計な空白行を一度に全部削除したいとき

検索語

置換語

SELECTの選択肢の連番をJavascriptで設定したいとき

実技試験「作業5b」対策

Javascriptでスタイルを変更するソース例

HTML例

q5.jsに書くJavascrit例

注意すること

getElementByIdの大文字と小文字

ハイフンを含むスタイル

問題で用意されたテキストを