【H29第4回】ウェブデザイン技能検定2級過去問

この記事の前提条件

対象: ウェブデザイン技能検定2級を受験する方(平成29年度第4回 学科試験)
難易度: ★★★
所要時間: 約30分

平成29年度第4回の学科問題を、全40問すべて理由つきで解説します。

目次 非表示

目次へ

1. 2択問題(正しい=1、間違い=2)

第1問: HTML文書の言語コード指定は、meta要素によるcharsetの値で指定する

答え: 2(誤り)。文書の言語はhtml要素のlang属性で指定します。meta要素のcharsetは文字エンコーディング(文字コード)を指定するものであり、言語コードとは別物です。

第2問: HTML5.1で定義されているimg要素のsizes属性の値の内部において、CSS3の「長さをあらわす単位」が使用できる

答え: 1(正しい)sizes属性は、CSSの長さの単位(px, emなど)や条件式を使って画像の表示サイズを指定します。

第3問: HTML5.1では、img要素のwidth属性の値に%を付けると文法エラーになる

答え: 1(正しい)。HTML5.1の仕様上、widthheight属性の値は非負の整数のみが許容されており、パーセント記法は無効です。CSSでのwidth:50%のような指定とは扱いが異なる点に注意してください。

第4問: 次のHTMLコードのid属性”note”を定めたp要素は、次のJavaScriptコードによりHTMLドキュメントから削除される

const note = document.getElementById('note'); note.parentNode.removeChild(note); というJavaScriptコードと、id属性noteを持つp要素のHTMLコード

答え: 1(正しい)getElementById()で要素を取得し、parentNode.removeChild()で親要素から取り除く、という標準的なDOM操作の記述で、正しく削除されます。

第5問: RGBは加法混合により表現される

答え: 1(正しい)。光の三原色RGBは、色を混ぜるほど明るくなる「加法混合」で表現されます。

第6問: GIF形式などで用いられるディザリングとは、限られた色数でより多くの色を疑似的に表現する手法である

答え: 1(正しい)。正しい定義です。

第7問: input要素またはtextarea要素のplaceholder属性をラベルとして使用すると、アクセシビリティやユーザビリティが損なわれる

答え: 1(正しい)。placeholderは文字を入力すると消えてしまうため、ラベルの代わりに使うと、入力中や入力後にその項目が何だったか分からなくなってしまいます。

第8問: Document Object Model(DOM)の仕様は、JavaScriptによるウェブページの制御のみを対象としている

答え: 2(誤り)。DOMは特定のプログラミング言語に依存しないAPI仕様であり、JavaScriptに限らず様々な言語からHTML・XML文書を操作するために使われます。

第9問: アプリケーションゲートウェイの説明

答え: 1(正しい)。HTTP・FTP・SMTPなどのアプリケーションプロトコルに基づき、アプリケーションレベルで制御を行う、という説明は正しいです。

第10問: pre要素は、その範囲がプログラムのソースコードであることを示す要素である

答え: 2(誤り)pre要素は、スペースや改行をそのまま表示する「整形済みテキスト」を示す要素であり、ソースコードに限定されません。ソースコードであることを示す専用の要素はcode要素です。

第11問: 文字色と背景色のコントラスト比が大きいほど、文字色と背景色の明暗の差は大きくなる

答え: 1(正しい)。コントラスト比の定義そのものです。

第12問: 通信販売は特定商取引法上のクーリング・オフ規定がないため、イーコマースサイトでもクーリング・オフをすることができない

答え: 1(正しい)。特定商取引法上、通信販売にはクーリング・オフ制度が適用されません(代わりに返品特約の表示義務等が定められています)。

第13問: cookieは暗号化して送受信されるため、ネットサーフィンをしているだけでは盗聴される危険性はない

答え: 2(誤り)。cookie自体が必ず暗号化されているわけではありません。HTTPS通信でない場合は平文でやり取りされるため、盗聴のリスクがあります。

第14問: IPv4とIPv6は互換性があるため、プロトコル変換を行わずに相互通信が可能である

答え: 2(誤り)。IPv4とIPv6には直接の互換性がなく、相互通信にはデュアルスタックやトンネリングなどの変換技術が必要です。

第15問: ウェブサイトのアクセスログにおいて、ページビューとユニークユーザ数は必ず同じ数値となる

