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

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

過去問題の解説(平成30年度第3回学科試験)

ウェブデザイン技能検定3級学科(平成30年第3回試験) ※各設問において、正しものは○を、間違っているものは✖を選択してください。 第1問 IoTとは、InternetofTechnologyの略である。

答え=✖ IoTとは、Internet of Thingsの略で、これからはさまざまな「モノ」がインターネットにつながって、自ら情報を発信するということがあたり前の時代がやってくるそうです。現在はインターネットにつながる機器といえば「パソコン」「スマホ」「ゲーム機」「DVDプレイヤー」などが代表されますが、これからは例えば家のドアの鍵を閉め忘れた際に、ドアがインターネット経由で閉め忘れを教えてくれたり、財布を落とした際に、財布がインターネット経由で自分の位置を教えてくれたりといったことが可能になる時代が来るわけです。

これからは人口知能によって、いろいろな「モノ」が自分で状況を把握して、その時々に最適な情報を発信するようになるなんて、凄い時代に突入するわけですね。


第2問 HTML5.2では、DOCTYPE宣言を省略できる。

答え=✖ HTMLはこれまでもいくつかのバージョンを得て、現在のHTML5.2に進化してきました。DOCTYPE宣言は文書の最初に入れるコードで、これによってブラウザはその文書のHTMLのバージョンが何かを見分けます。

ブラウザはDOCTYPE宣言を参照して「標準準拠モード」で表示するか、「互換モード」で表示するかを判断し、通常は標準準拠モードで表示しますが、HTML文書にこのDOCTYPE宣言がないと、どのバージョンのHTMLかわからないので、無難に「互換モード」で表示します。中身は最新のHTML5.2で記述していても、古い昔のソースコードを使用したサイトと認識されるので、最新のcssなどを使用した箇所がレイアウト崩れを起こしたり、機能が動作しないといったことがおこります。いつかはDOCTYPE宣言はいらない時代が来そうな気もしますが、現在はまだ必要です。


第3問 ユニバーサルデザインとは、多言語対応の事のみをいう。

答え=✖ ユニバーサルデザインとは、「すべての人のためのデザイン」を意味します。年齢、障害の有無、体格、性別、国籍などにかかわらず、できるだけ多くの人にわかりやすく、追加機能を使わずともできるだけ多くの人が利用可能であるようにデザインすることをいいます。


第4問 html要素にlang属性を指定するのは古くからの慣習によるものであり、HTML5ではhtml要素にlang属性を指定する必要はない。

答え=✖ lang属性とは、そのHTMLが何語で書かれているかを示すコードです。<html lang="ja">と書いてあれば、そのHTMLは日本語で書かれたものということになります。一例ですがlang属性で言語を示す際、日本語はja、中国語はzh、英語はen、フランス語はfr、ロシア語はruと書きます。


第5問 VDT作業における室内の照明及び採光については、明暗の対照が著しくなく、かつ、まぶしさを生じさせないようにすることが良い。

答え=〇 VDT作業とはパソコンを使用しての業務のことですので、照明の明暗差が大きかったりまぶしかったりすると、当然ですが仕事がやりにくいです。


第6問 サイバーセキュリティ基本法は、サイバーセキュリティに関する施策を総合的かつ効果的に推進するため、基本理念及び国の責務、戦略、基本的施策等を規定している。

答え=〇 サイバーセキュリティ基本法は、2014年(平成26年)11月6日に衆議院において可決、成立した比較的新しい法律です。基本理念及び国の責務、戦略、基本的施策等を規定しています。


第7問 著作物が著作権による保護を受けるためには所定の手続きが必要である。

答え=✖ 著作権には所定の手続きなどは必要ありません。著作物の保護期間は国によってまちまちですが、日本は死後70年、または公表後70年です。以前は50年でしたが、2018年12月30日に70年に変更されましたのでご注意ください。


