学習効率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データを完全に削除されるようなので、早めにダウンロードすることをおすすめします。

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

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

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

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

第1問の解説

答え=2 titel要素とは、その名の通りそこに入れた文言がWebページのタイトルになる部分です。ここに入れた文言はグーグルに対してのSEO効果、ユーザーがそのページがどのようなものかを判別するためにも非常に重要な要素です。

titel要素は<head>~</head>要素の中に1つだけ配置できます

HTMLに詳しい人ほどYESと答えてしまいそうですが、問題の問い方が「必ず1つだけ配置しなければならない」と、強制的な言い回しですので、この場合はNOとなります。正確には入れなくてもそれで致命的なエラーになったりはしないけど、入れたほうが断然良いというニュアンスです。

ちなみにページにタイトルを入れなかった場合は、検索エンジンでページの内容をくみ取って、最適と思う文言を自動で判別して入れてくれます。ですが、これだとキーワードが制作者の意図したものと一致しないことのほうが多いので、まったくおすすめはできません。制作者にとってもユーザーにとっても検索エンジンにとっても、titel要素は必ず入れるようにしましょう(ただし強制ではありません)。

この問題は問い方がいやらしいですね。Webデザインというよりも国語の問題かと思ってしまいました(笑)。

第2問の解説

答え=1 Webサイトには誰もが見れるページと、閲覧を特定の人に限定したページ(サービス)があります。アクセスが限定されたページでは、ログインする際に正しいIDとパスワードを入力しないと、たとえ本人であってもアクセスすることができません。

これは本人以外の人が不正にアクセスできないようにするための防衛手段で、これがあるから、例えば部外者の人が勝手にチャットに入ってきたり、知らない間に勝手に買い物されたりなどできないわけです。不正アクセス禁止法における識別符号とは、ログイン時のID、パスワードのこととおぼえておきましょう。

第3問の解説

答え=2 問題のexample.comの前に「sub.」とつく場合はサブアドレスとなり、本体のexample.comとは違うサイトとなります。逆にexample.comの後に「/sub/」とつく場合は、その本体サイトの中のカテゴリーページとなり、example.comの中のコンテンツという扱いになります。よってこれら2つはまったくの別物という扱いになります。

第4問の解説

答え=1 オーバーレイとは、画像やテキストなど複数のオブジェクトを重ねて表示する手法のことで、簡単に言うと「合成」のことです。

第5問の解説

答え=2 address要素は、連絡先(問い合わせ先)の情報を示すブロックレベル要素です。そこにはサイト管理者の氏名やメールアドレス、電話番号、住所などが入ります。addressというので、イコール「住所」と思ってしまいそうですが、要はそのサイトの管理者への連絡先全般とおぼえましょう。

第6問の解説

答え=1 パソコンは熱に弱く、そのため常に冷却し続けないといけません。パソコンの内部には冷却装置とファン(扇風機みたいなの)がついていて、それらが冷却の役目をになっています。

この排気口をふさいでしまうと、熱が外に逃げずにこもってしまい、それが故障の原因となります。

第7問の解説

答え=2 alt属性とは、そのimg要素が表示できない際の代替えテキストのことです。ツールチップを表示させるには「title属性」を使用します。これによってマウスを画像に重ねると、ポップアップでテキストが表示されるようになります。

title属性とはいっても<head>~</head>内に記述するtitle要素とはまったくの別物なので、ごっちゃにならないように注意しましょう。

第8問の解説

答え=1 XHTMLとは従来のHTMLに、拡張性に富むXMLに適合するように定義しなおしたHTML言語のことです。HTMLとXMLの良いとこどりの言語と憶えると良いでしょう。

一時期は「HTMLはもう時代遅れ、これからはXHTMLの時代だよ」と言われる時期もありましたが、HTML5の出現とその後のバージョンアップが止まったことで、現在では主流の立場を奪われ気味というのが実情です。

第9問の解説

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

第10問の解説