答え: 2(誤り)。1人のユーザが複数のページを閲覧するため、通常ページビュー数はユニークユーザ数を上回ります。

2. 選択問題

第16問: VDT作業における作業環境管理として不適切なものはどれか

  • ①室内は、できるだけ明暗の対照が著しくなく、まぶしさを生じさせないようにすること
  • ②反射防止型ディスプレイを用いること
  • ③ディスプレイ画面・書類・キーボード面の明るさと周辺の明るさの差はなるべく大きくすること
  • ④太陽光等が入射する場合は、ブラインドやカーテン等で適切な明るさにすること

答え: ③。VDT作業ガイドラインでは、画面と周辺の明るさの差はなるべく小さくすることが推奨されています。急激な明暗差は目の負担を増やすため、「大きくする」という記述は不適切です。①②④はいずれも適切な対策です。

第17問: id属性”fade-in-text”のp要素をフェードインさせたい。requestAnimationFrame()メソッドの引数[A]に与える記述はどれか

fadeIn関数を再帰的にrequestAnimationFrameで呼び出してフェードインアニメーションを実現するJavaScriptコード
  • ①true
  • ②false
  • ③fadeIn
  • ④fadeInText

答え: ③requestAnimationFrame()には、次のフレームで実行したい関数そのもの(関数の参照)を渡します。opacityが1未満の間、自分自身fadeInを再度呼び出すことで、アニメーションが繰り返されます。

第18問: W3Cにおいて、標準化されていないものはどれか

  • ①XML
  • ②SVG
  • ③SGML
  • ④MathML

答え: ③SGMLはISOによって標準化された規格であり、W3Cが策定したものではありません。XML・SVG・MathMLはいずれもW3C勧告です。

第19問: 補色の説明として適切なものはどれか

  • ①色相環において正反対となる色のこと
  • ②画像のドロップシャドウに使用する色のこと
  • ③色の三原色に含まれない色のこと
  • ④画像の輪郭に使用する色のこと

答え: ①。補色は、色相環上で正反対に位置する色同士の関係を指します。

第20問: 「Apple」と出力できるPHPコードはどれか

配列とchoice関数を使った4つのPHPコード選択肢

答え: ①。①は$arrを関数choice()の内部で定義しており、引数$index=0で呼び出すと$arr[0]すなわち”Apple”を正しく返します。②はglobal $arr[$i];という文法自体が誤りです(globalには配列の添字ではなく変数名だけを指定します)。③は配列のキーが1から始まっているため$arr[0]が存在しません。④は$arrを関数の外で定義していますが、関数内からglobal宣言なしにアクセスしているため参照できません。

第21問: SQLのデータ操作言語の機能として、正しい組合せはどれか

  • ①SELECT: 挿入
  • ②DELETE: 検索
  • ③UPDATE: 更新
  • ④INSERT: 削除

答え: ③SELECTは検索、DELETEは削除、INSERTは挿入を行う命令です。正しい組合せは③のみです。

第22問: CSSを用いて色を表現する場合、何種類の色が指定できるか

  • ①216種類
  • ②4096種類
  • ③2097152種類
  • ④16777216種類

