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

学習効率UP】ウェブデザイン技能検定3級試験(令和4年度第3回)の過去問題を徹底解説!!

過去問題の解説(令和4年度第3回学科試験)

ウェブデザイン技能検定3級学科(令和4年第3回試験)

ウェブデザイン技能検定
3級学科

令和4年度 第3回

※各設問において、正しものは○を、間違っているものは✖を選択してください。 第1問 ウェブで利用される画像のうち、JPEGは画質の劣化が最も少ない形式である。

答え=× JPEGは人の目では認識しづらい部分のデータを間引くことで、見た目では間引く前と変わらない感じで、かつファイルサイズを軽くする保存形式です。
認識しづらい部分とはいえ、JPEG画像を編集して再度JPEGで保存など、一つの画像でJPEG保存を何回も繰り返すと、その都度データが間引かれていくため、回数を重ねると明らかに劣化が目立ってくるので注意が必要です。

WEB制作の現場では、画像データは必ずpsd、bmp、pngなど、保存しても劣化しない形式のものをマスターデータとして用意し、編集する際はこちらに手を加えてJPEGで書き出すのが一般的です。


第2問 著作権侵害のコンテンツを、個人が開設するウェブサイトにアップロードしても、一定数のアクセスが無い限りは違法にはならない。

答え=× 著作権の侵害は、その行為をおこなった時点でアウトです。個人的なサイトだからとか、人にあまり見られていないなどは理由にはなりません。
サイトを運営していて、画像をネットから拾ってきて使用するなどは、法律を知らないとあるある行為っぽいですが、これはNG行為ですので絶対にやってはいけません。


第3問 marginプロパティに4つの値を指定し上下左右のマージンを設定する際は、値を「上・下・左・右」の順で指定する。

答え=× cssでmarginを上下左右個別に一気に指定する際は「margin: 値 値 値 値;」と書きます。この場合は先頭から上、右、下、左となります。時計回りと覚えるとおぼえやすいです。

ちなみにこれが値が3つだったら先頭が上、真ん中が左右、最後が下になります。値が2つだったら先頭が上下、最後が左右、1つだったら上下左右が全て同じとなります。


第4問 ラジオボタンは、相互に排他的な複数の選択項目の中から、ユーザに1項目だけ選択させる場合に用いられる。

答え=○ アンケートや問い合わせフォームなどによく使われることが多いので、皆さんも見たことがあると思います。
この問題はおそらく、ラジオボタンとチェックボックスがごっちゃになっていないかを見ているものと思われます。

ラジオボタンは、複数の候補の中から1つだけを選ぶ際に用います。逆に複数選択可とする際は、チェックボックスを用います。


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

答え=× スクリーンリーダーとは、目が不自由な方がストレスなくWEBサイトを利用できるように、画面に表示されている内容や、使っている人が操作した内容を音声で読み上げてくれるソフトウェアです。

こちらはアクセシビリティに配慮したWEBサイトを設計するために必要なことですが、だからといって文字の大きさを変更できないようにしたのでは本末転倒です。
あやゆる人に配慮したサイトとするには、音声読み上げも文字の大きさ変更もできないといけません。


第6問 グレースケールとはモノクロ2値の画像形式のことである。

答え=× 互いに白黒ではあるのですが、モノクロは白と黒の2色のみ、グレースケールは白から黒までの間のグレー階調も含めたモノクロです。白黒ですが、当然グレースケールのほうが使える濃淡が豊富になります。


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

答え=○ マージンとはそのボックスの外側の領域のことです。要素に余白を用いる際に指定します。この領域は常に透明で、ここにそのボックスに対しての背景を含めることはできません。

逆にパディングはそのボックスの内側に対する余白で、この場合はそのボックスに対しての背景を含めます。

マージンとパディングの違いはよく問われているので、しっかりとお互いの特性を理解しておきましょう。


第8問 title要素は、head要素内に必ず1つ配置する必要がある。

答え=× titleは、そのWebページのタイトルを表すために使います。ここで入れたタイトルは「ブラウザのタブ」や「ブックマーク名」「検索結果」など、さまざまな場所で使用されます。ユーザビリティ、SEO対策、どちらの観点からもとても重要なタグですので、指定しておくほうが好ましいです。