第8問 PNGは、ラスターグラフィックスの代表的なファイルフォーマットの1つである。

答え=〇 ラスターグラフィックスとは簡単にいうと「画像データ」のことです。デジカメやスマホで撮影した写真などもこれに分類されます。逆にベクターグラフィックスというファイルフォーマットがあるのですが、代表的なものでは「アドビイラストレーター」で作成されたデータがこれにあたります。

ラスターグラフィックスは拡大すると画質が荒れますが、ベクターグラフィックスは拡大してもきれいに表示されるのが特長です。


第9問 レスポンシブデザインでないウェブサイトは、スマートフォンでは閲覧できない。

答え=✖ レスポンシブデザインとは、一つのHTMLファイルをパソコンで見たらパソコン用のレイアウトで表示、スマホで見たらスマホ用のレイアウトで表示するようにデザインされたものです。パソコン用のレイアウトもスマホで表示することは可能ですが、画面サイズが全然違うのでアクセシビリティ的には良くありませんが、表示自体は可能です。


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

答え=〇 アンケートなどでよく使われるフォームの一つで、複数ある項目から一つを選択する際に使用されます。また複数ある項目からいくつも選択可能にしたい際はチェックボックスを使用します。


WEBクリエイター転職情報はこちら ※以下の設問に答えよ。 第11問 W3Cとは何の略称か。適切なものを以下より1つ選択しなさい。

  1. Web3rdConuters
  2. TheWeb3GCommunications
  3. World3-dimensionalCommunity
  4. TheWorldWideWebConsortium

答え=4 W3Cとは「TheWorldWideWebConsortium」の略で、それぞれの頭文字(W3つ+C)をあわせてW3Cと呼びます。これは丸暗記ですね。


第12問 要素の内容が消えずに見える状態となるCSSの表示指定はどれか。以下より1つ選択しなさい。

  1. display:none;
  2. visibility:hidden;
  3. opacity:0;
  4. background:transparent;

答え=4 「display:none」はそのブロック要素を非表示にしてその後ろにあるコンテンツをその分詰める。「visibility:hidden」はそのブロック要素を非表示にしますが、元々の表示領域は残るので、その部分は透明の空白となって残ります。「opacity:0」は透明度をコントロールする際に使用するスタイルで、0で完全な透明となり、1で完全な不透明となります。「transparent(トランスペアレント)」は内容自体を消すのではなく、カラーを消すプロパティーです。

設問ではbackground:transparentとなっているので、この場合は背景の色を消すだけで内容は残ります。


第13問 アルファチャンネルの説明として適切なものを、以下より1つ選択しなさい。

  1. 画像の彩度を扱うためのデータ領域
  2. 画像の透過度を扱うためのデータ領域
  3. 画像の圧縮前のデータを保存した領域
  4. 画像の圧縮後のデータを保存した領域

答え=2 アルファチャンネルとは「画像の透過」を扱う際の「透明部分のチャンネル」のことです。WEBサイトの制作で画像を切り抜きで使いたい際は、PhotoShopでアルファチャンネル付のpngで保存するのが一般的です。


第14問 プロポーショナルフォントの説明として適切なものを、以下より1つ選択しなさい。

  1. フォントサイズを変更できないフォントのこと
  2. JIS規格によらないフォントのこと
  3. アルファベットのみのフォントのこと
  4. 文字ごとに文字幅が異なるフォントのこと

答え=4 プロポーショナルフォントとは、文字ごとに文字幅が異なるフォントのことをいいます。これとは逆にすべての文字で均一の文字幅のフォントを等幅フォントといいます。

これらは日本語を扱う際はそう違いを感じませんが、欧文を扱う際に等幅フォントだと、アルファベットによっては文字間が広すぎて読みにくく感じることもありますので、横書きのレイアウトではプロポーショナルフォントを好む人が多いようです。

