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

この記事の前提条件

対象: ウェブデザイン技能検定2級を受験する方(平成29年度第2回学科試験)

2級の学科試験は3級よりも技術的に踏み込んだ内容が増えます。この記事では平成29年度第2回の全40問を、正答番号だけでなく「なぜその答えになるのか」の理由つきで解説します。

2017年の出題条件と現在の仕様は区別して確認してください。現在の公式公開一覧から当該回の正答表を再取得できていないため、本稿の番号を公式資料の再照合済み一覧とは扱わないでください。特に第12問は原文確認待ちです。最新の問題は主催団体の過去問題公表ページで確認できます。

目次非表示

1. 2択問題(正しい=1、間違い=2)
2. 選択問題
まとめ

目次へ

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

第1問: 次のSVGコードは、中心座標(50, 50)に半径40で緑の円を表示する

svg circle cx=50 cy=50 r=40 color=greenというコード

答え: 2(誤り)。SVGの<circle>要素で塗りの色を指定するにはfill属性を使います。color属性は塗りの色を直接指定するものではないため、このcolor="green"は反映されず、初期値の黒い円が表示されます。

第2問: 16進数カラーコード「#369」を6桁にすると「#306090」になる

答え: 2(誤り)。3桁の省略表記は、各桁を2回繰り返すことで6桁に展開します。「#369」なら「3→33」「6→66」「9→99」となり、正しくは「#336699」です。

第3問: HTML5.1のimg要素では、画面のピクセル密度に合わせて複数画像を指定できる

答え: 1(正しい)。img要素のsrcset属性に「1x」「2x」のような密度記述子(x descriptor)を指定することで、デバイスのピクセル密度に応じて異なる画像をブラウザに選ばせることができます。

第4問: VDT作業者への健康教育は、自主的な健康維持管理の知識についても行うことが望ましい

答え: 1(正しい)。VDT作業に関する労働衛生教育のガイドラインでは、作業者自身が自分の健康状態を把握し、自主的に管理・増進していけるよう、必要な知識を教育することが推奨されています。

第5問: SQLiteはスマートフォン専用のリレーショナルデータベース管理システムである

答え: 2(誤り)。SQLiteはスマートフォンアプリだけでなく、ブラウザ・デスクトップアプリ・組み込み機器など幅広い用途で使われる汎用の軽量データベースエンジンです。「スマートフォン専用」ではありません。

第6問: HTMLの文法に誤りがあっても、表示はCSSで決まるので影響はない

答え: 2(誤り)。ブラウザはHTMLの文法エラーをHTMLの解析規則に従って解釈・補正しながらDOMツリーを構築します。タグの閉じ忘れなどがあると、意図しない要素構造になり、結果としてCSSの適用のされ方や表示そのものに影響が出ることがあります。

第7問: A/Bテストとは、複数の案を比較して定量的に評価するテストである

答え: 1(正しい)。A/Bテストは、2つ(以上)のパターンを実際のユーザーに出し分け、クリック率やコンバージョン率などの数値(定量データ)で比較・評価する手法です。

第8問: フルードデザインは、画面幅を%指定にするなどしてコンテンツ幅を可変にする手法である

答え: 1(正しい)。フルードデザイン(Fluid Design)は、固定pxではなく%などの相対単位で幅を指定し、画面サイズに応じてレイアウトが伸縮する設計手法です。説明の通りです。

第9問: HTML5のrole属性は、WCAG2.0の仕様書で定義されている

答え: 2(誤り)。role属性は、WCAG2.0ではなくWAI-ARIA(Accessible Rich Internet Applications)という別の仕様で定義されています。WCAG2.0とWAI-ARIAは関連はありますが別の仕様書です。

第10問: window.requestAnimationFrame()には、更新関数と時間間隔(ミリ秒)の2つを渡す

