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

第9問: イーサネットとは、1000BASE-Tの規格のみを指す

答え: 2(誤り)。イーサネットは規格の総称であり、10BASE-T・100BASE-TX・1000BASE-Tなど複数の規格を含みます。

第10問: ウェブサイトでの目的を達成するために、途中の過程を測る中間指標となるものを「KGI」という

答え: 2(誤り)。中間指標は「KPI(Key Performance Indicator)」と呼ばれます。「KGI(Key Goal Indicator)」は最終的な目標そのものを示す指標です。

第11問: HTML5において、外部JavaScriptファイルを読み込むときは、<script href=”sample.js”></script>のように記述する

答え: 2(誤り)。script要素でファイルを指定する属性はsrcです。hrefではありません。

第12問: HTML5では条件を満たせばimg要素のalt属性を省略することができる

答え: 1(正しい)。画像がページの本質的な内容ではない場合など、特定の条件下でalt属性の省略が認められています。

第13問: CSSのfont-familyプロパティで複数の候補がカンマ区切りで指定されている場合、一番最後に書かれているフォントファミリから優先される

答え: 2(誤り)。実際には最初(左)に書かれているフォントから優先して適用され、利用できない場合に順番に次の候補が使われます。

第14問: document.querySelectorAll()で取得できるものは配列である

答え: 2(誤り)。実際に返されるのは「NodeList」というオブジェクトであり、配列そのものではありません。map()などの配列専用メソッドをそのまま使えない点が異なります。

第15問: HTML5.2におけるfigcaption要素は、figure要素の要素内容の先頭か末尾にしか配置できない

答え: 1(正しい)。W3Cの仕様(figure要素の content model)では、figcaption要素は「figcaption要素1つの後にflow contentが続く」か「flow contentの後にfigcaption要素1つが続く」かのいずれかとされており、必ずfigure要素の最初の子要素か最後の子要素になります。

2. 選択問題

第16問: 文字の間隔を指定するCSSプロパティはどれか

• ①text-indent
• ②white-space
• ③letter-spacing
• ④word-spacing

答え: ③。文字同士の間隔を指定するのはletter-spacingです。④のword-spacingは単語と単語の間隔を指定するプロパティです。

第17問: HTML5.2においてbody要素内に配置できない要素はどれか

• ①link要素
• ②title要素
• ③style要素
• ④script要素

答え: ②。title要素はhead要素専用の要素で、body要素内には配置できません。①③④はHTML5.2の仕様上、条件付きでbody要素内にも配置可能です。

第18問: CSSで文法的に正しい指定はどれか

• ①p { color:inherit; }
• ②p { border:”none”; }
• ③p { border-width:3; }
• ④p { background:”red”; }

答え: ①。inheritのようなキーワードはクォートなしで書きます。②④はキーワードをクォートで囲んでしまっており無効、③のborder-widthは単位が必須の長さの値で、単位なしの数値は無効です。

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

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

答え: ④。ワイヤーフレームは視覚的な装飾を排除し、情報構造や優先順位を検討するためのものです。①全ページ作成が必須ではなく、②視覚的装飾を盛り込むのは本来の目的から外れ、③レスポンシブ対応では画面サイズごとに情報量や配置を検討する必要があるため、いずれも不適切です。

第20問: JavaScriptで425×1.08を計算する場合、最も正確な値となるものはどれか

• ①425 * 108 / 100;
• ②425 x 108 / 100;
• ③425 * 1.08;
• ④425 x 1.08;

答え: ①。JavaScriptでは、1.08のような小数を直接掛けると2進浮動小数点の丸め誤差が生じることがあります(425 * 1.08は実際には458.99999999999994のような値になります)。①は整数同士の演算(425×108÷100)のため誤差が生じにくく、正確な459が得られます。②④の「x」はJavaScriptの乗算演算子として無効です。

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

• ①公開する必要のないファイルは、公開用ディレクトリに配置しないようにする
• ②運営に必要のないサービスは削除する
• ③パスワード認証と公開鍵認証を併用するとサーバに負荷がかかるため、パスワード認証以外は行わないようにする
• ④脆弱性情報を随時入手し、OSやアプリケーションを最新の状態に保つ