例えばWindowsだとMSゴシックが等幅フォント、MSPゴシックがプロポーショナルフォントです。Pがついているのですぐにわかると思います。ためしてみると違いがひと目でわかると思いますよ。


第15問 次のHTMLを図のように表示するCSSはどれか。以下より1つ選択しなさい。

答え=2 この問題は消去法で簡単に解けます。まず、headerタグが黒いボックス、mainタグがグレーのボックスを形成しているのですが、この2つのボックスがぴったりとくっついていますので、headerタグの3行目はmarginではなくpaddingとなり、1が外れます。(marginは外側の領域に余白を作成し、paddingは内側の領域に余白を作成するCSSです。)

次に黒いボックスの文字色が白なのでheaderタグの2行目はcolor: #FFFとなり3が外れます。

最後にグレーのボックスの文字色が黒なので、mainタグの2行目はcolor: #000となり4が外れます。よって答えは2となります。

この問題はmarginとpaddingの違いと、色を再現する16進数を理解しておかないといけません。marginはその要素の外側の余白を設定し、paddingは要素の内側の余白を設定するスタイルです。

色は0(黒)→1→2→3→4→5→6→7→8→9 →a→b→c→d→e→f(白)で再現します。0に近いほどより暗いグレーとなり、fに近いほどより明るいグレーとなり、fで完全な白となります。


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

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

答え=1 SSHとは通信を暗号化することでセキュリティを高める技術のことです。これと似たもので「SSL」がありますが、どちらも通信を暗号化するところは同じですが、ざっくりに違いを説明すると、SSHは他のPCを遠隔操作する際のやり取りが暗号化される技術で、SSLはインターネット上のやり取りが暗号化される技術のことです。みなさんも使用した経験があると思いますが、今時のネット通販はほぼ100%でSSLが導入されています。購入の際に入力したクレジット番号、住所、電話番号など、個人情報が万が一第三者に盗み見られても、情報が暗号化されているので、第三者は何が書かれてあるのかさっぱりわからないということができます。

では、これから問題を紐解いていきますが、設問の「ファイルを転送するプロトコル」の部分に注目してください。ファイルを転送するプロトコルはFTPなので、これにSSHが加わったFTPプロトコルを「SFTP」と呼びます。

ついでに他の候補も説明しますので、ざっくりで良いのでおぼえておいてください。

TLSとはSSLの上位バージョンのことで、SSL通信の強化版と理解しておけば良いでしょう。SMTPはメールを送信する際の通信プロトコルです。HTTPは皆さんもよく目にする、ウェブサイトにアクセスした際に、アドレスの最初にあるあれです。「Hyper Text Transfer Protocol」の頭文字をあわせてHTTPといいます。ちなみにこのHTTPにSSLを導入したサイトは、アドレスの最初がhttpsとなっています。より安全にアクセスできるサイトということです。


第17問 インターネットスキル認定普及協会のサイトにおける、当協会のロゴ画像の代替テキストとして最も適切なものはどれか。以下より1つ選択しなさい。

  1. logo
  2. logo.png
  3. 協会ロゴ画像
  4. インターネットスキル認定普及協会

答え=4 代替テキストは、ページにアクセスした人が、あえて画像を表示しないようにしているとか、何かしら画像が表示されない環境で見られた際に、画像の部分に代わりのテキストを表示することで、できるだけ多くの人がストレスなく閲覧できるようにするためには必要な施策です。

代替テキストは、その画像の代わりにならないといけませんので、読んだ際に意味がわかるようにしないといけません。この場合4番の「インターネットスキル認定普及協会」とするのが適切です。


第18問 CSS2.1において、背景はボックスのどの領域に表示されると定義されているか。以下より1つ選択しなさい。

  1. 要素内容を表示する領域のみ
  2. パディングを含む、そこから内側の領域
  3. ボーダーを含む、そこから内側の領域
  4. マージンを含む、そこから内側の領域

