【ウェブデザイン技能検定2級】学科試験コーディング分野の出題傾向と分析と対策

ウェブデザイン技能検定ブログ ウェブデザイン技能検定

公式サイトで公開されている過去3年分の試験問題を分析しました。

プログラミング言語の分野で最も多かったのはHTMLで、次にCSS、JavaScriptは2~3問、PHPは1~2問という結果に。

具体的には6:2:1:1くらいの割合なので、HTMLを中心に対策することにしました。

勉強効率が格段に上がった教材

この一冊と出会えたことで勉強時間が5倍くらい短縮できました。

実際どんな場面で役立ったのかについて紹介します。

「こっちが公式テキストかな?」と思うくらい問題との相性が良かったです。

出題傾向の分析と実際に行った対策

使用した教材
  • Progate
  • HTML&CSS全事典 (電子書籍)
  • YouTube

HTML

ProgateのHTML/CSSを上級まで終わらせましたが、過去問題には通用しませんでした。

そこでHTML&CSS全事典を使って出題されたコードを事典で引いていきます

電子書籍にしたのは、紙の本はかなり分厚く5センチくらいあったからです

コンテンツのグループ化:1~2問

dl><dt><dd
全然知らなかったんですが有名なタグなのでしょうか?毎年1問必ずといっていいほど出題されていました。

dが何の略かは「Description(説明)」ですが、には違う単語が載っていました。どうやら最近変わったようです。

テキストの定義:1問

code>に関する問題が毎回出題されます。

「ファイル名をマークアップする要素」で<pre>と<code>の違いや、ついでに<var>や<data><time>も関連づけて覚えておきます。

セクション:1問

セクショニングコンテンツの特徴や種類ついても毎回出題されます。

「潜在的に見出しとアウトラインを持つ」という特徴があるもの。

唯一特殊なのは<nav>で、見出しを持たなくてもよいという性質があります。

埋め込み型コンテンツ:1~2問

img
longdesc属性というものはHTML5では廃止になっているのになぜ出題されたのか謎でした。

iframe
YouTubeをマップを埋め込むときに見かけるタグ。頻出です。

  • <iframe> </iframe>後ろは省略しない
  • HTML文書をそのまま記述する属性→srcdoc属性

フォーム:1問

<form><input><input type=“”>
typeでつけられるものはボタン(送信ボタンなど)や入力欄(テキストなど)があります。

属性は基本的なものは覚えておく必要がありそうです。

<label>
入力欄の上に質問を記入するもので、Placeholderという入力補助に変えてはいけない

むずかしいですがこれは納得できるまで事典とGoogleで調べました。

スクリプティング:1問

HTML内に挿入するときのJavaScriptやPHPの使用方法についてよく問われます。出題例は

  • PHPを埋め込むとき
  • JavaScriptを読み込むとき
  • それぞれコメントアウトするとき

phpコードを直接埋め込むときは<?php~ ?>
JavaScriptを読み込むときは<script type=“ファイル名”>または<script src=“ファイル名”>
コメントアウトするときは<!—~—>

フォント・テキスト:1問

過去問で問われたものはHTML&CSS全事典 のそれぞれのページを読むことで理解しました。

font-familyの名称は明朝体(Serif)・ゴシック体(Sans-serif)くらいは覚えておいて損はないでしょう。

テキストは数値の基本的な使い方や初期値について問われます。

1pxや1emの意味、絶対単位と相対単位についても最近変更があったようで、これもHTML&CSS全事典 をザっと読みました。よくまとまっていました。

カラー:1~2問

hsl()や#RGBのそれぞれの基本は出題されがちでした。

  • マンセルカラーシステム
  • 色相・彩度・明度の指定の仕方
  • カラーコードの解読

コードは知っていても「そういう聞き方する?」っていう不思議な問題文があるので、過去問題に慣れておく対策は必須です。

CSSの勉強法

CSSもHTML&CSS全事典 を見ながら進め、あまり時間を割きませんでした。

出題数はHTMLに比べてそんなに多くないし、実技試験でガッツリ学ぶことになります。

過去問で問われたもののみを引いてみる感じ。

一応疑似要素の::afterと::beforeについては一読しておいたほうが良いです。

JavaScriptの勉強法

最初は1問ずつわからないコードを検索してまとめていましたが、即心が折れました。

時間がかかりすぎて先が見えなくなったので、基礎から学ぶことにしました。

Progateをできるところまでやる

レッスンは7までありできる限り最後までやったほうが良いと思います。

コーディングの読解問題は毎年1~2問は必ず出題されており、こちらも出題傾向が不明です。

配列からメソッドからDOMから、それはもう幅広く出題されています。

学習した分だけ点が取れるというシビアな感じですね…

YouTubeで実際のコーディングを習う

せいや先生のチャンネルをみました。面白かったです。笑

Progateをレッスン3まで進めた後に見ることをおすすめします。

PHPの勉強法

毎回1~2問は必ずPHPに関する問題がありますが、出題傾向がよくわりません。

難易度にも統一感はなく、超基本的なこと(記号の使い方など)を問う年もあるようです。

基本だけは押さえておいて、もし簡単な問題が出たら得点源にしたいです。

ProgateのPHP1を理解する

こちらもProgateが一番わかりやすいと思います。

PHPのレッスン1なら無料会員の範囲で受講が可能です。

先にJavaScriptをやっていればスラスラ理解できますが、ちょいちょい使う記号が違うので注意…

  • 基本的な記号(echo array . == — ++)
  • お問い合わせフォームの基本($_POST)

テキスト・参考書は必要?

公式テキストは補助として持っておき、参考書はHTML&CSS全事典 があるとスムーズです。

公式テキストには実際のコードの部分について詳しい説明がありません。

第3章~4章ですが、内容は

  • 過去の試験では☆☆が出題されたことがあるよ~
  • ☆☆が関連しているから自分で調べておいてね~

みたいな感じです。ただこれではまじで時間がかかって仕方ないのです。

例)
セクショニングコンテンツ要素に関する説明として適切なものを以下より1つ選びなさい。
セクショニングコンテンツがなんだかわからないのでググる

みたいなことを1問1問やっていると試験対策は1ヵ月では終わらないと思います。

HTML&CSS全事典があれば、知らないタグは目次から探すことができるし、

HTML、CSSそれぞれの基本解説がよくまとまっているので、超入門の人にもおすすめです。

心の底から出会えてよかった!

感想:つらい

独学の効率の悪さをひしひしと感じました…。

WordPressは2年くらい触ってきたけど、2級学科に対してはなんの武器にもなりません…。

だから世の中にはプログラミングスクールがたくさんあるんだなぁと実感。

試験まではとにかく孤独な戦いになりそうです。

つらい…

タイトルとURLをコピーしました