なお、titleに入れることができるのはテキストのみで、ページ内に1つしか入れることはできません。

ここまで見ると、ではなぜ正解が×なの?と思われるでしょうが、タイトルはなくても閲覧には支障はありません。
この場合はページに「無題」と自動で表示されます。ただ、SEO的には超マイナスになるため、ユーザーがページを検索エンジンで探せなくなり、アクセスが集まらなくなります。

問題は「必ず1つ配置する必要があるYESかNOか」なので、こういう聞き方をされるとNOとなります。


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

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

マルウエアの種類は複数あります。今回はワームですが、試験の回によって聞いてくるマルウエアを変えてきますので、できるだけ多くの種類を覚えるのが得策なのですが、数が多くて大変ですので、以下によく試験で問われるマルウエアを記載します。最低でも以下は必ずおぼえて、何が来ても答えられるようにしておきましょう。

更に余裕がある方は、詳しく解説されたサイトのリンクを貼っておきますのでご覧ください。

マルウェアの名称と特性

ワーム 独立したプログラムであり、自己を複製して拡散する性質を持つ

スパイウェア ユーザーに関する情報をユーザーが意図しない形で収集し、それを情報収集者である特定の企業・団体・個人等に自動的に送信するマルウェア

トロイの木馬 無害なプログラム、あるいはデータファイルのように偽装しつつ、その中にマルウェアとして機能する部分を隠し持っていて、何らかのトリガーによりそれが活動するように仕組まれているファイル等。よく怪しいメールの添付ファイルを安易に開かないようにといわれるのはこれのせい。

バックドア トロイの木馬の一種で、ネットワークを介して他人のコンピュータを自由に操ったり、パスワードなど重要な情報を盗んだりするウイルス。

ボット バックドアと同じで、他人のコンピュータを外部から遠隔操作するためのコンピュータウイルス。

ランサムウェア 感染させた端末内のデータを暗号化などによって、利用できない状態にした上で、そのデータを利用できる状態に戻すことと引き換えに金銭を要求するマルウェア。

もっと詳しく見る»


第10問 ‹meta charset="~"›は、そのHTML文書の言語を示す。

答え=× meta charsetはそのサイトの文字コードを指定します。現在はmetacharset="UTF-8"と書くのが一般的です。これを入れておかないと文字化けを起こすことがありますので、ご注意ください。

ちなみに言語指定の際は‹html lang="ja"›と書きます。jaは日本語という意味です。


WEBクリエイター転職情報はこちら ※以下の設問に答えよ。 第11問 CSSのセレクタにおいて、すべての要素を適用対象とするものはどれか。以下より1つ選択しなさい。

  1. +
  2. -
  3. *
  4. @

答え=3 CSSの文法ですのでここは丸暗記してください。cssではすべての要素に指定する際*で記述します。


第12問 「情報機器作業における労働衛生管理のためのガイドライン(厚生労働省)」に照らして、不適切なものを以下より1つ選びなさい。

  1. グレア防止には間接照明等の照明器具を用いる。
  2. 情報機器作業が過度に長時間にわたり行われることのないようにする。
  3. 就業の前後又は就業中に、体操、ストレッチ、リラクゼーション、軽い運動等を行う場合は常に上司の許可を求める。
  4. 職場の健康診断は自ら進んで受診するように努める。

答え=3 一つひとつ見ていきます。
まず1の「グレア防止」ですが、グレアとはディスプレイから発する光のことです。子どもの頃、真っ暗な部屋でテレビを見ると目を悪くするよ!と親から言われたことがあると思うのですが、まさしくこのことです。モニターを見る作業を行う際は、部屋の電気(間接照明)を付けましょうということです。

2の「過度に長時間にわたり行われることのないようにする」は、長時間座ったままの姿勢でモニターを見ていると体に悪いので当然のことですね。

3の「軽い運動等を行う場合は常に上司の許可を求める」は、職場の文化で個々認識にずれが生じそうなのですが、法的にはこれらの行為は休憩には入りません。逆に会社は作業者にこれらの行為をさせるよう義務付けられています。ただし、数分といった常識の範囲内です。30分もやっていたら休憩になりますのでご注意を。