答え=3 cssで背景を設定した際は、そのボックスのボーダーも含めた、すべての要素の一番下に定義されます。もちろんそこには要素内容もパディングも含みますが、1と2はボックス内のすべてにはあたらないので、ボーダーを含む、そこから内側の領域が正しい説明です。


第19問 HTMLコードで<input>要素のtype属性に用いることのできない値を、以下から1つ選択しなさい。

  1. radiobutton
  2. checkbox
  3. email
  4. text

答え=1 inputタグは、問い合わせフォームなど、ユーザーに入力や選択を促す際に使用します。制作者はtype属性で入力してもらう情報を種類分けするのですが、この属性は多数ありますので、以下によく使う属性を紹介します。

●radio⇒ラジオボタン
●checkbox⇒チェックボックス
●text⇒テキスト入力欄
●email⇒メールアドレス入力欄
●password⇒パスワード入力欄
●file⇒ファイル選択
●submit⇒送信ボタン
●reset⇒リセットボタン
●image⇒画像による送信ボタン
●button⇒汎用ボタン

設問では一見どれも使用できそうに思いますが、よく見ると1番のつづりが違います。ラジオボタンを設置する際のtype属性は「radio」なので、この中で使用できないのは1番となります。ちょっと意地悪な問題ですね(笑)。


第20問 ウェブサイトに大量のリクエストや巨大なデータを送りつけることで、サーバをダウンさせる攻撃手法はどれか。以下より1つ選択しなさい。

  1. パスワードリスト攻撃
  2. クロスサイトスクリプティング
  3. DoS攻撃
  4. ドライブバイダウンロード

答え=3 今回はDoS攻撃でしたが、この手の問題は毎回内容を変えて出題される傾向が強いので、何がきても良いように、必ず上記4つの内容はすべておぼえてください。

パスワードリスト攻撃
何かしらの方法で入手した他人のID・パスワードのリストを用いて、不正アクセスを試みるサイバー攻撃。ネットユーザーの大半が複数のサイトで共通のID・パスワードを用いる傾向を利用した攻撃方法で、不正なのですが正規のログイン方法を試みる手法であるため、プログラムによる検出が難しい点が特徴です。この攻撃の回避方法は、それぞれのサイトで異なるIDとパスワードを使用することと、こまめに変更することです。そうすることで大幅に被害を受ける確率が下がります。

クロスサイトスクリプティング
こちらはたとえ話で解説します。以下の状況を想像してみてください。

例えばあなたが訪問したウェブサイトに、セキュリティが弱い掲示板のようなウェブアプリケーションが設置されているとします。そこに悪意のある第三者が、罠を仕掛けたリンクを設置して投稿します。訪問者のあなたは何の疑いもなくそのリンクをクリックしたが最後、悪意のあるサイトに誘導され、そのまま有無をいわさずウイルスに感染させられたり、情報を盗まれたりする被害を受けてしまいました・・・。

このようにスクリプトで罠をしかけて、サイトをまたがって攻撃することから、クロスサイトスクリプティングといいます。

DoS攻撃
ウェブサイトに大量のリクエストや巨大なデータを送りつけることで、サーバーをダウンさせる攻撃手法をDoS攻撃といいます。例えばサイトに訪問した際、いつまでたってもグ~ルグルで、いっこうにページが表示されないという経験があると思います。これの原因は、たまたま同じタイミングでアクセスが集中して、サーバーに負荷がかかったためということが多いのですが、これを個人で故意に行う攻撃がDoS攻撃です。DoS攻撃は基本個人がおこなうため、同IPからの攻撃が大半です。この場合はこのIPからのアクセスを拒否することで回避できます。

DoS攻撃の進化型でDDoS攻撃がありますが、これは同IPではなく複数のIPから集中攻撃する手法です。回避もDoS攻撃よりもはるかにやっかいです。攻撃の規模によっては、アクセスを拒否するIPが多すぎて、現実的に対処不能といったことにもなりかねます。