答え: ④。16進数カラーコード(#RRGGBB)は、R・G・Bそれぞれ256階調(0〜255)の組合せがあるため、256の3乗=16,777,216通りの色を表現できます。

第23問: ウェブコンテンツJIS(JIS X 8341-3)の達成基準1.4.3「コントラスト(最低限レベル)」の[A]に入る値はどれか

テキスト及び文字画像の視覚的提示には、少なくとも[A]のコントラスト比がある、という達成基準1.4.3の本文
  • ①3:1
  • ②4:1
  • ③4.5:1
  • ④5:1

答え: ③。WCAG 2.0(JIS X 8341-3)の達成基準1.4.3は、通常サイズのテキストに4.5:1以上のコントラスト比を求めています。

第24問: alt属性を指定できない要素はどれか

  • ①img要素
  • ②area要素
  • ③input要素
  • ④textarea要素

答え: ④textarea要素にはalt属性がありません。input要素はtype="image"の場合にalt属性を持てます。

第25問: ユーザインタフェースに含まれないものはどれか

  • ①アプリケーションプログラミングインタフェース
  • ②タッチインタフェース
  • ③グラフィカルユーザインタフェース
  • ④キャラクタユーザインタフェース

答え: ①。API(アプリケーションプログラミングインタフェース)はプログラム同士のインタフェースであり、人間が直接操作するユーザインタフェースには該当しません。

第26問: パスワードリスト攻撃による被害を防ぐ対策として最も適切なものはどれか

  • ①パスワードは4文字以上の英数字を用いる
  • ②複数のウェブサービスを利用する場合は、サービスごとに異なるユーザIDとパスワードを設定する
  • ③無線LANのESSIDは16文字以上の英数字を設定する
  • ④OSのアップデートをこまめに行う

答え: ②。パスワードリスト攻撃は、あるサービスから漏洩したID・パスワードの組合せを他サービスで使い回して不正ログインを試みる攻撃です。サービスごとに異なる認証情報を使うことが、直接的で有効な対策になります。

第27問: テキストに打ち消し線を加えたい。text-decorationプロパティに定める値として適切なものはどれか

テキストに打ち消し線を加えた例
  • ①overline
  • ②strike-out
  • ③strike-through
  • ④line-through

答え: ④。打ち消し線を表す正しい値はline-throughです。②③は存在しない値です。

第28問: CSS2.1の仕様に含まれているプロパティはどれか

  • ①grid
  • ②display
  • ③animation
  • ④writing-mode

答え: ②displayはCSS2.1の時点で既に定義されています。①③④はいずれもCSS3以降で本格的に導入されたプロパティです。

第29問: CSSのvertical-alignプロパティの初期値はどれか

  • ①top
  • ②middle
  • ③bottom
  • ④baseline

答え: ④vertical-alignの初期値はbaselineです。

第30問: 次のCSSを適用すると、p要素の上側のボーダーはどのように表示されるか

p { border-top: 1px rgba(255,0,0,1); } というCSSコード
  • ①太さ1ピクセルの赤い線が表示される
  • ②太さ1ピクセルの赤い線が半透明の状態で表示される
  • ③太さ1ピクセルの青い線が表示される
  • ④ボーダーは表示されない

答え: ④border系のショートハンドは本来「太さ・スタイル・色」の3つを指定しますが、このコードには線のスタイル(solidなど)の指定がありません。スタイル未指定時の初期値はnoneのため、太さや色を指定していても、ボーダー自体が表示されません。

第31問: インデックスカラーの説明として最も適切なものはどれか

  • ①JPEG形式で利用できる色のこと
  • ②マンセルカラーシステムにおける色の順番のこと
  • ③ウェブページ内で使用されている色の数のこと
  • ④あらかじめ色番号を指定して定めた色のこと

答え: ④。インデックスカラーは、限られた色のパレット(カラーテーブル)に番号を振り、その番号(インデックス)で色を指定する方式です(GIFやPNG-8などで使われます)。

第32問: HTML5において、a要素の子要素として入れることが可能な要素はどれか

  • ①a要素
  • ②div要素
  • ③button要素
  • ④select要素

答え: ②。a要素はトランスペアレントなコンテンツモデルを持ちますが、「インタラクティブコンテンツ」(a・button・select・inputなど)を子孫に含めることはできません。①はa要素自体の入れ子禁止、③④はインタラクティブコンテンツ同士の入れ子禁止に抵触します。div要素はこの制約に該当しません。

第33問: 著作権に関する内容として誤っているものはどれか

  • ①アイディア自体は著作物には該当しないが、アイディアを解説した解説書は著作物に該当する
  • ②無料でダウンロードできるフリーソフトは著作物に該当しないが、市販されているアプリケーションソフトは著作物に該当する
  • ③インターネットサービスプロバイダ等は、サーバ障害の復旧を目的とする場合、著作物を含むデータをバックアップすることが認められる
  • ④新聞や雑誌に掲載された時事問題に関する論説は、利用を禁ずる旨の表示がない限り、他の雑誌に転載することができる

答え: ②。無料で配布されているフリーソフトであっても、プログラムとして創作性があれば著作物に該当します。有料か無料かは著作物性の判断基準ではないため、「フリーソフトは著作物に該当しない」という記述が誤りです。①③④はいずれも正しい記述です。

第34問: ウェブコンテンツJIS(JIS X 8341-3)のガイドライン2.1の[A]と[B]に入る語句の組合せはどれか

2.1 [A]操作可能のガイドライン。[B]を[A]から利用できるようにする、という本文
  • ①A: 音声 B: 入力フォーム
  • ②A: キーボード B: 全ての機能
  • ③A: AI B: 全てのAPI
  • ④A: 携帯端末 B: 全てのウェブページ

答え: ②。ガイドライン2.1は「キーボード操作可能」で、「すべての機能をキーボードから利用できるようにする」ことを求めています。

第35問: ウェブサイト内の中心となる画像を意味する用語はどれか

  • ①カラーチャート
  • ②キービジュアル
  • ③ワイヤーフレーム
  • ④ムードボード

答え: ②。サイトの印象を象徴する中心的な画像を「キービジュアル」と呼びます。

第36問: 「503 Service Temporarily Unavailable」というエラーが出た場合の対処として、不適切なものはどれか

  • ①サーバを増設する
  • ②キャッシュなどを用いてファイルのリクエスト数を減らす
  • ③該当のURLにファイルがアップロードされているか確認する
  • ④ユーザのアクセス時期が分散するコンテンツを検討する

答え: ③。503はサーバが一時的に過負荷などで応答できない状態を示すエラーで、サーバの負荷対策(①②④)が有効です。「ファイルがアップロードされているか」の確認は404エラー(ファイルが見つからない)への対処であり、503への対処としては的外れです。

第37問: CSSのセレクタ#abcと完全に同じ機能となるセレクタはどれか

  • ①abc
  • ②.abc
  • ③*#abc
  • ④[class~=”abc”]

答え: ③*#abcは「任意の要素の中でid=”abc”を持つもの」という意味で、全称セレクタ*は暗黙的に付与されるものと同じであるため、単に#abcと書いた場合と機能的に完全に同じです。①は要素セレクタ、②はクラスセレクタ、④はclass属性への属性セレクタで、いずれも異なる意味になります。

第38問: ウェブ上での権利侵害に関する[A]に入る語句として適切なものはどれか

「[A]において、インターネットへの接続サービスを提供する者やウェブサーバ管理者、電子掲示板などの管理者が、他人の権利を侵害する情報を放置していた場合は、権利を侵害されたとする者から、損害賠償を受ける可能性があるとしている。また、実際は権利を侵害していない情報を削除した場合は、情報の発信者から、損害賠償を受ける可能性があるとしている」

  • ①電気通信事業法
  • ②電気通信役務利用放送法
  • ③特定電気通信役務提供者の損害賠償責任の制限及び発信者情報の開示に関する法律(プロバイダ責任制限法)
  • ④不正アクセス行為の禁止等に関する法律(不正アクセス禁止法)

答え: ③。プロバイダやサイト管理者の責任範囲と免責について定めているのが「プロバイダ責任制限法」です。

第39問: ruby要素が使用可能なXHTMLはどれか

  • ①XHTML 1.0 Strict
  • ②XHTML 1.0 Transitional
  • ③XHTML 1.0 Frameset
  • ④XHTML 1.1

答え: ④ruby要素(ルビ表記用)は、XHTML 1.1でモジュールとして追加されました。XHTML 1.0の各DTDには含まれていません。

第40問: 左上(10,10)、一辺30pxの正方形を黒枠で描きたい。SVGコードの[A]〜[C]のいずれにも使われないキーワードはどれか

黒枠のみで塗りつぶしのない正方形の完成イメージと、rect要素の属性が空欄になったSVGコード
  • ①fill
  • ②line
  • ③stroke
  • ④stroke-width

答え: ②。図は黒い枠線だけで塗りつぶしのない正方形なので、[A]は枠線の色を指定するstroke(=”black”)、[B]は塗りの色を指定するfill(=”transparent”)、[C]は枠線の太さを指定するstroke-width(=”5″)です。この中に「line」というSVG属性は存在しません。

まとめ

  • borderのショートハンドは「太さ・スタイル・色」の3つが揃って初めて表示される。スタイルの指定漏れに注意する
  • PHPの関数内から外側の変数を使うには、引数として渡すか、globalで正しく宣言する必要がある
  • SVGのfill(塗り)とstroke(枠線)の役割の違いを正確に理解する
  • WCAG(JIS X 8341-3)の具体的な数値・語句(1.4.3は4.5:1、ガイドライン2.1はキーボード)は頻出なので正確に覚える