WEBデザイナー向けのIT国家資格!! ウェブデザイナーの資格ならWebデザイン技能検定 ウェブデザイナーの資格ならWebデザイン技能検定

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

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

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

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

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

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

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

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

ウェブデザイン技能検定3級学科(令和2年第2回試験) ※各設問において、正しものは○を、間違っているものは✖を選択してください。 第1問 HTML5.2では、タグの要素名を大文字で書くと文法エラーになる。

答え=× 要素名とはそれこそ種類はたくさんあるのですが、例えば<p>、<div>、<br>などのことを言います。

HTML5.2の要素名は大文字、小文字のどちらでもかまいません。以前はHTML4かxhtmlのどちらかでコーディングしていたのですが、xhtmlのほうは小文字でないとエラーになりますので、この時期のソースコードはどちらでも対応可能な小文字オンリーが主流でした。現在はコーディングはほぼHTML5で統一されていますので、どちらでも大丈夫です。


第2問 著作権は知的財産権のひとつであり、審査を経て登録されなければ権利は発生しない。

答え=× 著作権は知的財産権のひとつではありますが、審査を経て登録する必要はありません。逆に登録してからでないと保護の対象にはならないものには商標権などがあります。

著作権とは自分の考えや気持ちを作品として表現した「著作物」、著作物を創作した人「著作者」に対して法律によって与えられる権利のことを言います。保護の対象となるものには「音楽」「本」「絵画」「写真」「映画」などがあります。WEBデザイナーが著作権を意識する機会と言えば「イラストを使用する」「写真を使用する」などでしょうか。

これらはフリー素材など著作権フリーにしてあるものであれば大丈夫ですが、以外は基本著作権に引っかかると思ってください。無断で使用するとトラブルの元になりますよ。


第3問 情報機器作業による心身への障害をもたらす大きな原因の一つは、「拘束的」な長時間に及ぶ作業によることから、特に作業時間の管理に留意することが重要である。

答え=○ こちらは厚生労働省より「情報機器作業における労働衛生管理のためのガイドライン」というものが策定されていて、事業主は長時間のパソコン業務によって作業者の健康を損なわないように、働き方を管理する義務が課せられています。

例えば連続作業時間が1時間を超えないようにする。超える際は間に小休止する時間を設けるなどがあります。


第4問 CSSの単位「px」は、出力対象とする機器の画面における物理的な1ピクセルの大きさを1とする相対単位である。

答え=× pxはピクセルと言って、大きさは画面が大きい小さい関係なく統一の大きさで出力することから「絶対単位」と言われています。WEBデザインでのpxの利点は、どのモニターでみても統一の大きさで表示できるというところです。

ひと昔前はインターネットといえばパソコンで見るのが主流でしたので、ブラウザのウインドウを広げたり狭めたりしてもレイアウトが崩れないように絶対単位(px)で制作するのが主流でしたが、現在ではPC、タブレット、スマホと、人それぞれでWEBサイトを見る環境が多様化しているため、画面の大きさによってレイアウトが変化しない絶対単位は、逆に困ったことになることが多くなるため使う機会が少なくなってきました。

一つのHTMLファイルで見る環境(画面の大きさ)によってレイアウトを変化させる手法を「レスポンシブデザイン」と言いますが、現在はこちらの作り方が主流です。レスポンシブデザインで制作する際は、絶対単位ではなく相対単位で作成しないと画面の大きさによってレイアウトが変化しません。現在は要所でpxを使うこともありますが、ほぼほぼ相対単位の%、vw、remなどの単位を用いて制作するのが主流となっています。


第5問 GIF形式は、PNG形式と同様に半透明の画像が作成できる。

答え=× GIF形式も透過GIFと言って透明にすることができますが、こちらはあくまで0か100かであって半透明にはできません。完全な透明か完全な不透明のどちらかということですね。

半透明とは薄っすら透けて下のパーツも薄っすら見える状態のことです。これはPNGでは可能ですがGIFでは再現はできません。


第6問 header要素は文書やセクションのヘッダを表す。

