対象: ウェブデザイン技能検定2級を受験する方(平成28年度第1回 学科試験)
難易度: ★★★
所要時間: 約30分
平成28年度第1回の学科問題を、全40問すべて理由つきで解説します。
1. 2択問題(正しい=1、間違い=2)
第1問: HTML5において、header要素はセクショニングコンテンツに属さない
答え: 1(正しい)。セクショニングコンテンツに分類されるのはarticle・aside・nav・sectionの4要素で、header要素はこれに含まれません。
第2問: jQueryなどのJavaScriptフレームワークの利用には、各ユーザエージェントのプラグインが必須である
答え: 2(誤り)。jQueryはブラウザに標準搭載されているJavaScriptの機能だけで動作するライブラリで、追加のプラグインは不要です。
第3問: バックアップデータは、同じサーバ内の異なるドライブに保管することが最も安全である
答え: 2(誤り)。同じサーバ内に保管すると、サーバ本体の故障・盗難・災害などにより元データとバックアップの両方を同時に失うリスクがあります。物理的に離れた場所や別システムに保管する方がより安全です。
第4問: HTMLドキュメント内でPHPコードを扱う場合、「<!–」と「–>」の2つのタグで囲む必要がある
答え: 2(誤り)。PHPコードは<?phpと?>で囲みます。<!-- -->はHTMLのコメント構文です。
第5問: 画像を事前アップロードしていても、HTMLからimg要素等でパス指定しないとユーザはアクセスできない
答え: 2(誤り)。画像が公開ディレクトリに置かれている場合、URLを直接知っていれば、どのHTML要素からも参照されていなくてもアクセスできてしまいます。
第6問: A/Bテストとは、複数の案を比較して定量的に評価するテストである
答え: 1(正しい)。正しい説明です。
第7問: 不正アクセス禁止法は、アクセス管理者に不正アクセスからの防御措置を講ずべき責務があることも規定している
答え: 1(正しい)。不正アクセス行為の禁止だけでなく、アクセス管理者側の防御措置についても規定されています。
第8問: 2016年3月に改正されたJIS X 8341-3は、内容的にWCAG2.0と完全に一致した規格である
答え: 1(正しい)。この改正は、国際規格であるWCAG2.0と技術的に整合させることを目的としたものです。
第9問: WebGLは、ブラウザにプラグインをインストールして用いる
答え: 2(誤り)。WebGLはブラウザに標準搭載されたJavaScript APIであり、プラグインのインストールは不要です。
第10問: HTML5のh1〜h6要素は、単なる「見出し」ではなく「セクションの見出し」を表す
答え: 1(正しい)。HTML5のアウトラインの考え方において、見出し要素は文書内の各セクションに対する見出しと位置づけられています。
第11問: HTMLの文法に誤りがあっても、表示に影響を与えることはない
答え: 2(誤り)。要素の閉じ忘れや不適切な入れ子構造は、ブラウザの解釈次第で意図しないレンダリング結果を招くことがあります。
第12問: audio要素のcontrols属性値に「yes」を指定すると、一時停止などのUIが表示できる
答え: 2(誤り)。controls属性は真偽属性(boolean attribute)のため、属性名を書くだけで有効になります。「yes」のような値を指定する必要はなく、そのような書き方自体が誤りです。
第13問: co.jpのドメインを取得する場合、ドメイン名に半角文字である「$」を使用することはできない
答え: 1(正しい)。ドメイン名に使用できるのは半角英数字とハイフンのみで、「$」のような記号は使用できません。
第14問: 労働基準法では、労働時間が6時間超で45分、8時間超で1時間の休憩を与えなければならないと規定されている
答え: 1(正しい)。労働基準法第34条の規定通りです。
第15問: Refererは、HTTPヘッダの一つである
答え: 1(正しい)。正しい説明です。
2. 選択問題
第16問: ファイルを勝手に暗号化して読み取れなくする不正プログラムを何というか
「ファイルを暗号化した後に、その復元と引き替えに金銭を要求するといった手口がある」
- ①スパイウェア
- ②ランサムウェア
- ③ボット
- ④ロジックボム
答え: ②。ファイルを暗号化し、復元と引き換えに金銭(身代金)を要求するのが「ランサムウェア(Ransomware、ransom=身代金)」の典型的な手口です。
第17問: ユーザがとる一連の行動や思考、感情の起伏などを図式化したものを何というか
- ①サイトマップ
- ②カスタマージャーニーマップ
- ③ワイヤーフレーム
- ④ヒートマップ
答え: ②。ユーザの行動・思考・感情の変化を時系列で図式化したものが「カスタマージャーニーマップ」です。
第18問: ポート番号8080を指定したURIとして正しいものはどれか
- ①http://example.com
- ②http://example.com/8080/
- ③http://example.com:8080/
- ④https://example.com
答え: ③。URIでポート番号を指定する場合は、ホスト名の後にコロン(:)を挟んで記述します。②のようにパスの一部として「/8080/」と書いても、ポート番号としては認識されません。
第19問: サイト内の主要なコンテンツへのリンクが集められ、サイト全体の構造も示す、各ページ共通のメニューを何というか
- ①ローカルナビゲーション
- ②パンくずリスト
- ③ワールドワイドナビゲーション
- ④グローバルナビゲーション
答え: ④。サイト全体で共通して配置され、主要なコンテンツへの導線とサイト構造を示す役割を持つのが「グローバルナビゲーション」です。
第20問: CDNは何の略か
- ①Content Data Network
- ②Computer Data Network
- ③Content Delivery Network
- ④Computer Delivery Network
答え: ③。CDNは「Content Delivery Network」の略で、コンテンツを効率よく配信するための分散ネットワークです。
第21問: 変数colorのB成分を256階調の整数値で変数blueに納めたい。[A]に当てはまる演算子はどれか
![var blue = color [A] 0xFF というJavaScriptコード](https://design-levelup.com/wp-content/uploads/2018/02/8041031b2e748d9bc73d87c8da952ea9.39.png)
- ①&
- ②|
- ③&&
- ④^
答え: ①。0xFFCC99の下位1バイト(B成分)だけを取り出すには、ビット単位のAND演算子&で0xFFとマスクします。0xFFCC99 & 0xFFの結果は0x99(10進数で153)になり、条件と一致します。
第22問: ターゲットユーザになったつもりでサイトを操作し、問題点を指摘するユーザビリティの評価手法は何か
- ①ユーザビリティテスト
- ②クラウドソーシング
- ③ヒューリスティック評価
- ④認知的ウォークスルー
答え: ④。評価者がターゲットユーザの視点に立ち、実際のタスクを一つずつ模擬的に実行しながら問題点を見つけるのが「認知的ウォークスルー」です。③のヒューリスティック評価は、専門家が経験則(ヒューリスティクス)に基づいて評価する手法で、ユーザ視点での模擬操作を前提としない点が異なります。
第23問: 次のPHPコードを実行した場合、出力されるものはどれか
[array(\”id\” => 129, \”name\” => \”Yamashita\”), array(\”id\” => 130, \”name\” => \”Yamada\”)]); print json_encode($a); というPHPコード” />- ①{“students”:[{“id”:129,”name”:”Yamashita”},{“id”:130,”name”:”Yamada”}]}
- ②”students”:[{“id”:129,”name”:”Yamashita”},{“id”:130,”name”:”Yamada”}]
- ③”students”:array({“id”:129,”name”:”Yamashita”},{“id”:130,”name”:”Yamada”})
- ④array(“students”:array({“id”:129,”name”:”Yamashita”},{“id”:130,”name”:”Yamada”}))
答え: ①。json_encode()は、キー”students”を持つ連想配列全体をJSON形式の1つのオブジェクトとして変換します。中の配列も含めて全体が波かっこ{}で囲まれ、①の形式になります。
第24問: 画像補間の方法として適さないものはどれか
- ①ニアレストリニア法
- ②バイキュービック法
- ③バイリニア法
- ④ニアレストネイバー法
答え: ①。実在する画像補間方法は、最近傍の1点を使う「ニアレストネイバー法」、周囲4点から補間する「バイリニア法」、周囲16点から補間する「バイキュービック法」の3つです。「ニアレストリニア法」という名称の補間方法は存在しません。
第25問: HTML5においてdiv要素に指定できない属性はどれか
- ①role
- ②align
- ③data-zokusei
- ④contenteditable
答え: ②。align属性は、レイアウトをCSSで行う方針に伴いHTML5で廃止されたレガシー属性です。role・data-*・contenteditableはHTML5でも使用できるグローバル属性です。
第26問: WCAG2.0で、非テキストコンテンツの代替テキストが不要とされる例外に該当しないものはどれか
- ①純粋に装飾を目的とした画像
- ②ユーザに向けたものではない画像
- ③見た目の整形のためだけに用いられている画像
- ④写真を見せる以外に明確な目的を持たない写真の画像
答え: ④。①②③はいずれも、WCAG2.0で明示的に代替テキストが不要とされる典型例(装飾目的・非表示・レイアウト調整用)です。④の「写真を見せること自体が目的の写真」は、むしろその写真の内容こそが伝えるべき情報であるため、原則として代替テキストが必要とされ、例外には該当しません。
第27問: 静止画の圧縮に用いられる誤差拡散法(ディザリング)の説明として適切なものはどれか
- ①色の濃い部分では点の密度を上げ、薄い部分では密度を下げることで疑似的に色数を増やす
- ②色の濃い部分では点の密度を下げ、薄い部分では密度を上げることで疑似的に色数を増やす
- ③サーバ上の類似の静止画を検索して置き換える
- ④サーバ上の類似の静止画を削除してデータ量を減らす
答え: ①。誤差拡散法(ディザリング)は、色の濃淡に応じて点の密度を変化させることで、限られた色数でも多階調に見える表現を作り出す手法です。
第28問: アクセスログの管理に関する用語とその説明として適切なものはどれか
- ①一定期間内に閲覧された回数を「ユニークブラウザ数」と呼ぶ
- ②一定期間内に訪問した、重複のないユーザの数を「ユニークユーザ数」と呼ぶ
- ③リンク元ページのURL情報を「ヒストリ」と呼ぶ
- ④流入から離脱までの一連のページ遷移を「デッドリンク」と呼ぶ
答え: ②。一定期間内の重複のない訪問者数を「ユニークユーザ数」と呼ぶのは正しい定義です。③のリンク元URL情報は「リファラ」と呼ぶのが正しく、④のページ遷移の流れは「デッドリンク(リンク切れ)」とは無関係の別概念です。
第29問: CSSのbackground-colorプロパティの初期値の色はどれか
- ①白
- ②透明
- ③ウェブブラウザで設定されている色
- ④黒
答え: ②。background-colorの初期値はtransparent(透明)です。
第30問: HTML5において、意味が大きく変更された要素はどれか
- ①em
- ②dfn
- ③abbr
- ④strong
答え: ④。strong要素は、HTML4での単なる「強調」からHTML5では「重要性・深刻さ・緊急性」を表す要素へと意味が明確化されました。
第31問: WCAG2.0ガイドライン2.2で求められる、コンテンツを読み使用するために十分な[A]とは何か
- ①カスタマイズ性
- ②時間
- ③話題
- ④表示領域および余白
答え: ②。WCAG2.0のガイドライン2.2は「十分な時間の提供(Enough Time)」を求める達成基準です。
第32問: 表の題名部分を除いて1行おきに色を変えたい。CSS内の[A]部分に記すべき内容はどれか


