Webデザイナーの資格ならウェブデザイン技能検定!! ウェブデザイナーの資格 スマートフォン用の画像

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

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

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

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

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

この試験は過去の問題がそのまま出てくる、またはちょっとひねって出てくることが多いので、対策としては幅広く勉強するよりも、とにかく過去問を解きまくって専門用語をおぼえるのと、答えがなぜそうなるのかを理解していくのみです。こちらにわたくしの言葉で恐縮ですが、過去問に対しての解説をまとめてみましたので、ぜひ試験勉強の際の参考にしてください。

試験の過去問は公式サイトから

最初にウェブデザイン技能検定の公式サイト内の以下のページを参照。過去問題と解答が公表されています。

平成29年度第2回
http://www.webdesign.gr.jp/kentei/open/H29-2-3_gakka_open.pdf
平成29年度第1回
http://www.webdesign.gr.jp/kentei/open/H29-1-3_gakka_open.pdf
平成28年度第4回
http://www.webdesign.gr.jp/kentei/open/H28-4-3_gakka_open.pdf
平成28年度第3回
http://www.webdesign.gr.jp/kentei/open/H28-3-3_gakka_open.pdf

こちらには練習問題(学科、実技)と実技素材が公表されています。併せてダウンロードしておきましょう。
http://www.webdesign.gr.jp/kentei/measures.html#rensyu

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

過去問の解説(平成29年度第2回学科試験)

第1問の解説

答え=2 インターネットにおける通信速度の差異には様々な要因がありますが、そのひとつに「回線の混雑」があります。例えば社内ネットワークの回線スピードが100Mbpsとして、同時にインターネットにアクセスしている社員が100人いれば、一人あたりに割り当てられるのは単純計算で1Mbpsとなります。回線が本来もっている性能の1/100です(実際はここまで単純計算ではありませんが)。逆に誰も使っていなければ回線を独り占めできるので、本来回線が持つスピードを最大限体感できます。

第2問の解説

答え=2 動画ファイルの拡張子をjpegにしても、静止画として表示はできません。

第3問の解説

答え=1 ボックスのマージン領域とは、ボックスからみて外側の余白のことです。この余白は必ず透明になるので、当然背景を表示させることはできません。

第4問の解説

答え=2 コピーライトの記載がなくても、それで著作権を放棄したことにはなりません。

第5問の解説

答え=1 ユーザエージェントとは、簡単に言うと自身が使っている「ブラウザ」のことです。通常ホームページを見る際は、リンクをクリックする、またはブラウザに直接アドレスを入力することでWEBページが表示されますが、これをHTTPリクエストといって、自分から「このページを見せておくれ~」とWebサーバーに要求(リクエスト)しているということです。

Webサーバーはこの要求にこたえてデータを送信してくれるので、この送信してきたデータをブラウザで見ているのが、いつもやっているホームページを見るという行為になります。この際のHTTPリクエストの2行目以降に含まれている情報がHTTPヘッダです。HTTPヘッダにはユーザエージェント情報、リファラ情報など、いくつかの情報が含まれています。 もっと詳しく見る

第6問の解説

答え=1 これはそのまんまですね。ディスプレイからの距離が近くても遠くてもきついですからね。この問題はおおむね40cm以上というところをおぼえておきましょう。

第7問の解説

答え=2 HTML5ではタグの省略ができます。以前は書くのがあたりまえだったhtml、 head、bodyタグも実は省略可能です。

第8問の解説

答え=2 コントラストが低いというのは、例えば黒い背景に黒っぽい文字、白い背景に白っぽい文字をのせてる状態です。こんなことしたら見にくいことこの上ないですね。テキストと背景のコントラスト比は、できるだけ高くしましょう。

第9問の解説

答え=1 FTPサーバはアクセス許可もですが、そもそも認証の際のID、パスワードは暗号化されていないので、第三者からの盗聴や不正にアクセスされる危険性があります。ちなみにこれがFTPSだと暗号化されているので、セキュリティの面で飛躍的に安全性は高まります。

第10問の解説

答え=1 他人のマイナンバーを不正に入手して公開するというのは、当然のことながらNGですよ。

第11問の解説

答え=1 アンシャープマスクとは、写真のピクセル間の色の差を強調することで、輪郭をよりはっきりとシャープにする効果があります。Photoshopにあるフィルタです。

第12問の解説

答え=4 ウェブページで問い合わせ先(電話、メールアドレス、住所)などを掲載する際は、addressタグでマークアップします。 もっと詳しく見る

第13問の解説

答え=2 この中ではflexです。CSS3から追加されたプロパティで、ブロック要素に対してdisplay:flexと指定してやれば、Flexboxコンテナーとして定義することができます。ちょっと難しいですが、レスポンシブデザインなどで重宝するプロパティです。