答え=○ header要素のことを説明すると「header要素は文書やセクションのヘッダを表す」とそのままですね(笑)。

ちょっと意味が分かりにくいかと思うのですが、文書やセクションの冒頭となる見出しや概要、ナビゲーションのリンクなどを記述する場合に<header>~</header>でその部分を囲んで記述します。

例えばWEBサイトを見るとほぼどこのサイトもページの上部にサイトのロゴやナビゲーションリンクを設置しているのを見かけますがこれのことです。


第7問 CSSの仕様上、ボックスのマージン領域は常に透明であり、背景を表示させることはできない。

答え=○ マージンとはそのボックスの外側の余白領域になります。CSSで各要素にマージンを設定していないと各ブロックがくっついてしまって見にくいですよね。

cssでmargin-top: 10px;と記述した際、そのボックスの上に10pxの余白を設けるという意味になります。逆にボックスの内側に余白を設けたい際はpadding(パディング)と記述します。パディングの場合は透明ではなく、そのボックスで指定した背景画像や色がそのまま表示されます。

ボックスにボーダーを指定した際はpaddingを設定しないと、例えばボックス内の文章とボーダーがくっついてしまって見にくくなります。


第8問 スクリーンリーダーはフォントサイズに関係なく読み上げが可能であるため、ユーザが文字の大きさを変更できないようにしてもアクセシビリティ上の影響はない。

答え=× スクリーンリーダーとは、視覚障害者の方がコンピュータを操作するために、マウスに変わり情報を音声で読み上げることによって、操作を補助するソフトウェアです。

サイトを見ているユーザーは色々な方がいますので、皆が皆スクリーンリーダーを使用することはありません。文字の大きさを変えて読みたい人もいるので、アクセシビリティを意識したサイトを作る上で、色々な使い方に対応していなくてはいけません。


第9問 ワームとは独立したプログラムであり、自己を複製して拡散する性質を持つマルウェアのことである。

答え=○ マルウェアとはコンピューターウイルスを総称した呼び名です。
これらは特徴によって細かく分類されるのですが、大きく分けて以下の3つはおぼえてください。

ワーム→単体で存在でき、自己増殖する。
ウイルス→単体で存在できず(他のファイルに寄生して)、自己増殖する。
トロイの木馬→無害のファイルになりすまして存在し、自己増殖はできない。


第10問 アスペクト比とは、画面の濃淡の比率のことである。

答え=× アスペクト比とは映像(映画、テレビ、動画)などにおける縦横比のことをいいます。ワイド(16:9)とスタンダード(4:3)の2つを基本とします。

2000年前半まではワイド(16:9)といえば映画で、テレビは4:3の比率が多かったのですが、今はテレビもYouTubeもワイド(16:9)のサイズが主流です。


WEBクリエイター転職情報はこちら ※以下の設問に答えよ。 第11問 p要素の説明として適切なものはどれか。以下より1つ選択しなさい。

  1. 一般的なブラウザでは、デフォルトで上下に1行分程度のすき間ができる。
  2. デフォルトで行頭に1文字分の空白ができる。
  3. 連絡先の表示に使用するための要素である。
  4. 画像表示に使用する要素である。

答え=1 HTMLでのp要素の意味は「段落」です。長めの文章はそれぞれの段落ごとにp要素で囲みます。こうすると囲んだ上下に1行分程度の空きができ、読みやすい文章をレイアウトできます。


第12問 補色の説明として、最も適切なものはどれか。以下より1つ選択しなさい。

  1. 彩度において正反対に位置付けられる色の組み合わせ
  2. 色相環において正反対に位置付けられる色の組み合わせ
  3. 背景色と文字の色の組み合わせ
  4. 背景色と画像の縁取りの色の組み合わせ

答え=2 補色とはその色の正反対の色のことです。代表的な組み合わせだと「赤と青緑」「オレンジと青」「黄色と紫」「赤紫と緑」などがあります。

この補色の関係を知っておくと、デザインの際の色使いで役にたちます。補色の組み合わせ=色がケンカするということなので、この組み合わせを避けることで、変な色使いになりにくくなります。あえて補色を使って、ある一点だけ色をケンカさせて目立たせるデザインもありますが、慣れないうちは補色の組み合わせを避けるだけで、それなりにプロっぽいデザインにすることができます。