- ①table tr:nth-child(2n+3) { background-color: #000; color: #FFF; }
- ②table tr:nth-child(n+2) { background-color: #000; color: #FFF; }
- ③table tr:nth-child(odd) { background-color: #000; color: #FFF; }
- ④table tr:nth-child(2n) { background-color: #000; color: #FFF; }
答え: ①。見出し行(1行目)を1番目として数えると、色を変えたいのは3番目(第2代)と5番目(第4代)のtrです。nth-child(2n+3)は3, 5, 7…番目を選択するため、ちょうど条件に一致します。③のodd(1,3,5…)は見出し行(1番目)も含んでしまい、④の2n(2,4,6…)は第1代・第3代・第5代の行を選んでしまうため、いずれも図と一致しません。
第33問: Apacheにおいて、DIGEST認証のユーザ管理に用いるコマンドとして適切なものはどれか
- ①htpasswd
- ②useradd
- ③htdigest
- ④digest
答え: ③。ApacheでDIGEST認証用のパスワードファイルを管理するコマンドはhtdigestです。htpasswdはBasic認証用のコマンドのため、区別して覚えておきましょう。
第34問: リンクの上にカーソルをのせた際、文字色が赤になるCSSの指定はどれか
- ①a:hover{color:red;} a:link,a:visited{color:blue;}
- ②body a:hover{color:red;} a:link,a:visited{color:blue;}
- ③a:link,a:visited{color:red;} a:hover{color:blue;}
- ④body a:link,body a:visited{color:blue;} a:hover{color:red;}
答え: ②。CSSは詳細度(セレクタの強さ)が同じ場合、後に書かれたルールが優先されます。①はa:hoverとa:link,a:visitedの詳細度が同じで、後に書かれたa:link,a:visitedのcolor:blueがhover時にも上書きしてしまい、赤くなりません。②はbody a:hoverという要素を1つ多く含むセレクタで詳細度が高いため、後に書かれたa:link,a:visitedより優先され、hover時に赤が保たれます。
第35問: W3Cにおいて、標準化されていないものはどれか
- ①SVG
- ②EPUB
- ③WCAG
- ④MathML
答え: ②。電子書籍のフォーマット規格であるEPUBは、この試験が実施された時点ではIDPF(国際電子出版フォーラム)が策定した規格であり、W3C勧告ではありませんでした。SVG・WCAG・MathMLはいずれもW3C勧告です。
第36問: 個人情報保護法における「本人の同意」を得ている事例として、該当しないものはどれか
- ①同意する旨を、本人から口頭または書面で確認すること
- ②本人が署名または記名押印した同意書等の文書を、受領し確認すること
- ③同意を依頼する内容のメールを本人宛に送信し、それを本人が受信すること
- ④本人による、同意する旨のウェブ画面上のボタンをクリックすること
答え: ③。同意を依頼するメールが本人に届いた(受信した)というだけでは、本人が実際に同意の意思表示をしたことにはなりません。①②④はいずれも、本人による明確な同意の意思表示が伴っています。
第37問: SEOポイズニングの説明として適切なものはどれか
- ①コメント欄に無関係な広告を無差別に大量投稿する
- ②検索エンジン最適化を悪用して不正プログラムを埋め込んだ悪意あるサイトを検索結果の上位に表示し、誘導する
- ③第三者のブログに無関係なトラックバックを送信して自分のブログに誘導する
- ④不自然なリンクを大量に張って検索結果の表示順位を上げようとする状態
答え: ②。SEOの手法を悪用し、不正プログラムを仕込んだ悪意あるサイトを検索結果の上位に表示させて利用者を誘導する手口が「SEOポイズニング」です。
第38問: 次のjQueryのスクリプトによって実現されるものはどれか

- ①h1要素の文字色は赤で背景色は青になり、上マージンが100ピクセル確保される
- ②h1要素の文字色は赤で背景色は青になるが、マージンは変化しない
- ③h1要素の文字色は赤で背景色は青になり、その後しばらくたってから上マージンが100ピクセル確保される
- ④上マージンは100ピクセル確保されるが、文字色と背景色はデフォルトのまま変化しない
答え: ①。.css()メソッドはアニメーションではなく即座にスタイルを適用するため、チェーンされた2つの.css()呼び出しはどちらも同時に(遅延なく)反映されます。文字色・背景色・マージンのすべてが一度に変わります。
第39問: Click Through Rate(CTR)の算出方法はどれか
- ①インプレッション数÷クリック数
- ②ページビュー数÷インプレッション数
- ③クリック数÷インプレッション数
- ④クリック数÷ページビュー数
答え: ③。CTR(クリック率)は「クリック数÷インプレッション数(表示回数)」で算出します。
第40問: canvas要素に矩形を描くdrawRect()関数を呼び出すと、どのような図形が描かれるか

- ①塗り色が#00FFFFで枠線が#0000FFの矩形
- ②塗り色が#FF00FFで枠線が#0000FFの矩形
- ③塗り色が#00FFFFの矩形
- ④塗り色が#FF00FFの矩形
答え: ③。strokeStyle(枠線色)に”blue”を設定していても、strokeRect()やstroke()を一度も呼び出していないため、枠線は描画されません。実際に呼び出されているのは塗りつぶしのfillRect()のみで、色はfillStyleに設定された”aqua”(#00FFFF)です。
まとめ
- 「設定しただけで使っていないプロパティ」に注意する(strokeStyleを設定してもstrokeRect/strokeを呼ばなければ枠線は描かれない)
- CSSの詳細度と記述順序の関係(hoverと他の疑似クラスの優先順位)は頻出の引っかけポイント
- nth-child()の数式(2n+3, odd, 2nなど)は、実際に何番目の要素が選ばれるか書き出して確認する
- 用語の混同に注意(ユニークユーザ数⇄ユニークブラウザ数、リファラ⇄ヒストリなど)