ちなみにその他のプロパティでの効果は、noneが非表示、blockがブロック要素に変更、inlineが、例えばリストタグで定義したナビゲーションリンクを想像するとわかり易いですが、通常はそのままだと縦に並んでいきますが、それを横並びにするプロパティです。 もっと詳しく見る

第14問の解説

答え=4 マルウェアとは悪意のあるソフトウェアのことです。よく聞くコンピュータウイルスもそのひとつです。これらに感染しないためにも、アップデートの通知がソフトウェアのベンダーから届いた際は、速やかにアップデートを行いましょう。 もっと詳しく見る

第15問の解説

答え=2 olで囲ったリストは番号付きリストになります。一度閉じたolリストを続きから再開したい際は、<ol start="任意の番号">~</ol>と記述します。 もっと詳しく見る

第16問の解説

答え=2 この4択の中だと2になります。ページのヘッダーやフッター、グローバルナビゲーションをイメージするとわかり易いです。

第17問の解説

答え=1 フォームを作る際のHTMLです。Aには「type」、Bには「checked」、Cには「for」が入りますので、答えは1の「on」となります。

第18問の解説

答え=4 個人情報保護法においての本人の同意とは、本人に何らかのアクションをしてもらわないといけませんので、電子メールで知らせるだけでは不十分です。よって答えは4となります。

第19問の解説

答え=3 同じユーザID・パスワードの組合せを使い回していると、パスワードリスト攻撃にあいやすくなります。パスワードリスト攻撃というのは、攻撃者が別のサービスやシステムから、何らかの理由で流出したIDとパスワード情報を入手した際、それらのリストを手あたり次第に入力してログインを試みる手法です。この攻撃の回避策としては、同じIDとパスワードは使いまわさないようにすることです。 もっと詳しく見る

第20問の解説

答え=3 wav(ウェーブ)はWindowsの音声ファイルフォーマットです。他にも主だったものをいくつか上げると

AIFF…Macintoshの音声ファイルフォーマット
MP3…圧縮率が高く、かつ良音質のファイルフォーマット
AAC…MP3の後継ファイルフォーマット。おもにガラ携で使われています。

などがあります。今回はwavでしたが、これらも併せて音声ファイルとおぼえておきましょう。ちなみに他のbmp、tiff、gifはすべて画像のファイルフォーマットです。

第21問の解説

答え=2 strongはHTML5からこれまでと使い方が変わっています。これまではテキストを強調する際に使っていましたが、HTML5からは「強い重要性を表す」となっています。他にもHTML5から意味が変わったもの、廃止になったもの等ありますので、今回はstrongでしたが、何がきてもいいように準備をしておきましょう。

第22問の解説

答え=2 これは完全に引っ掛け問題ですね。文章をよく読まないと、迷わず3を選びそうです(笑)。

clearプロパティは、floatプロパティによる回り込みを解除したい場合に使用しますが、ここでは「適用対象として定義されている要素」と書かれているので、答えはブロックレベル要素となります。

第23問の解説

答え=1 画像の代わりに使用するテキスト=代替えテキスト=alt属性とおぼえます。4択の答えが「alt属性」の時もあれば「代替えテキスト」の時もあるので、両方をおぼえておきましょう。

第24問の解説

答え=4 過去門をいくつかやっていると、この手の問題は似たようなものがいくつも出てきますので、答えに迷ってしまうことが多々あります。人々の知覚と反応ときたら「ユーザエクスペリエンス」とおぼえると良いです。 もっと詳しく見る

第25問の解説

答え=2 CSSにはp { margin: 50px 30px; }と書かれていますが、この問題を解くにはマージンの値が何個書いてあるかに注目します。マージンの値の個数で適用箇所が変わってきますので、まずはそれらをしっかりと理解しましょう。

{margin: 50px; }と値が一つの場合は、対象物の余白は上下左右の4方向に50pxの余白という意味になります。

{margin: 50px 30px; }と値が二つの場合は、対象物の余白50pxが上下、30pxが左右となります。

{margin: 50px 30px 20px; }と値が三つの場合は、対象物の余白50pxが上、30pxが左右、20pxが下となります。

{margin: 50px 30px 20px 100px; }と値が四つの場合は、対象物の余白50pxが上、30pxが右、20pxが下、100pxが左となります。時計回りとおぼえると良いです。

これら4パターンを覚えたところで問題を見てみましょう。問題では段落1と2のマージン間隔と書いています。<p>段落1</p>と<p>段落2</p>は縦に並ぶので、この場合考えないといけないのは、上下の余白50pxです。

単純に段落1の余白下50pxと段落2の余白上50pxを足して100pxと考えがちですが、この場合余白の足し算はしません。HTML上では、この余白は重なり合いますので、段落1と2のマージン間隔は50pxとなります。

目次へ戻る