ウェブデザイン技術(CSS•JavaScript)の対策と有料問題集を一部紹介

ウェブデザイン技術(CSS•JavaScript)とは？

ウェブデザイン技術(CSS•JavaScript)では、試験要項記載のスタイルシート(CSS)とそのコーディング技術、スクリプトの内容について学習します。

2級ではCSSやJavaScriptに関する基本的な知識を問われることがメインでしたが、1級では2級以上の知識と深い理解、さらに実際にコーディングを行ううえで、意図した挙動を実現するためにベストな方法などが具体的に問われます。

例えば、個々のCSSの設定は正しくても、全体としてどのような挙動になるかを理解しておかないと解けない問題があります。そのため、実務経験なしでは極めて難しいレベルの問題となります。

また、豊富な実務経験を持っていたとしても、最新のECMAScriptの仕様に関する正確な知識がないとJavaSciptの問題では苦戦することになるでしょう。

具体例をみた方がイメージしやすいので、2級と1級の過去問を抜粋して比較してみましょう。

ウェブデザイン技術(CSS•JavaScript)1級と2級の過去問を比較

ウェブデザイン技能検定2級の過去問では、ウェブデザイン技術(CSS•JavaScript)は以下のような問題が出題されています。

CSS の border-top-style, border-right-style, border-bottom-style, border-left-style の初期値はどれか。以下より 1 つ選択しなさい。

  1. line
  2. solid
  3. none
  4. hidden
- ウェブデザイン技能検定2級過去問より -

この問題の正解は3です。基本的なCSSの知識を問うもので、2級まではこのような形で基礎的な知識を問う問題が多く見られます。

では、1級の過去問を見てみましょう。

文法エラーとなる CSS のセレクタはどれか。以下より 1 つ選択しなさい。

  1. p:first-child:last-child
  2. p:first-child::first-letter
  3. p:first-child:last-child::first-letter
  4. p::first-letter:last-child
- ウェブデザイン技能検定1級過去問より -

この問題の正解は4ですが、すぐにわかったでしょうか？擬似クラスと擬似要素に関してその正しい使い方を理解していないと正解にたどり着くことは難しいです。2級までに求められる基本的な知識だけでは対応できないことがすぐに理解できるでしょう。

では次にJavaScriptの問題を比較してみましょう。まずは2級の過去問を見てみましょう。

次の JavaScript コードが実行された際に出力されるものはどれか。以下より1つ選択しなさい。 

var arr = ["1", "10", "100"];
console.log(arr.length);
  1. 3
  2. 6
  3. 100
  4. 111
- ウェブデザイン技能検定2級過去問より -

正解は選択肢1です。JavaScriptの初歩的な知識があれば、実務経験がなくても容易にわかる内容です。

では、1級の過去問を見てみましょう。

input 要素の type 属性の値が checkbox となっている change イベントに、次の JavaScript コードでリスナー関数 changeHandler を指定した。関数本体では、要素がチェックされているかどうかのプロパティ checked の値を取り出したい。このとき、 A に記述すべき適切な引数はどれか。以下より1つ選択しなさい。 

const changeHandler = ( A ) => {
    console.log('確認用:', checked);
};
  1. { target: { checked }}
  2. event: { target: { checked }}
  3. event.target: { checked }}
  4. {event: { checked }}
- ウェブデザイン技能検定1級過去問より -

正解は選択肢1です。この問題は、分割代入やイベントハンドラーなどモダンなJavaScriptの実務経験があれば、正解がわかったのではないでしょうか？

わからなかった方は、分割代入やイベントハンドラーをきちんと学ぶ必要があります。そのためには自身でコードを書く経験を積まないと学習を深めることは難しいでしょう。

はっきり言いますが、この手の問題を暗記して臨むことはやめた方がいいです。傾向の変化や応用に対応できないためです。何より何のためにウェブデザイン技能検定1級という最高峰の試験を受けるのか？という話で、受検そのものに意味がなくなってしまいます。

そもそも、資格試験をただの暗記で突破しようとしてしまうこと自体、非常にもったいないことです。さすがに1級試験を受検する方にそんな考えの方はいないと思いますが、単なる暗記は一夜漬けの勉強同様、時間と体力の浪費にすぎず、多くのサンクコストしか生み出さないことになるでしょう。

過去問3年分の150問からわかること

1級のウェブデザイン技術(CSS•JavaScript)の過去問3年分を調べてみると、以下のような問題が出題されています。※選択肢もしくは正誤問題。

次の CSS セレクタの詳細度はどれか。以下より1つ選択しなさい。 

html body *#container [title]:enabled::first-letter
  1. 123
  2. 124
  3. 132
  4. 133

メディアクエリの書き方として文法的に誤りであるものはどれか。以下より1つ選択しなさい。

  1. (min-width:500px)
  2. all and(color)
  3. screen and (color)
  4. not screen and (color)

次の CSS が適用された h2 要素の左のボーダーは何色になるか。以下より1つ選択しなさい。 