答え: 2(誤り)。requestAnimationFrame()が受け取る引数はコールバック関数1つだけです。時間間隔を指定するsetInterval()やsetTimeout()と混同しやすいポイントですが、ブラウザーの次の再描画に合わせて1回呼び出されます。アニメーションを続けるにはコールバック内で再度requestAnimationFrameを予約します。

第11問: PHPにおいて、printは関数である

答え: 2(誤り)。printは関数ではなく言語構造(language construct)です。echoと同様、関数のように括弧をつけて呼び出すこともできますが、内部的には関数ではありません(ちなみにprintは必ず1を返すという性質があります)。

第12問: HTMLにおいて、form要素のaction属性のデフォルト値はgetである

掲載文のままなら2（誤り）。公式正答は原文照合待ちです。フォームの送信方式を指定するのはmethod属性で、省略時はgetです。actionは送信先URLを指定します。「action」を根拠なく「method」の誤記と読み替えて正答1とすることはできません。公式問題の原文がmethodなら判断は変わるため、原本と正答表の確認が必要です。

第13問: WCAG2.0では、ロゴの一部となっているテキストは4.5:1のコントラスト比がなくてもよい

答え: 1(正しい)。WCAG2.0のコントラスト比の基準(達成基準1.4.3)には例外規定があり、ロゴタイプ(ブランド名やロゴの一部であるテキスト)はコントラスト比の要件が適用されません。

第14問: Upper Camel Caseの命名規則で「SubText」は適切である

答え: 1(正しい)。Upper Camel Case(パスカルケース)は、単語の区切りごとに先頭を大文字にし、単語間にスペースや記号を入れない命名規則です。「SubText」はこのルールに沿っています。

第15問: SVGではレイヤー機能により、ビットマップとベクターデータを混在させることができる

答え: 2(誤り)。SVGには<image>要素でラスター画像を埋め込む機能はありますが、Photoshopのような「レイヤー機能」自体は備わっていません。「レイヤー機能により」という説明の部分が誤りです。

2. 選択問題

第16問: モスキートノイズの説明として適切なものはどれか

①主に画像の輪郭部分に発生するノイズのこと
②主に画像の中央部に発生するノイズのこと
③左右対称の画像を圧縮した場合の左右の違いのこと
④異なる2つの画像を圧縮した際に同一の画像になること

答え: ①。モスキートノイズは、JPEGなどの非可逆圧縮において、色の境界(輪郭)付近に発生する蚊(モスキート)が飛んでいるようなノイズです。

第17問: 番号付きリストを図のように(7→1と降順で)表示させるものはどれか

答え: ②。HTML5では、<ol>要素にreversedという真偽値属性を指定すると、番号が降順で表示されます。この属性は<ol>自体に付けるものであり、各<li>に個別に付ける(選択肢③)ものではありません。「inverted」(選択肢①)はHTMLに存在しない属性です。

第18問: 空のh1要素にJavaScriptで文字列を追加する。Aに入るメソッドはどれか

①querySelector
②querySelectorAll
③getElementById
④getElementsByClassName

答え: ①。コードは'.main-title'というCSSセレクタ形式の文字列を渡し、戻り値に対して直接.innerHTMLを代入しています(単一要素として扱っている)。CSSセレクタ形式の文字列を受け取り、該当する最初の1要素を返すのはquerySelectorです。querySelectorAllは複数要素のリスト(NodeList)を返すため.innerHTMLを直接代入できず、getElementById・getElementsByClassNameはドットを含まない値(id名・class名そのもの)を渡す必要があります。

第19問: ルート相対パスの記述例として適切なものはどれか

①web/index.html
②/web/index.html
③./web/index.html
④../web/index.html

答え: ②。ルート相対パスは、サイトのルート(ドメイン直下)からの位置を「/」から書き始めるパス形式です。①は相対パス、③は「現在の階層」を明示した相対パス、④は「1つ上の階層」を表す相対パスです。

第20問: ウェブサーバへのセキュリティ対策として不適切なものはどれか