答え=1 FTPサーバーとは、簡単に言うと世間に公開したいWEBページを格納する、インターネット上のパソコン(ハードディスク)のことです。こちらにデータをアップロードすることで、誰もがブラウザーからアクセスすることができるようになります。ネットユーザーは、ブラウザーを使ってこのディスクに保存されたデータを見ているということです。

このFTPサーバーは、正直セキュリティがそれほど強くないので、短い期間でログインパスワードを変えるのが一般的です。

第11問の解説

答え=1 代替えテキストとは、画像が表示されない際に、その画像を代わりに文字で説明したテキストのことです。ユーザビリティのためにも、制作者は画像と代替えテキストはワンセットと考えるようにしましょう。

問題の場合、ここに例えば「虫眼鏡」と入れたとしても、ユーザーは?となります。検索ボタンのラベルとしての画像なので、代替えテキストは「検索」といれるのが適正です。

第12問の解説

答え=1 HTMLでリストを定義するタグは「ul要素」です。この中に「li」または「ol」で括った文字列がリスト表示されます。「li」で括れば文頭に中黒点のついたリスト(デフォルト)となり、「ol」で括れば番号付きリストとなります。

ちなみに3番の「dl要素とdt要素」は説明リストを作る際のタグで、 例えば
・HTMLとは?
 WEBサイトを制作する際のマークアップ言語。
というような使い方をします。

4番のblockquote要素は長文を引用する際のタグ、q要素は短文を引用する際のタグですので、リストとは関係ありません。

第13問の解説

答え=1 読み込み=load。普通の英語ですね。英語の考え方だと、読み込みが完了した時=loadedと思ってしまいそうですが、HTMLでは「onload」と記述します。これはもう丸暗記しかないです。

第14問の解説

答え=2 この問題はよく出てきますね。これまでの過去問の解説でも同じことを言っているのですが、「人々の知覚と反応」ときたらユーザエクスペリエンスと憶えるのがコツです。

第15問の解説

答え=3 マルウェア(不正プログラム)とはコンピュータウイルスのことです。ウイルスに感染しないための行動としては、1と2と4は正しく、3はNGです。

ソフトウェアのアップデートには、本来そのソフトが提供する機能の向上もありますが、最新のウイルスに対応したプログラムが配布されていますので、常にアップデートするようにしましょう。

第16問の解説

答え=3 onmouseoverという表記から、「試験概要」という文字列にマウスオーバーすると、というところまでは簡単に読み解けますので、4番は論外と導き出せます。答えを3択にしたところで、次に考えるのがchange()という表記です。

この問題から答えを導き出す方法としては、()という書き方は関数の書き方で、この()には変数を表記します。この場合は何も書かれていないので変数が定義されていない関数となります。change()が関数であると見分けられると、答えは3番と簡単に導き出せます。

もっと詳しく見る>>

第17問の解説

答え=2 補色とは正反対の色の組み合わせのことです。もしPhotoshopをお持ちであれば、カラーバランスというメニューを開いてみると、一目で補色の関係が分かります。

シアンの補色はレッドであり、マゼンタの補色はグリーンであり、イエローの補色はブルーです。

ではこの補色の関係を知って、実際どういうことをやるのかというと、例えば青かぶりの写真を補正したいとします。青を抜くためには補色のレッドやイエローを増やせばいいので、Photoshopのカラーバランスのスライダーを補色側に動かすと、だんだん写真が自然な色味になっていきます。

またデザインをする際、使う色を決定する時にも補色の関係を知っていると便利です。基本の考え方は、補色の色同士を混在させると色が喧嘩してしまいますので、赤がメインの色使いであれば、シアンは使わないとかの判断にも役立ちます。あえて補色同士を合わせるという上級テクニックもありますが、初心者の内は、補色同士の色を混在しないようにするだけで、変な色使いに感じることはかなり激減しますので、色使いに悩んだ際はこの補色の関係を思い出すと良いですよ。

