学習効率UP】ウェブデザイン技能検定3級試験の過去問題を徹底解説!!

ウェブデザイン技能検定3級試験の過去問対策

ウェブデザインという分野で唯一のIT国家資格「ウェブデザイン技能検定」。これからこの資格を取ろうと思っている方にとって、どのように学習していくのが一番最短で合格できるのか? 情報がたくさんあるだけに迷ってしまいますよね。

試験は学科(25問)と実技(6問中5問を選択)とあって、その両方に合格してはれて「3級ウェブデザイン技能士」となれます。2級、1級は実務経験がある程度の年数必要になってきますので、実務未経験で技能士の資格をとろうと思ったら、まずはウェブデザイン技能検定の3級を取得しましょう。

この試験は公式サイトから過去問と解答をダウンロードして勉強できますが、これには問題と解答のみなので、ひとつずつ問題に出てくる用語とその解答の用語の意味をググって調べるのが、結構時間もかかって大変です。今この資格を取ろうと思って勉強している方も、問題と解答は手に入るので、あとは解説があればな~と思っている方も多いんじゃないでしょうか?

この試験は過去の問題がそのまま出てくる、またはちょっとひねって出てくることが多いので、対策としてはむやみに勉強するよりも、とにかく過去問を解きまくって専門用語をおぼえるのと、答えがなぜそうなるのかを理解していくのみです。

ちなみに筆者は3級、2級と持っていますが、試験の時は過去問3年分を1ヵ月間とにかく繰り返し解きまくりました。分からないところはググりながらだったので、それなりに大変でしたが。

だからこそこのサイトの出番です。こちらにわたくしの言葉で恐縮ですが、過去問に対しての解説をまとめてみましたので、ぜひ試験勉強のお役にたててくださいね。

試験の過去問は公式サイトからダウンロードできます

ウェブデザイン技能検定の公式サイト内の以下のリンクを参照。過去問題と解答が公表されています。
http://www.webdesign.gr.jp/kentei/publication.html

こちらには練習問題(学科、実技)と実技素材が公表されています。
http://www.webdesign.gr.jp/kentei/measures.html#rensyu

公式サイトでは過去3回分の問題しか公表されていませんが、実は直リンクで行くとかなり過去の問題も表示されます。こちらで各試験の解説の最初に、過去問題への直リンクのアドレスを貼っていますので、公式サイトで公表されているものよりもっと過去の問題も解きたいという方はクリックしてください。

ただし、あまりに時間がたってしまうと、公式サイト側で過去問題のPDFデータを完全に削除されるようなので、早めにダウンロードすることをおすすめします。

複雑な問題には、解説の中に「もっと詳しく見る」リンクを設置しています。こちらはわたしが試験勉強する際に、参照させていただいたサイト様です。丁寧にわかり易く解説されていますので、理解を深めるのにぜひ参照してみてください。それでは、順序よく学科試験からひとつずつクリアしていきましょう。

過去問題【最新】の解説(平成29年度第5回学科試験)

ウェブデザイン技能検定3級学科(平成29年第5回試験)

〇平成29年度-第5回学科試験の過去問題と解答pdfはこちら

第1問の解説

答え=1 HTMLの属性値は、セキュリティの面からクォーテーションで囲むようにと言われています。またシングルとダブルでは、ダブルクォーテーションが推奨されています。

第2問の解説

答え=1 head要素はbody要素の前に記述します。各要素記述する流れは、ドキュメント宣言→head→bodyの順です。head内にはそのページのタイトルやディスクリプションなどを記述します。実際にWebページで表示されるのはbodyに記述した内容です。

これとよく似た綴りのheaderがありますが、これはbody内に記述する属性で、ここにナビゲーション機能を書いたりします。

ごっちゃにならないように注意しましょう。

第3問の解説

答え=2 擬似クラスのhoverとは、そこにマウスポインタを乗せると色が変わる、画像が変わるといった動的な効果をつける際に使用します。

よく利用される例では、リンクテキストの上にマウスを乗せたら色が変わるとかいった効果ですが、このhoverはa要素で使うことが多いだけで、a要素にしか使えないということではありません。

例えば画像(img要素)にhoverを加えることで、画像にマウスが重なったら拡大表示させるといった使い方もあります。

アイディア次第で色々な使い方ができますよ。

もっと詳しく見る>>

第4問の解説

答え=2 加法混色とはモニターなどで色を再現する際の仕様で、赤(R)緑(G)青(B)の3色の掛け合わせで表現します。

それぞれの色を加えていってMAX値(255)になると白になることから加法混色といいます。

逆にそれぞれの色を減らしていってMAX(0)まで減らすと白になるのが減法混色といって、これはインクで色を再現する印刷物での色再現の仕様(CMYK)です。

問題では赤、青、黄色と問われているので×です。

第5問の解説

答え=2 拡張子を変えれば、そのファイル形式も変わるということはありません。書き出したファイルをJPEGにしたいのなら、PhotoshopなどのアプリでJPEGで保存、PNGならPNGで保存しないとダメです。

第6問の解説

答え=1 ルビとは読み仮名のことです。古いバージョンのHTMLでは未対応でしたが、HTML5では対応してます。

第7問の解説

答え=2 アクセシビリティとは、その情報やサービスが使いやすいか、見やすいかということで、アクセシビリティを高くすることはユーザーのためにもとっても重要なことです。

背景が白なら、その前面にあるオブジェクトの色で一番見やすいのは黒となります。背景とのコントラスト比が高ければ高いほど良いということですね。

第8問の解説

答え=1 トップレベルドメインとは、アドレスの最後にある.comや.jpなどのことです。これらには意味があって、.jpは国を識別するドメインで「日本」ということです。国や地域、法人か非営利団体かなどでもドメインの種類が分けられています。