①公開する必要のないファイルは、公開用ディレクトリに配置しない
②サーバ負荷・可用性低下を理由に、パスワード認証以外の認証(公開鍵認証等)は行わないようにする
③必要のないサービスは削除する
④OS・アプリケーションを最新の状態に保つ

答え: ②。公開鍵認証などを一律に避けるのは適切ではありません。なお「どちらでもログインできる設定」と「両方を要求する設定」は異なり、パスワード認証を併設するだけで安全性が高まるとは限りません。負荷や可用性を理由に強固な認証を避けるのは、セキュリティより利便性を優先した不適切な判断です。①③④はいずれも一般的に推奨される正しい対策です。

第21問: ワイヤーフレームに関する説明として最も適切なものはどれか

①詳細なサイトマップに存在するすべてのページに対して作成する
②視覚的要素も可能な限り盛り込んでビジュアルデザインに踏み込んだ検討を行う
③スクリーンサイズによって出す情報量は変化がないので1つのサイズだけ検討すればよい
④ナビゲーション、情報のグループ化、順序、優先度の検討に利用する

答え: ④。ワイヤーフレームは、配色や装飾といったビジュアル面ではなく、情報の構造・優先順位・配置を検討するための設計図です。①はすべてのページに必須というわけではなく、②はビジュアルデザインの領域、③は画面幅に応じて配置や操作性の検討が必要であり、いずれも不適切です。

第22問: HTML5.1から新しく追加された要素でないものはどれか

①details
②summary
③picture
④source

答え: ④。<source>要素は、HTML5.1で追加された<picture>要素より前から、<video>・<audio>要素の子要素として既に存在していました。5.1では<picture>の子要素としての使い道が追加されただけで、要素自体は新規追加ではありません。

第23問: UNIXのパーミッションを3桁で設定する場合、十の位に該当するユーザはどれか

①所有者(オーナー)
②グループ
③匿名ユーザ
④一般ユーザ

答え: ②。3桁のパーミッション(例: 755)は、百の位=所有者、十の位=グループ、一の位=その他のユーザーの権限を表します。十の位に該当するのはグループです。

第24問: a要素にマウスオーバーした時、コンテンツを半透明にするCSSはどれか

a:hoverに対するtransparency/opacityの4つの書き方の選択肢

当時のCSS Color Level 3の定義では②。opacity: 0.5は半透明です。Level 3では数値を指定しますが、現在の仕様では50%も有効なので、現在のブラウザーでは③も半透明になります。④の50は上限1に丸められ、不透明になります。過去問の番号と現在の実装を混同しないでください。

第25問: ECMAScriptはどこで実行されるか

①サーバサイドでのみ実行される
②クライアントサイドでのみ実行される
③サーバサイドでもクライアントサイドでも実行される可能性がある
④サーバサイドかクライアントサイドかをブラウザで指定できる

答え: ③。ECMAScriptはJavaScriptの元になっている言語仕様であり、実行環境を限定しません。ブラウザ上(クライアントサイド)で動くJavaScriptだけでなく、Node.jsのようにサーバサイドで実行される処理系もあります。

第26問: link要素の外部スタイルシートが適用されるのはどんな時か

media=screen and (max-width:500px)を指定したlink要素

①ビューポートの幅が500px以下のとき
②ビューポートの幅が500px以上のとき
③ビューポートの幅が500pxより小さいとき
④ビューポートの幅が500pxより大きいとき

答え: ①。メディアクエリのmax-width: 500pxは「500px以下」を意味します(500pxちょうども含む)。「より小さい」(未満)ではない点に注意してください。

第27問: HTML5のinput要素type属性の値として、誤っているものはどれか

①url
②date
③fax
④color

答え: ③。url・date・colorはいずれもHTML5で正式に定義されているinput要素のtype属性値です。「fax」という値はHTML5の仕様には存在しません。

第28問: クロスサイトスクリプティング(XSS)対策手法として適切なものはどれか