第18問の解説

答え=2 この問題は、なまじコーディングをしている方だったら迷わず3番を選びそうですね。自分も油断すると3番を選びそうです(笑)。

clearプロパティの適用対象を正確に言うと、2番のブロックレベル要素です。clearはたしかにfloatプロパティの解除によく使うんですが、あくまでも対象はブロックレベル要素と理解してください。

以前のCSS1では対象は全ての要素でしたが、CSS2からはブロックレベル要素が対象と変更されています。

第19問の解説

答え=3 個人情報保護法での「本人の同意」とは、その本人に何かしらアクションを起こしてもらって、はじめて同意を得たと言えます。

4択のうち3番はただ同意するように知らせただけなので、片側通行です。ここではそれに対しての本人のアクションは発生していませんので、該当しないものは3番となります。

第20問の解説

答え=4 リンクを指定するソースコードは「a href」なので、1番と3番はいきなり除外できます。2択として次に考えるのは、IDを表す記号です。CSSに馴染みがある方はすぐにわかると思いますが、ID要素は頭に#が入ります。ちなみにこれがclass要素だと、頭に.(ドット)が入ります。 これらの記号を見て、ブラウザはそれが何の要素かを判別しているのです。

第21問の解説

答え=1 HTML5からは様々な要素が省略できるようになりました。昔からHTMLに触れてきた人(自分もそうですが)は、省略できるとは言っても、コードが間違っているようで気持ち悪いという方もいるのではないでしょうか。

メリットとしては、省略することでファイルサイズが軽くなります。とは言っても元々テキストデータなので、軽くなっても微々たるものなんですけどね。

もっと詳しく見る>>

第22問の解説

答え=2 CSSの単位には相対単位絶対単位とあります。相対単位は%やemといった、基準となる対象の変化に合わせて可変する単位で、逆に絶対単位はまわりの変化に影響されず、どんな時でも100pxなら100pxで表示される単位です。

たとえばブラウザの幅を広げたり縮めたりしたときに、それに合わせてレイアウトが変わるサイトをよく見かけますが、あれは幅の設定を%指定(相対単位)したものです。

現在は一つのHTMLファイルでPC、タブレット、スマホに対応する仕様(レスポンシブ)が主流なので、CSSでは相対単位で指定することが多々あります。

第23問の解説

答え=4 見た目スライダーなので、単純にsliderやslide-controlあたりじゃないのと思ってしまいそうですが、Aに入れる要素名はrange(レンジ)です。

<input type="range">を使うと、ユーザーは視覚的にスライダーで大まかに数値を指定できます。音声のボリューム調整やモニター画面の明るさ調整を思い浮かべると理解しやすいかと思います。

ちなみにrangeの意味を調べると○○~○○の範囲といった意味です。なるほどですね。スライダーはあくまで範囲指定の数値を入力するための部品であって、それ自体が主役ではありません。そう考えると、ここにrangeが入るもの納得ですね。

第24問の解説

答え=3 ビットマップとは小さいドットの集合体で構成されたデータのことで、代表的なものでは写真などがそれにあたります。拡大すると画像が粗くなるというのが欠点ですが、1670万色という膨大な色数を表現できるので、写真などにはうってつけのフォーマットです。

逆にいくら拡大しても画質が粗くならない形式で「ベクター」があります。色数が限られているぶん、写真のように細かい表現ができないので、イラストなどに向いたフォーマットです。

問題ではビットマップ以外を選ぶようにと問われているので、この場合3番のSVG(スケーラブルベクターグラフィックス)となります。

第25問の解説

答え=4 HTMLの文書では、先頭の1行目に必ずと書きます。「ここに書かれている文書はHTML文書ですよ~。ブラウザの皆さん、ちゃんと表示してね」と宣言することで、IEやクロームなどのブラウザは、「この文書はHTMLで書かれた文書なのね」と認識でき、表示することができるのです。

目次へ戻る