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

答え＝× HTML4.01まではstrongはより強い強調という意味でしたが、HTML5からは意味が少し変更されていて、強い強調から強い重要性という意味に変わっています。それってわざわざ変えなくてもいいじゃないと思ってしまうのですが、W3Cいわく変更とのことです。

コーディングの際も以前と使いどころは大きく変わらないので、私も含めてユーザー側は、意味が変更になったんだぁと認識しておけば良いのかなと思います。

答え＝× 加法混色とはR（レッド）G（グリーン）B（ブルー）の三色の掛け合わせで様々な色を再現する手法で、モニターなどで色を再現する際に、こちらの手法が採用されています。

私たちに身近なものではパソコンやスマホ、テレビモニターなどもこちらのRGB（アールジービー）で色を再現しています。

答え＝× GIFファイルは256色に対応した、おもに単色系に適した画像フォーマットです。現在ではPNGやSVGフォーマットの画像がこれまでのGIFに代わって主流となったので、あまり見かけなくなりました。

答え＝○ 例えば会員IDとパスワードを入力しないと入れないショッピングサイトを訪問したとします。入力後にページに入って買い物をしてその後退出して…、それからまたしばらくたってから訪問した際、今度は再度IDとパスワードを入力しなくてもよかったという経験があると思いますが、これはCookieに情報が保存されているおかげです。 また、買い物の途中で退出して、その後しばらくたってから再度アクセスした際、入力の続きから開始できるのもCookieのおかげです。もしこのCookieがなかったら、IDやパスワードを毎度入力したり、カートに入力した情報をまた最初からやり直しとなって、使う側は大変面倒ですね。

このようにCookieはユーザーにとっても大変便利な機能なのですが、セキュリティ対策をしっかりとしておかないと、保存情報を第三者に盗まれて大変なことになる可能性もあるので、サイトの運営側、利用者側の両方で、セキュリティ対策はしっかりとおこなうことが前提です。

答え＝× Basic認証とは、Webコンテンツの送受信などに用いられるプロトコル（HTTP）の認証方式のひとつではありますが、ハッシュ化はしません。ブラウザでWebサイトを見ていると、URLの最初にhttpやhttpsとありますが、これのことです。

この2つのうちBasic認証はhttpのほうで、最も単純な認証方式で、ユーザ名とパスワードをハッシュ化せずに通信をおこなうため、第三者に覗き見される危険があります。

これを回避するために、現在はSSL/TLSを用いてURLの最初がhttpsとなっているサイトがほとんどです。Webサイトを見る時に、URLを注意して見ると、ほぼどこのサイトも頭がhttpsとなっているかと思います。

ちなみにhttpsとはBasic認証のHTTPにセキュリティを強化したSSL/TLSを合わせることで、HTTPのセキュリティがパワーアップしたものとおぼえておくとよいです。

答え＝× class属性は半角スペースで区切って複数指定できます。よく使うのは、一つ目のclassでそのエリアの共通設定を指定して、2つ目のclassで個別に付け足す指定をするという使い方です。こうすることでCSS内に何度も同じ設定を記述する手間も省けるため、修正の際も簡潔にできて便利です。

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

答え＝× hover要素はリンクの上にカーソルをもってくると色が変わったり、アニメーションしたりと、a要素に対して使われることが多いですが、別にa要素のみにしか使えないといったことではありません。カーソルが重なった時にどう変化させるかなので、それこそ色々な要素に使用できます。

ただ、何でもかんでもhoverで変化させると、閲覧者はリンクと勘違いしてしまうので、アクセシビリティを考えると、a要素のみに設定したほうが、造りとしては親切かなと思います。

答え＝○ Webサイトは見る人の環境で使用するブラウザも変わるので、検証の際は必ずクロスブラウザチェックをしましょう。とくにIEはよくレイアウトが崩れることが多いので注意が必要です。

マイクロソフトもとうにサポートを終了して、今後はEdgeを使用してくださいとアナウンスしていますが、2020年の時点でも未だにクロームの次にユーザー数が多いのがIEなので、もうしばらくは注意が必要です。

答え＝× title属性はマウスをあてるとツールチップ（吹き出し）を表示する機能ですので、代替テキストとは意味合いが違います。代替テキストは必ずalt属性に入れるようにしましょう。

答え＝2 GIF89aとはGIF画像のフォーマット形式の一つで、画像にアニメーション効果を持たせることができます。みなさんも一度は耳にしたことがあると思いますが、GIFアニメはこのフォーマットです。もう30年ほど前からあるフォーマットで、結構歴史が長いです。

答え＝2 以前は回り込みといえば「float」でしたが、CSSもバージョンが3になったことで、最近では回り込みは「flex」を使うことの方が多くなったように思います。でも、まだまだfloatを使う場面もありますので、場面で使い分けられるように、しっかりと理解しましょう。

答え＝3 リンク先を新しいタブで開く際は、target属性に「target="_blank"」と記述することで実現できます。余談ですが、一瞬答えを2番と書きそうになったのですが、よく見るとつづりが一文字違ってて、こういうひっかけもこの試験ではよくあります。4択はしっかりと見てから答えましょう。

答え＝4 WCAG（ダブリューシーエージー）とはWeb Content Accessibility Guidelinesのそれぞれの単語の頭文字をとって合わせた読み方で、サイト訪問者にとって見やすく使いやすいサイトを制作する上でのルールが、ガイドラインとして定められています。これはそのまま丸暗記しましょう。

答え＝3 cssには色々と書かれていますが、問題にはnav要素の可読性と使用性を高めるためとなっていますので、注目するのはnav {～}で良いです。