この攻撃は攻撃者に個人情報が入ったりといったメリットがないので、ただの嫌がらせといった動機が多いようです。

ドライブバイダウンロード
WEBサイトにアクセスした際、ユーザーの知らない間に、マルウェアや悪意のあるソフトウェアを一方的にダウンロードさせ、勝手にインストールしてしまう攻撃のことです。この場合、ユーザーは自分が感染している事実に気づいてないので、知らず知らずにウィルスをばらまくことにもなります。怪しいサイトにはアクセスしないのが大事です。


第21問 HTMLで段落を表現する場合の正しいマークアップ方法はどれか。最も適切なものを以下より1つ選択しなさい。

  1. p要素のタグで囲む。
  2. div要素のタグで囲む。
  3. br要素を使って前後を1行分ずつあける。
  4. margin要素を使って前後を1行分ずつあける。

答え=1 HTMLで段落を表現する際のタグは<P>を使用します。


第22問 次の文章は、「個人情報の保護に関する法律」(個人情報保護法)における個人情報取扱事業者の義務規定に関するものである。●●にあてはまる語句として適切なものを、以下より1つ選択しなさい。なお、それぞれの●●には、同じ語句が入るものとする。 個人情報取扱事業者は、個人情報を取り扱うにあたっては、その●●をできる限り特定しなければならない。また、個人情報取扱事業者は、あらかじめ本人の同意を得ないで、特定された●●の達成に必要な範囲を超えて、個人情報を取り扱ってはならない。
  1. 使用期間
  2. 利用目的
  3. 収集件数
  4. 保管手順

答え=2 こちらは法律ですので、そのまま丸暗記してください。


第23問 次に示したのは、ウェブコンテンツJIS(JISX8341-3)の達成基準1.4.1である。●●にあてはまる語句として、最も適切なものを以下より1つ選択しなさい。 ●●が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない(レベルA)。
  1. アウトライン
  2. アイコン
  3. アニメーション

答え=3 こちらもJISX8341-3でこのように定義されていますので丸暗記してください。この検定ではアクセシビリティの問題はよく出ますので、ざっくりでも頭にいれておいたほうが良いです。
もっと詳しく見る>>


第24問 nav要素に関する説明として適切なものを、以下より1つ選択しなさい。

  1. グローバルナビゲーションを含むことはできない。
  2. main要素を含むことはできない。
  3. HTML文書中に2回以上出現することはできない。
  4. 必ずページ上部に配置される。

答え=2 nav要素はおもにページにナビゲーションリンクを設置する際に使用するタグです。メジャーな使い方は、ページ上部のヘッダーに、そのサイトの主要ページへのリンクを設置しているのをよく見かけます。ナビゲーションはページ上部(ヘッダー)と下部(フッダー)、またはサイドバーに設置するのが一般的なので、複数設置は可能ですし、配置も必ずページの上部といったこともありません。よって3番と4番はすぐに候補から除外できます。またnav要素はそもそもがグローバルナビゲーションを設置するためのタグでもあるので、1番も除外できます。main要素はそのページの記事要素を入れるためのタグで、nav要素に含める使い方はNGです。


第25問 CSSの赤を示す値として誤っているものはどれか。以下より1つ選択しなさい。

  1. #f00
  2. #ff0000
  3. rgba(ff,0,0,1)
  4. red

答え=3 Webページで赤を表現する方法はいくつかあります。直球で「red」と書いても良いですし、カラーコード「f00」でも赤です。ちなみにカラーコードは、左からRGBの順で記述します。この場合はf(Redが100%(正確には255))、0(Greenが0%)、0(Blueが0%)という意味になります。ff0000はf00をもっと細かく設定できる書き方「ff(Red)、00(Green)、00(Blue)」です。3番のrgba()という書き方をする際は()の中は数字で表記します。この場合rgba(255,0,0,1)という書き方をしないといけません。


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