もし、ちょっと体操をしていて上司に怒られたら、その上司は法律を知らないだけですので、その際はやさしく教えてあげてください。


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

1.1代替テキストのガイドライン
全てのAコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、代替テキストを提供する。

  1. 画像
  2. ウェブ
  3. イメージ
  4. 非テキスト

答え=4 Webサイトは見る人の環境で作り手が意図しない形で表示されたりします(例えば見る側で画像や動画を表示させないように設定している、回線の混雑で画像が表示されない、またはすごくタイムラグが生じるなど)。そういった際に穴が空いた箇所が空白なだけだと、見る側はよく分からないですよね。その場合に備えて、画像が表示されない時は、その画像の説明がテキストで表示されるなどの処理をしておかないと不親切です。

例えは画像で説明しましたが、非テキストコンテンツ全てにあてはまります。

JISX8341-3はアクセシビリティのガイドラインです。8341(やさしい)とおぼえておいてください。この数字が出たら「見る人にやさしいWEBサイト作りのためのガイドライン」とすぐにピンと来るようになると思います。


第14問 ウェブコンテンツJISとも呼ばれている「JISX8341-3」は、何に関する日本産業規格か。最も適切なものを以下より1つ選択しなさい。

  1. ウェブコンテンツのマークアップ
  2. ウェブコンテンツのレイアウト手法
  3. ウェブコンテンツのユーザビリティ
  4. ウェブコンテンツのアクセシビリティ

答え=4 13問で説明したとおり、JISX8341-3はウェブコンテンツのアクセシビリティに関するガイドラインです。


第15問 コンピュータネットワークにおいて、SSHの仕組みを使ってファイルを転送するプロトコルはどれか。以下より1つ選択しなさい。

  1. SFTP
  2. TLS
  3. SMTP
  4. HTTP

答え=1 まずSSHとファイルを転送するプロトコルについて説明します。
SSHとは、「Security Shell」の略で、他のコンピューターに遠隔でログインしたり、特定のサーバに入ったりするためのプロトコルまたはソフトウェアです。SSHを使うことで、認証部分を含めてすべての通信が暗号化されることで、第三者に簡単に解読できないようにする仕組みです。

次にファイルを転送するプロトコルはFTPです。WEBサイトの更新など、サーバーにFileZillaなどのFTPソフトを使ってアクセスして、ファイルを更新するなどの作業は、WEBサイト制作の現場ではよくある光景です。
以上からSFTPは「SSH+FTP」のイメージ(暗号化されたファイル転送)と解釈すると分かりやすいかと思います。


第16問 要素を画面上で表示されないようにしたい。この場合のCSSによる適切な表示指定はどれか。以下より1つ選択しなさい。

  1. display:hide;
  2. display:hidden;
  3. display:none;
  4. opacity:transparent;

答え=3 要素を画面上で表示されないようにするには、CSSに「display:none;」と記述します。
これを使う場面は、例えばスマホの時は表示させないけど、PCでは表示する、またはその逆など、見る人の環境に合わせて条件分岐で表示や非表示を切り替えたい際によく使います。

display:none;を単体で使うことはあまりありません。というのも表示させないのなら、そもそもその部分のHTML記述を削除するほうが望ましいからです。

スマホでは表示させない(display:none;)けど、PCでは表示する(display:block;)など、メディアクエリで条件を分岐させて記述する!レスポンシブサイトの作成ではよく使う方法です。


第17問 HTMLのコメントの例として正しいものはどれか。以下より1つ選択しなさい。

  1. /*コメント*/
  2. ‹!--コメント--›
  3. --コメント
  4. //コメント

答え=2 こちらも文法でそう規定されているので、丸暗記してください。
ちなみに1はCSSでのコメント時、3はSQLでのコメント時、4はJavaScriptでのコメント時です。


第18問 次のコードの下線部分を何というか。以下より1つ選択しなさい。

‹button onclick="change()"›詳細表示‹/button›

  1. ボタンハンドラ
  2. イベントハンドラ
  3. チェンジハンドラ
  4. リセットハンドラ