h2 {
    border: 1px solid blue;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: 10px;
    color: #333;
}
  1. blue
  2. #333
  3. 左のボーダーは表示されない
  4. 左のボーダーはブラウザで設定されている色になる
- ウェブデザイン技能検定1級過去問より -

CSSはセレクタの詳細度に関する正確な理解、メディアクエリやプロパティの正しい使い方など多方面にわたって高度な知識と理解が求められます。

JavaScript の変数宣言であるlet とconst は、ECMAScript 2015 から定義されている。

変数 child に収められた要素を、それが差し込まれた親要素から削除したい。このとき、用いるべき適切なコードを以下より1つ選択しなさい。

  1. child.parentElement.delete(child);
  2. child.parent.remove(child);
  3. child.parentNode.removeChild(child);
  4. child.parent.removeChild(child);

次の JavaScript のコードを実行した結果を以下より 1 つ選択しなさい。 

const web = {design : '2007', development : '2015'}; web.technology = '2021';
console.log(web);
  1. { technology: '2021' }
  2. { design: '2007', development: '2015' }
  3. { design: '2007', development: '2015', technology: '2021' }
  4. const なオブジェクトへの代入なためエラーになる
- ウェブデザイン技能検定1級過去問より -

JavaScriptは、最新のECMAScriptだけではなく歴史的な経緯やその使い方の変遷を理解している必要があることがわかるでしょう。つまり、これが直感的に理解できている状態で試験に臨まなければ、とても対応できないということです。

そのような状態になるためには、フロントエンドエンジニアとしての実務経験が3年以上は必要ですし、ECMAScriptの歴史的変遷を独自に学習する必要があるでしょう。

ここまでで、CSSもJavaScriptもかなり多方面かつ高度な知識、理解が求められることがわかりました。しかもこれらの問題は異なる年に出題されていることから、毎年少しずつ傾向が変わることを意味しています。これでは、過去問をマスターしたとしても、ウェブデザイン技能検定1級試験の対策は不十分になる可能性が高いと言えるでしょう。

ウェブデザイン技能検定1級合格のための対策

ウェブデザイン技能検定1級合格のためには、過去問の演習だけでは難しいことがわかりました。では、どのような対策を行えばいいでしょうか？

最も効果的かつ現実的な対策は、過去問で出題されたカテゴリーに関する学習を深めていくことです。

ウェブデザイン技術(CSS•JavaScript)の場合は、これまでの過去問で出題されたことのある以下の分野を、過去問で出題されていない内容を中心に学習を深めていくことで、出題頻度の高い分野を網羅的に学習することができます。その結果、過去に出題されたことない内容の問題が出てきても、対応できるようになるでしょう。

  • CSSはセレクタの詳細度に関する正確な理解、メディアクエリやプロパティの正しい使い方
  • JavaScriptは、最新のECMAScriptだけではなく歴史的な経緯やその使い方の変遷についての正確な理解、dom操作やイベントハンドラの高度な知識

さらに、出題頻度に関わらず、試験要項記載の分野を網羅的に学習を深めることで、より合格率を高めることができるでしょう。

自分の力だけで乗り越えられるか？

ご自身で過去問以外の内容についても学習を深めることができれば、難易度の高いウェブデザイン技能検定1級も合格できるでしょう。

しかし、ゼロから勉強方法を見つけ出しトライアンドエラーを繰り返すことになるため、合理的な勉強方法を確立するのは簡単ではありません。

おそらく、ウェブデザイン技能検定1級合格を目指す方は、意識が高く仕事以外にも多くの自己研鑽をしていたり、家族をお持ちの方もいるでしょう。そのような環境下で、自分の力だけでゼロから合格につながる勉強方法を確立するのは、多くの時間と労力がかかり、極めて難しいのではないでしょうか？

ウェブデザイン技術(CSS•JavaScript)の有料問題を一部紹介

ウェブデザイン技能検定1級学習サイトで用意している、ウェブデザイン技術(CSS•JavaScript)の有料問題を一部紹介します。

有料問題の一部とサンプル問題をやってみて、ウェブデザイン技能検定1級合格のための勉強に役立つと思ったら、ぜひ有料問題集にチャレンジにしてみてください。

ウェブデザイン技能検定1級学習サイトの使い方

まずは、サンプル問題をやってみてください。

サンプル問題で要領を掴んだら、有料問題集にチャレンジしてみてください。

有料問題集を申し込んでいただくと、月額3,300円ですべての問題集をフル活用することができます。一度受験した経験がある方は、3ヶ月もあれば十分に学習できるでしょう。 2級合格者で初めて1級に臨むという方は、6〜12ヶ月を目安に学習してみましょう。勉強時間にすると1日30分として、90~180時間もあれば十分な実力がつくはずです。

じっくり勉強して理解を深めたり、1級試験に備えたいという方もいらっしゃるでしょう。 その場合は、年割りプランがおすすめです。2ヶ月分お得でじっくり1年間問題集をフル活用して本番に臨めます。

ぜひ、ウェブデザイン技能検定1級学習サイトをフル活用して、ウェブデザイン技能検定1級合格を勝ち取ってください！