書かれている設定を読み解くと、背景色が濃い青で、文字色が白で、上下の余白は10pxで、左右の余白が20pxとなります。これを親設定として可読性と使用性を高めるためにはと考えると、まず2番はリンクの色がブルーなので、紺色の背景にブルーの文字がのっても見にくいので、他を読む必要もなく一目で除外できます。

次に残りの候補のhoverに注目すると、1番は「display: block;」となっていて、これはただブロック要素にしただけで、横並びのnavならレイアウト崩れ、縦並びのnavなら変化なしなので、可読性と使用性を考えてこちらも除外です。

答えは3番か4番に絞れてきましたが、4番はマウスをあてるとアンダーラインが表示されるだけ、3番はそれにプラス文字の色も変化することを踏まえると、よりアクセシビリティが良いのは3番といえます。

答え＝2 マルウェアにはいくつか種類があります。その中で2番はワームの説明となります。 ちなみに1番は「トロイの木馬」、3番は「ランサムウェア」、4番は「スパイウェア」を説明しています。

答え＝2 OSI参照モデルとは、簡単に言うと「通信における工程を世界共通で統一した規格」のことです。この通信における工程は全部で7層あって、一層目が「物理層」、二層目が「データリンク層」、三層目が「ネットワーク層」、四層目が「トランスポート層」、五層目が「セッション層」、六層目が「プレゼンテーション層」、七層目が「アプリケーション層」で構成されています。これらそれぞれの機能を解説していくとすごく長くなるのでここでは割愛しますが、時間があれば調べてみると良いと思います。ただ、名前だけは試験によく出るので必ずおぼえておいてください。上から頭文字をとって「アプセトネデブ」とおぼえると良いかと思います。

もっと詳しく見る>>

答え＝4 IDやパスワードを不正に取得するのは、その後の不正アクセス行為のためであるので、不正取得をおこなった際は、4番の不正アクセス行為の禁止等に関する法律で罰せられます。

今回は不正アクセス禁止法でしたが、4択の他の法律も過去によく出題されていますので、それぞれざっくりで良いので、試験前にググって目をとおしておいてください。

答え＝4 ユニバーサルデザインとは、全ての人の為に配慮されたデザインであって、「障害がある方」とか「高齢者の方」といった、対象を絞り込まずに設計されたもの、情報、サービスなどをいいます。 身近なものだと、スロープや多機能トイレなどがそれにあたります。WEBサイトだと音声読み上げ機能があるページなどがそうです。

誰が利用しても使いやすく設計されたものは、WEBサイトに限らずユニバーサルデザインの考えが配慮されたものと言えます。

答え＝4 無彩色とはモノクロ（白黒）カラーのことです。4択の中でモノクロではない色は赤ですので、答えは4となります。

答え＝1 こちらは3級の試験としては大変難易度が高いです。JavaScriptを語るととてもじゃないですがページが足りないので、ここでは概要だけをわかりやすく解説します。

まず、イベントハンドラ属性とは、イベントの発生をJavaScriptで処理するための仕組みです。いきなりイベントって？と思うかもしれませんが、要はユーザーやブラウザがおこすアクションと思ってください。
例えば、ユーザーがキーボードのキーを押した、選択した、マウスをクリックした。ブラウザがページを読み込んだ、読込が完了したなどがそうです。

この時に何をするかの関数（動作内容）をイベントハンドラといい、アクションを起こしたタイミングを察知するのがイベントリスナーといいます。

例えば、ショッピングサイトで買い物をしている田中さんが、フォームに情報を入力中に、やっぱり止めたとマウスをクリックして退出しようとしたら（イベントリスナー）、「キャンセルになりますが良いですか？」と確認のダイアログが出た（イベントハンドラ）ということになります。このイベントリスナーやイベントハンドラは英語の熟語と同じで、それぞれの動きでひとつずつ対応する文を暗記するしかありません。

問題ではoption要素の選択が変わったらとあるので、Aに入るのは「onchange」となります。
問題文のソースコードは、ドロップダウンメニューの項目0を選択すると、隣の空白テキストエリアに「項目0」が自動的に表示される、項目1を選択すると「項目1」が表示されるといった動きになります。

答え＝3 今はWEBページの制作といえば、レスポンシブウェブデザインが主流です。ひと昔前はPC用、タブレット用、スマホ用、モバイル（ガラケ―）用と、一つのページに最大4つのファイルを作成していましたが、これがめちゃくちゃ大変で、修正が入った時も同じ作業を4つのファイルにしないといけませんでした。今は一つのHTMLをCSSでPCだったらこのデザイン、スマホだったらこのデザインで表示するという出し分けが可能なので、コーディングの修正も一回で済み大変便利です。

このデザインの出し分け方法ですが、CSSのメディアクエリという設定を使って、画面の横幅別に出し分けをします。 例えばcssで@media screen and (max-width:767px){}と記述して、{～}の中にCSSを書いていけば、そこに記述した設定は横幅が最大767pxまではこの設定で表示とするという意味になります。なので、ものすごく画面の横幅が小さいパソコンの場合は、パソコンで見ていても、デザインはスマホでのデザインが表示されるといったこともあります。 見る人の環境はそれぞれですので、デバイスの環境（モニターの横幅）に応じてレイアウトが変化する手法を総称してレスポンシブウェブデザインといいます。

答え＝3 thead、tbody、tfootは「table」を作成する際の要素です。HTMLでtableを使うのはおもに表組の作成になります。エクセルを思い浮かべるとイメージしやすいかと思います。tableには他にも各セルを表すtd要素や、行を表すtｒ要素などがあります。

答え＝2 PCがウイルスに感染する可能性が最も高いのが「メールの添付ファイルを安易に開く」行為です。これらは一般企業では、コンプライアンスとして、必ず目にする内容ではないかと思います。違反すると罰則がある企業も多いので、行動にはじゅうぶん注意してください。