①キャッシュポイズニング
②サイズチェック
③エコーバック
④サニタイジング

答え: ④。実装では、出力先の文脈に応じたエンコードと、必要に応じたHTMLサニタイズを使い分けます。単に入力から特定の記号を削れば安全になるわけではありません。キャッシュポイズニングはむしろ攻撃手法の一種、サイズチェック・エコーバックはXSS対策として直接的な効果を持ちません。

第29問: iframe要素が使用できないHTMLのバージョンはどれか

①HTML4.01 Transitional
②XHTML1.0 Transitional
③XHTML1.1
④HTML5

答え: ③。iframeは、より制限の緩いTransitional系のDTD(HTML4.01 Transitional・XHTML1.0 Transitional)やHTML5では使用できますが、より厳格な仕様であるXHTML1.1には含まれていません。

第30問: HTML5において不適切なimg要素の記述はどれか

①<img src=”a.png” alt=””>
②<img src=”a.png” alt=”” width=50 height=50>
③<img src=”a.png” alt=”” width=”50″ height=”50″>
④<img src=”a.png” alt=”” width=”50%” height=”50%”>

答え: ④。HTML5の仕様上、img要素のwidth・height属性には「単位なしの整数値(ピクセル数)」を指定する必要があります。「50%」のようなパーセント指定はHTML属性としては無効です(CSSのwidth/heightプロパティであれば%指定は可能ですが、この設問はHTML属性についてです)。

第31問: 次のスタイルシートで実現される内容はどれか

h1とh1:hoverにfont-size・transition-duration・transform:rotateZを指定したCSS

①マウスポインタが重なっている間、反時計回りに回転しながら大きくなるアニメーションが4秒かけて表示される
②マウスポインタが重なっている間、上から下に落ちてくるアニメーションが4秒かけて表示される
③ページ表示と同時に、反時計回りに回転しながら大きくなるアニメーションが4秒かけて表示される
④ページ表示と同時に、上から下に落ちてくるアニメーションが4秒かけて表示される

答え: ①。transition-durationは基準となるh1セレクタ側に指定されており、:hoverという擬似クラスによって発火するため、マウスを重ねると4秒かけて指定状態へ変化し、その後は保持されます。繰り返し回り続ける指定ではなく、ポインターを外すと元の状態へ戻る変化も起こります。font-sizeが1emから2emに拡大し、rotateZ(-30deg)は反時計回りの回転を表すため、「反時計回りに回転しながら大きくなる」が正解です。上下移動を表すtranslateYのような指定はどこにもないため、②④は誤りです。

第32問: PHPで配列($arr)の末尾にデータを追加する適切な方法はどれか

①$arr[-1] = 1;
②$arr[] = 1;
③$arr[0] = 1;
④last($arr[]) = 1;

答え: ②。PHPでは$arr[] = 値;という書き方が、配列の末尾に新しい要素を追加する標準的なイディオムです。①は負のインデックス指定(PHPの配列では末尾追加の意味にならない)、③はキー0の要素を設定（既存なら上書き）、④はそのような構文自体が存在しません。

第33問: WAI-ARIAの「WAI」は何の略称か

①Way of Accessibility Improvement
②W3C Accessibility Information
③Web Accessibility Initiative
④Working-group of Accessibility Information

答え: ③。WAIは「Web Accessibility Initiative」の略で、W3C内でウェブアクセシビリティに関する仕様策定を担当する活動体の名称です。

第34問: SQLインジェクションやXSS対策のソフト・ハードウェアの一般総称はどれか

①Secure Socket Layer
②Web Application Firewall
③Intrusion Prevention System
④Intrusion Detection System

答え: ②。WAF(Web Application Firewall)は、SQLインジェクションやXSSといったアプリケーション層への攻撃を検知・防御するための製品カテゴリの総称です。SSLは通信の暗号化、IPS/IDSはネットワークレベルの侵入検知・防御が主目的で、アプリケーション層の攻撃に特化したものではありません。