答え: ③。実際には多要素認証(パスワード+公開鍵認証など)の方がセキュリティ上望ましく、パスワード認証だけに絞るのはむしろ不適切です。①②④はいずれも適切な対策です。

第22問: 「upper camel case」を採用したコーディング規約のルールに合致している文字列はどれか

• ①mainmenu
• ②subTopic
• ③anser_list
• ④PreEntry

答え: ④。upper camel case(パスカルケース)は、単語の先頭を含めすべての単語の先頭を大文字にする命名規則です。②のsubTopicは先頭が小文字の「lower camel case」、③はスネークケースで、いずれも異なります。

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

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

答え: ①。入力値やHTML出力に含まれる危険な文字を無害化する「サニタイジング」がXSS対策の代表的な手法です。

第24問: 個人情報保護法における「公表」の事例として、該当しないものはどれか

• ①店舗販売においては、店舗の見やすい場所へ掲示すること
• ②通信販売においては、通信販売用のパンフレットなどへ記載すること
• ③会員向けに限定されているウェブサイトにおいては、ID・パスワードによる認証を行い、さらに複数回操作した後に閲覧できる場所に記載すること
• ④自社の店舗・事務所内においては、ポスターなどに記載し掲示すること

答え: ③。「公表」は広く一般に知らせる行為を指します。認証が必要で複数の操作を経ないと辿り着けない場所への記載は、一般への「公表」とはみなされません。

第25問: SVGとは何の略称か

• ①Stylable Vector Graphics
• ②Scalable Vector Graphics
• ③Superficial Vector Graphics
• ④Single-lined Vector Graphics

答え: ②。SVGは「Scalable Vector Graphics」の略です。

第26問: マウスオーバーにより画像表示を切り替えたい。[A]の部分に当てはまるものはどれか

というHTMLコード”>

• ①src=’top_over.png’
• ②imgsrc=’top_over.png’
• ③this.src=”top_over.png”
• ④this.src=’top_over.png’

答え: ④。onmouseover属性の中で自分自身(このimg要素)を指すのはthisです。①③はthisが抜けているか、attribute全体を囲むダブルクォートと衝突するダブルクォートを内部で使ってしまっています。onmouseover="..."のように属性値全体がダブルクォートで囲まれているため、内部のJavaScript文字列はシングルクォートで書く必要があります。

第27問: ウェブコンテンツJIS(JIS X 8341-3)の達成基準2.4.1の[A]にあてはまる語句はどれか

• ①検索
• ②拡大
• ③スキップ
• ④レスポンシブ化

答え: ③。達成基準2.4.1は「ブロックスキップ」で、複数のページで繰り返されるナビゲーション等のブロックを読み飛ばせる仕組み(スキップリンクなど)の提供を求めています。

第28問: 安全色彩の説明として、最も適切なものはどれか

• ①長時間作業して目に優しい色
• ②色相差により誤認識が起きない色
• ③JISにより定められた安全を確保するための色
• ④JISにより定められた画面表示と印刷した色が完全に一致する色

答え: ③。安全色彩(安全色)は、危険・注意・安全などの情報を伝えるためにJISで規格化された色です。

第29問: WAI-ARIAのWAIとは、何の略称か

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

答え: ①。WAIは「Web Accessibility Initiative」の略です。

第30問: UNIXサーバでファイルのパーミッションを3桁の数字で設定する場合、十の位に該当するユーザはどれか

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

答え: ②。パーミッションの3桁は「所有者(百の位)・グループ(十の位)・その他(一の位)」の順に対応します。

第31問: init()関数をイベントリスナーとして呼び出したい。[A]に与えるべきイベントとして、最も適切なものはどれか

• ①loaded
• ②complete
• ③DOMContentLoaded
• ④onload

答え: ③。DOM構造の構築が完了したタイミングで発火するaddEventListener用のイベント名はDOMContentLoadedです。④のonloadはイベントハンドラのプロパティ名であり、addEventListenerに渡すイベント名としてはloadを使う必要があるため誤りです。

第32問: li要素のテキストを取り出し配列にして変数itemsに納めたい。[A]〜[C]のいずれにも使われない項目はどれか

• ①querySelectorAll
• ②filter
• ③map
• ④=>