第13問 引用文をブロック単位でページ内に配置する際、その引用文全体はどの要素としてマークアップすべきか。最も適切なものを以下より1つ選択しなさい。

  1. p
  2. div
  3. section
  4. blockquote

答え=4 「blockquote」とは、引用・転載文であることを示すタグです。比較的長いテキストを段落ごと引用する際に使用されます。逆に短いテキストの場合は<blockquote>タグではなく<q>タグを使用して引用・抜粋を行います。


第14問 HTML5におけるtable要素に関する説明として適切なものはどれか。以下より1つ選択しなさい。

  1. table要素は廃止された。
  2. table要素はレイアウト目的でのみ使用できるようになった。
  3. table要素のボーダー関連の装飾はCSSで指定する。
  4. table要素のborder属性は廃止された。

答え=3 HTML5ではtable要素に対しての装飾は全てCSSで行うこととなっています。HTML5以前では、装飾もテーブルタグに直接書き込んでいましたが、今は構造はHTMLで、装飾はCSSでと完全に分離した書き方が推奨されています。


第15問 CSSで次のようにmarginプロパティの値を指定した場合、右のマージンは何ピクセルになるか。以下より1つ選択しなさい。

CSS

margin: 10px 20px 30px 40px;

  1. 10px
  2. 20px
  3. 30px
  4. 40px

答え=2 marginやpaddingは一行で一気に上下左右の余白の値を書くことができます。この際の値が適用される順番は円を描いて時計周りとおぼえてください。

問題のmargin: 10px 20px 30px 40px;と書いた際の余白は、10px(上) 20px(右) 30px(下) 40px(左)となります。


第16問 インターネットにおけるフィッシング行為を規制している法律はどれか。以下より1つ選択しなさい。

  1. 個人情報の保護に関する法律
  2. 不正アクセス行為の禁止等に関する法律
  3. 特定電子メールの送信の適正化等に関する法律
  4. 高度情報通信ネットワーク社会形成基本法

答え=2 不正アクセス行為の禁止等に関する法律ではフィッシング行為に対して以下のように規制しています。

識別符号の入力を不正に要求する行為の禁止 フィッシングサイト構築(7条1号)と電子メール送信(7条2号)によるフィッシング行為を禁止する。違反者は1年以下の懲役または50万円以下の罰金に処せられる(12条4号)。


第17問 次に示したのは、ウェブコンテンツJIS(JISX8341-3)のガイドライン2.1である。Aにあてはまる語句として適切なものを、以下より1つ選択しなさい。

2.1 A 操作可能のガイドライン

全ての機能を A から利用できるようにする。

  1. 片手
  2. マウス
  3. キーボード
  4. タッチパネル

答え=3 JIS X 8341-3では、高齢者や障害のある人を含む全ての利用者が、使用している端末、ウェブブラウザ、支援技術などに関係なく、ウェブコンテンツを利用することができるようにと示しています。Webサイト制作者はこれらを考慮したサイトを設計、制作しないといけませんよという、サイト作成のガイドラインと理解していただけると大丈夫です。

その中で全ての機能をキーボードから利用できるようにと書かれています。マウスやタッチパネルなどの入力装置は、必ずしも皆が備えているものではないので、それらがないとできない物は見ている方に対して不親切ですよということですね。


第18問 HTML5で使用可能な要素はどれか。以下より1つ選択しなさい。

  1. small
  2. medium
  3. big
  4. large

答え=1 HTML5ではmedium、big、largeは使用できません。他にもこれまで使えていたけどHTML5では使えないといったタグが多々ありますが、試験でどのタグが出てくるかはその時にならないと分からないので、できれば可能な限りおぼえておいた方が得策です。
詳しくは以下のサイトを参照ください。

もっと詳しく見る>>


第19問 要素内容としてCSSを直接記述できる要素はどれか。以下より1つ選択しなさい。

  1. css
  2. link
  3. style
  4. source