ちなみに.comは世界中誰もが取得可能です。逆にco.jpは株式会社などの法人企業じゃないと取得できません。

もっと詳しく見る>>

第9問の解説

答え=2 エラーとまではいきませんが、<br />と末尾にスラッシュを入れるのはXHTMLの書き方です。HTML5では<br>とスラッシュなしで書くようにしましょう。

第10問の解説

答え=1 ホームページを開設するなら、このクロスブラウザチェックは必ず必要です。現在ブラウザも複数ありますので、みんながみんなクロームやIEを使っているわけではありません。制作者はどのブラウザで見ても問題なく表示できる作り方をしないといけないのですが、どんなに意識していても、クロームでは良いのにIEで見ると表示が崩れているといったことはよくありますのでご注意を。

第11問の解説

答え=4 人によっては足を組んだほうがリラックスできるという人もいるかもしれませんが、一般的にはこの場合不適切なのは4番です。

また1番の「ディスプレイから40~50cm離し」というくだりの「40~50cm」は憶えておいてください。過去に何センチ離れるのが適切かという問題も出ていますので。

第12問の解説

答え=3 ウイルスに感染する一番の原因はメールの添付ファイルです。知り合いならまだ開いてしまうのもわからないでもないですが、安易に添付ファイルを開くのはよくありません。有名企業の名を語ったメールだからと安易に信用してはダメですよ。

第13問の解説

答え=1 外部の「src.js」というファイルを読み込む際は、<head>~</head>内に<script type="text/javascript" src="src.js"></script>と記述します。

HTML5からはtext/javascriptの記述が省略されて<script src="src.js"></script>と書きます。

※「src.js」の部分はファイル名ですので、この部分はファイル名で都度変わります。

第14問の解説

答え=2 この問題はファイルの階層構造が理解できるかを問う問題です。4択のうち2番以外はCSSというフォルダ階層の記述が入っていますが、画像があるフォルダは上記のCSSコードの記述から見てもimgフォルダ内だとわかります。よって正解は2番となります。

第15問の解説

答え=3 OSI参照モデルは3級の試験ではよく出ます。これはまず語呂合わせで「アプセトネデブ」と憶えてください。

それぞれは
ア=アプリケーション層(7層)
プ=プレゼンテーション層(6層)
セ=セッション層(5層)
ト=トランスポート層(4層)
ネ=ネットワーク層(3層)
デ=データリンク層(2層)
ブ=物理層(1層)

国際標準化機構(ISO)によって策定されています。コンピュータの持つべき通信機能を階層構造に分割したモデルで、通信プロトコルを7つの階層に分けて定義しています。

もっと詳しく見る>>

第16問の解説

答え=1 aside要素とは、そのコンテンツと関係しているけど、本筋ではないのでちょっとだけ書いておくという際に使用します。よく書籍の端に補足として書いてあるあれと同じような効果です。

と考えると、この要素に当然main要素を含むことはできません。

第17問の解説

答え=4 JavaScriptとはHTMLで作られた静的なページに動的な要素を加えるプログラミング言語です。

4択の中にDOMアクセスとありますが、これはDocument Object Modelといって、HTML内の各要素にアクセスして、例えばP要素にアクセスして文字を動的に差し替えるといった使い方をします。これはよくJavaScriptでおこないますが、これのためのJavaScriptということではなく、あくまでJavaScriptでできることのひとつです。

JavaScript=WEBページに動的な機能を追加すると憶えましょう。

第18問の解説

答え=3 無彩色とはその名の通り色がない(モノクロ)を指します。モノクロとは黒、白、グレーのことでです。

4択のうち、3番の赤以外は無彩色なので、正解は唯一色のついた赤となります。

第19問の解説

答え=4 レスポンシブウェブデザインとは、ユーザーのデバイス環境(PCかスマホかタブレットか)に応じてレイアウトが自動的に変わるウェブデザインの手法で、現在では制作標準の手法となっています。

ウェブデザイナーになるには、このレスポンシブウェブデザインで制作できることは不可欠な能力となっています。

第20問の解説

答え=1 HTMLで段落を表す要素は<P>要素です。これは理解というよりも丸暗記しましょう。

第21問の解説

答え=2 エラーコードはおもに300番台から500番台があって、その中で404とはアクセスしたページがないので表示できませんよという意味です。ちなみに403はアクセス拒否されたというエラーです。400番台ではこの2つだけは必ず憶えておきましょう。試験に出るのはおもにこの2つのうちのどちらかです。

第22問の解説

答え=1 #gggはうっかりスルーしそうですが、色を指定する値は0から9、AからFなので、Gという表記は存在しません。単なる引っ掛け問題ですね。ただ、まんまと引っかかる可能性もあるので、問題と解答をよく見るようにしましょう。

第23問の解説

答え=4 basefontはHTML5からは廃止されました。この手の問題もよく出るので、HTML5から廃止された要素と属性、逆に追加された要素と属性は一通り憶えておいたほうが良いです。

HTML5から廃止された要素と属性一覧>>
HTML5から追加された要素と属性一覧>>

第24問の解説

答え=3 alt属性にはその画像が何らかの事情で表示されない際、代替えとして表示するテキストを入れます。これもよく4択で出てきますので「画像の代わり」というくだりを憶えておいて、出てきた際はそれを選択しましょう。

第25問の解説

答え=2 ユニバーサルデザインとは、問題そのままに「できるだけ多くの人が利用可能となるようにデザインすること」です。過去には「障害者や高齢者を意図」とかありましたが、対象を一定の範囲に絞ったりはしません。「できるだけ多くの人」または「全ての人」がユニバーサルデザインの対象です。

目次へ戻る