答え: ②。[A]は複数要素を取得するquerySelectorAll、[B]は各要素を変換するmap、[C]はアロー関数の=>です。この中に「filter」(条件に合う要素だけを絞り込むメソッド)は使われていません。

第33問: HTML5.2において、img要素に指定可能な属性のうち、アクセシビリティに関係しているものはどれか

• ①sizes属性
• ②srcset属性
• ③longdesc属性
• ④crossorigin属性

答え: ③。longdesc属性は、画像の詳細な説明を提供するページへのリンクを指定する、アクセシビリティに関係する属性です。①②はレスポンシブ画像の最適化、④はCORS(クロスオリジン)関連の属性で、いずれもアクセシビリティとは直接関係しません。

第34問: 背景色と文字色のカラーコードの組み合わせのうち、コントラスト比が一番大きい組み合わせはどれか

• ①背景色 #505050 : 文字色 #111111
• ②背景色 #e6e6e6 : 文字色 #111111
• ③背景色 #c2c2c2 : 文字色 #111111
• ④背景色 #2f2f2f : 文字色 #111111

答え: ②。文字色がすべて同じ(ほぼ黒の#111111)なので、背景色が明るいほど明度差(コントラスト比)は大きくなります。②の#e6e6e6は選択肢の中で最も明るい背景色のため、最大のコントラスト比になります。

第35問: 次のようなコードがある場合、255という値を出力するコードはどれか

①print $color.red;

②print $color[‘red’];

③print $color->red;

④print $color;

答え: ②。$colorは連想配列なので、キーを使ってアクセスするには$color['red']のように角かっこで指定します。①の.は文字列連結演算子でありプロパティアクセスには使えず、③の->はオブジェクトのプロパティアクセス構文で配列には使えず、④は配列全体を出力しようとしてしまいます。

第36問: aside要素に関する説明のうち、最も適切なものはどれか

• ①視覚的にメインコンテンツの横に配置するための要素である
• ②メインコンテンツ内に配置することはできない要素である
• ③広告などのマークアップに適している要素である
• ④ブログサイトなどで記事を表示するのに適している要素である

答え: ③。aside要素は、本文と直接関係のない補足的な内容(広告など)を示すのに適した要素です。①視覚的な配置が本質ではなく、②実際にはメインコンテンツ内の補足情報として使うこともでき、④記事本体にはarticle要素が適切なため、いずれも誤りです。

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

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

答え: ④。XHTML1.1はモジュール化された最小限の要素セットで構成されており、iframe要素は含まれていません。①②③はいずれもiframe要素を使用できます。

第38問: HTML5.2において使用可能な要素はどれか

• ①image要素
• ②picture要素
• ③photo要素
• ④graphic要素

答え: ②。picture要素はHTML5.2で実在する要素です。①③④はいずれも存在しない要素名です(画像を表す要素はimgです)。

第39問: ユーザにアクションを求める場合の制限時間の説明として、適切なものはどれか

• ①中断復帰(制限時間後も同じ状態から再開できる)機能を提供するのが望ましい
• ②制限時間はアクションの種類や量によらず、システムの都合で設定してよい
• ③制限時間はどんな場合でも設定してはいけない
• ④制限時間がある場合でも、そのことを事前に教える必要はない

答え: ①。WCAGの「タイミング調整可能」の考え方に沿った、制限時間に配慮した設計です。②③④はいずれもアクセシビリティに反する不適切な考え方です。

第40問: 次のCSSセレクタのうち、適用対象が他の3つとは異なるものはどれか

• ①p:nth-child(1n+0)
• ②p:nth-child(n)
• ③p:nth-child(0)
• ④p

答え: ③。①②④はいずれも「すべてのp要素」にマッチします(1n+0とnはどちらもすべての正の整数番目を意味する数式です)。③のnth-child(0)は数式ではなく定数の0を指定しており、0番目の要素は存在しないため、常に何もマッチしません。

まとめ

• font-familyの優先順位は「左から右」。querySelectorAllの戻り値は配列ではなくNodeList
• JavaScriptの小数演算は丸め誤差が起きやすい。整数演算に置き換えられないか検討する
• HTML属性値の中でJavaScript文字列を書く場合、外側と内側でクォートの種類を使い分ける
• PHPの連想配列へのアクセスは角かっこ($arr[‘key’])。ドットやアロー演算子とは混同しない