答え=3 CSSは外部でも直接HTML内に記述することもできます。直接HTML内に記述する際は「style="●●●●"」と記述します。


第20問 次の文章は、情報セキュリティに関するものである。Aにあてはまる語句として適切なものを、以下より1つ選択しなさい。

OSやアプリケーションソフト、ネットワークシステムなどにおいて、プログラムの不具合や設計ミスが原因となって生じた、セキュリティ上の弱点や欠陥のことを A という。

  1. セキュリティターゲット
  2. セキュリティホール
  3. セキュリティパッチ
  4. サイバーセキュリティ

答え=2 セキュリティの穴(ホール)。そのまんまですね。こちらはそのまま丸暗記しましょう。


第21問 HTML5の正しいDOCTYPE宣言はどれか。以下より1つ選択しなさい。

  1. <doctypehtml>
  2. <!doctypehtml>
  3. <doctypehtml!>
  4. <doctypehtml></doctype>

答え=2 頭に!があるとおぼえてください。またこちらの宣言は最初の一行目にあれば良いので、/で閉じる必要はありません。


第22問 画像が表示できない環境では、img要素はどのように扱われるか。最も適切なものを以下より1つ選択しなさい。

  1. 要素として存在しない状態となる。
  2. 画像のパスとファイル名がコンテンツとして使用される。
  3. alt属性に指定されているテキストが画像の代わりとして使用される。
  4. img要素は要素内容のない空要素なので、そもそもコンテンツとしては扱われない。

答え=3 画像が表示できない環境では、alt属性に指定されているテキストが画像の代わりとして表示されますが、altに何も情報を入れていないと×だけが表示されます。

画像に対してその説明となる短い文章をalt属性に入れるのは、アクセシビリティ上必須とされていますので、面倒ですが画像を入れたら、alt属性にも説明を入れるようにしましょう。


第23問 画像のファイルフォーマットのうち、非可逆圧縮方式のものはどれか。以下より1つ選択しなさい。

  1. BMP
  2. PNG
  3. GIF
  4. JPEG

答え=4 非可逆圧縮とは、人の目では判別できない領域の画像情報を削除して、効率よくデータ量を軽くするための圧縮技術です。こちらは画像情報を削除するわけですので、一度JPEGに変換した画像は元には戻りません。とはいえ、正直人の目ではどこがどう削除されたのかはまったく分からないので問題はありません。

ただしJPEG画像は保存を繰り返す度に画質が劣化していくので、あまり過度に繰り返して保存すると、劣化が目に見えて判別できるほどになりますのでご注意ください。

これとは逆に可逆圧縮方式というものがあります。問題ではPNGがそれです。こちらは画像内の情報を削除しないので元に戻せるというのが特長です。ただ写真をPNGで保存してもデータ容量が重いままですので、色数が少ないイラストや文字を画像化したものなどが向いています。

ちなみに筆者は現在はPNGで保存していたイラストなどはsvgで保存することが多いです。


第24問 次のHTMLコードのinput要素で、図のようなスライダーのコントロールを表示したい。A に与えるtype属性値として正しいものはどれか。以下より1つ選択しなさい。

HTMLコード 図 図
  1. slider
  2. slide-control
  3. variable-control
  4. range

答え=4 input要素にスライダーのコントロールを付けるには「range」を指定します。input要素には他にも複数の属性が指定できますので、興味がある方は以下を参照ください。

もっと詳しく見る>>


第25問 次の文章のAにあてはまる語句として最も適切なものはどれか。以下より1つ選択しなさい。

製品やシステム、サービスの利用、もしくは予想された使い方によってもたらされる人々の知覚と反応のことを A という。

  1. インタラクションデザイン
  2. ユーザエクスペリエンス
  3. ユーザインタフェース
  4. コミュニケーションデザイン

答え=2 こちらの問題はよく出てきますね。こちらは私も3級を受けた時にそうだったのですが、人々の知覚と反応と来たら「ユーザエクスペリエンス」とおぼえましょう。


WEBクリエイター転職情報はこちら 目次へ戻る