答え=2 onclickは「クリックしたら○○の処理を行う」という意味になります。
他にもonload「ページが読み込まれたら○○の処理を行う」、onmouseover「要素内にカーソルが移動したら○○の処理を行う」などあります。これらを総称してイベントハンドラと言います。


第19問 p要素の直接の子要素として配置できない要素はどれか。以下より1つ選択しなさい。

  1. ul要素
  2. img要素
  3. span要素
  4. strong要素

答え=1 p要素にul要素を入れ子で使用できません。他にもHTMLにはできるできないのルールがあって慣れるまでは結構面倒です。以下のサイトで詳しく説明されていますので、興味がある方はこちらを参考ください。

もっと詳しく見る»


第20問 ファイルの転送やダウンロード時に、その進捗状況を視覚的・直感的に表示するものはどれか。以下より1つ選択しなさい。

  1. プログレスバー
  2. アドレスバー
  3. スクロールバー
  4. スライダー

答え=1 プログレスバーとは、ファイル転送やダウンロード時など、処理の進捗状況を棒状の領域の内部の色の変化によって表示するものです。
身近なものでは、例えばスマホでアプリをインストールする際、ダウンロードやインストールの進捗状況が円グラフで左上に出ます。この場合はバーではなく円なので、プログレスリングなどと呼ばれています。


第21問 pre要素は、それが何であることを表す要素か。最も適切なものを以下より1つ選択しなさい。

  1. リード文
  2. ソースコード
  3. 整形済みテキスト
  4. 印刷用のテキスト

答え=3 HTMLでは‹pre›~‹/pre›で囲んだ領域は、整形済みテキストとして表示します。
整形済みテキストとは、あらかじめマークアップを行う前に整形してあるテキストのことです。

例えばHTMLの文章で改行をする際はbrタグを入れますが、preで囲んだ領域はbrタグがなくても、スペースや改行などをそのまま等幅フォントで表示します。


第22問 次の要素に属性を追加して、入力できる文字数を最大6に制限したい。その際に指定すべき属性はどれか。以下より1つ選択しなさい。

‹input type="text"›

  1. maxlength="6"
  2. max-char="6"
  3. size="6"
  4. max-text="6"

答え=1 HTMLでinput typeを使う場面は入力フォームを作成する際です。‹input type="text"›で、一行のテキストボックスが作成されます。

ここに最大文字数を指定したい時は、‹input type="text" maxlength="6"›というように、半角スペースに続いて文字数制限をした属性を追加します。


第23問 HTMLで見出しと段落を含む引用文をマークアップする際に使用すべき要素はどれか。最も適切なものを以下より1つ選択しなさい。

  1. div
  2. cite
  3. hgroup
  4. blockquote

答え=4 blockquoteは、引用・転載文であることを示すタグです。長文テキストを引用する際に使用されます。


第24問 光の三原色の1つである色を、以下より1つ選択しなさい。

答え=2 光の三原色ではR(赤)G(緑)B(青)三つの光の掛け合わせで様々な色を再現します。それぞれ0~255までの階調を持っており、3つ全てが0で黒、すべてがマックスの255で白になります。

身近なところでは、スマホやパソコン、テレビモニターなどは、この原理で色を再現しています。


第25問 input要素を送信ボタンとリセットボタンにするtype属性の値はどれか。適切な組み合わせを以下より1つ選択しなさい。

  1. 送信ボタンsend、リセットボタンreset
  2. 送信ボタンsend、リセットボタンcancel
  3. 送信ボタンsubmit、リセットボタンcancel
  4. 送信ボタンsubmit、リセットボタンreset

答え=4 こちらは入力フォームを作成する際の記述になります。皆さんも作成したことはなくても入力した経験はあると思うので、どのようなものかはイメージできると思いますが、フォームでは名前の入力欄やラジオボタン、チェックボックスなど、様々なタイプを指定できます。

その中で、送信ボタンとしたい際はtype属性にsubmit、リセットボタンにしたい際はresetと記述します。他にもたくさん用意されていますので、興味がある方は、以下のサイトで分かりやすく説明されていますので参考ください。

もっと詳しく見る»


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