2019年5月に実施されたウェブデザイン技能検定二級の過去問全40問について、解説していきます。
二級の問題は、(1)〜(15)が○×問題、(16)〜(40)が四択問題で構成されています。
押さえておきたいポイントや正答の理由を丁寧に整理しながら、順番に解説していきます。
合格ラインは70点前後とされていますが、配点の詳細は公表されていません。
まずは着実に理解を深め、70%以上の正解率を目指して問題に取り組んでいきましょう。
1〜10問 ○×問題
(1) A/Bテストとは、複数の案を比較して定量的に評価するテストである。
正解：〇
Webページの異なるパターンを比較して成果を測るテストです。2種類以上でも「A/Bテスト」と呼びます。
(2) KVSはMySQLなどのデータベースの標準的な格納形式である。
正解：✕
KVS（Key-Value Store）は、キーと値の組み合わせでデータを管理するシンプルな構造のデータベースです。
- キー（Key）：データを識別するためのIDや名前
- 値（Value）：キーに対応する情報やデータ
KVSの具体例
| キー（Key） | 値（Value） | 説明 |
|---|---|---|
| user:1001 | {“name”:”田中太郎”,”age”:28,”email”:”tanaka@example.com”} | ユーザーIDをキーにして、ユーザー情報を保存 |
| session:abc123 | “user:1001” | ログインセッションIDをキーにして、どのユーザーかを紐付け |
| ranking:2025-10-12 | [“user:1003″,”user:1007″,”user:1001”] | 日ごとのランキング情報をキーに保存 |
| cache:top_articles | [“記事ID12″,”記事ID45″,”記事ID78”] | 頻繁にアクセスされるデータのキャッシュとして保存 |
KVSのポイント
- キーはユニークでデータを特定する
- 値は自由に構造化可能（文字列・JSON・配列など）
- データ形式が自由なので、必要に応じて柔軟に変更できる
KVSは NoSQLの一種 で、従来のリレーショナルデータベース（RDB）とは異なる考え方でデータを管理します。
NoSQLとは
「Not Only SQL」の略で、リレーショナルDBのようにテーブルに沿ってデータを管理するのではなく、自由な形式でデータを保存できるデータベースの総称です。
データ構造がシンプルで高速に読み書きできるため、WebサービスやSNS、大規模システムでの利用に向いています。
MySQLとは
MySQLとは（リレーショナルDB） データを表（テーブル）と列に沿って格納し、SQLという言語で操作する伝統的なデータベースです。 複雑な検索や結合処理が得意で、データの整合性を重視するシステムに向いています。
NoSQL（KVSなど）とMySQLの違い【具体例】
| 項目 | KVS（NoSQL） | MySQL（リレーショナルDB） |
|---|---|---|
| データの保存方法 | キーと値の組み合わせで保存 | **表（テーブル）**に行と列で整理して保存 |
| データ例 | user:1001 → {“name”:”田中太郎”,”age”:28,”email”:”tanaka@example.com”} | Userテーブル：ID=1001、名前=田中太郎、年齢=28、メール=tanaka@example.com |
| 柔軟性 | 高い：値の中に自由に項目を追加可能 | 低い：新しい項目は列を追加する必要がある |
| 検索・集計 | 単純検索は高速、複雑検索は苦手 | 複雑な検索・集計・結合に強い |
| スケーラビリティ | サーバーを追加して簡単に拡張可能 | 水平方向の拡張が難しく、縦にスケールするのが基本 |
| 利用例 | Webサービスのセッション管理、ランキング、キャッシュ | 注文履歴管理、会計システム、在庫管理 |
(3) HTML5.2では、dl要素の内部においてdiv要素を使用し、dt要素とdd要素をグループ化することができる。
正解：〇
dtとddは基本的にdlの直下に置くのが原則ですが、HTML5.2では関連するdtとddのペアをdivでグループ化することも可能です。
実務で使う機会は少ないかもしれませんが、仕様として正式に認められており、CSSでまとめてスタイルを適用したい場合などに便利です。
具体例：下記の例では、各用語と説明のペアをdivで囲むことで、CSSでグループ単位にデザインを適用しやすくなります。divで囲むと、dlの「直下ではない」ように見えますが、HTML5.2仕様上は問題ありません。
<dl>
<div>
<dt>HTML</dt>
<dd>Webページを作成するためのマークアップ言語</dd>
</div>
<div>
<dt>CSS</dt>
<dd>Webページの見た目を整えるスタイルシート</dd>
</div>
</dl>(4) CSSでは16進数のカラーコードを3桁に省略することが可能だが、「#24c」と省略されたカラーコードは6桁の場合は「#2244cc」となる。
正解：〇
16進カラーコードは、各RGBの値が同じ場合、1桁ずつ省略できます。
つまり「#2244cc」は「#24c」と書くだけで同じ色を表現できます。
(5) HTML5.2では、どのlink要素でもbody要素の内部に配置してよい。
正解：✕
link要素は、CSSやファビコンなど外部リソースをHTML文書に関連付けるタグです。原則としてhead内に配置するのがルールで、headは文書の「設定情報」をまとめる場所です。
正しい例：head内にlinkを置く場合
head内に置くことでページ表示前にスタイルが適用され、レイアウトの崩れを防ぐことができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>こんにちは！</h1>
</body>
</html>正しくない例：body内にlinkを置く場合
<body>
<h1>こんにちは！</h1>
<link rel="stylesheet" href="style.css">
</body>もしbody内にlink要素を置くと、以下の問題が起こることがあります。
- 意図したスタイルや機能が正しく適用されない
- W3CのHTMLバリデーションでエラーになる
- ブラウザによっては無視されることもある
- ページ描画後にCSSが読み込まれるため、一瞬レイアウトが崩れる「フラッシュ」が発生することがある
(6) form要素のmethod属性のデフォルト値はgetである
正解：〇
HTMLのform要素には、フォームの送信方法を指定するmethod属性があります。主に以下の2種類があります。
- get：フォームの入力内容がURLに含まれる方式。検索フォームなどに向いています。
- post：フォームの入力内容がHTTPリクエストの本文に含まれる方式。パスワードや個人情報など機密性の高いデータの送信に適しています。
method属性を指定しない場合はデフォルトでgetが使われます。
そのため、パスワードや個人情報を送信するフォームでは、method=”post”に変更することが推奨されます。
例1：method=“get”（デフォルト）
<form action="/search" method="get">
<input type="text" name="query" placeholder="検索ワード">
<button type="submit">検索</button>
</form>例2：method=“post”（安全な送信）
• 入力内容はHTTPリクエストの本文に含まれるため、URLには表示されません
<form action="/login" method="post">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">ログイン</button>
</form>(7) document.querySelectorAll()で取得できるものは配列である
正解：✕
document.querySelectorAll()は、指定したCSSセレクタに一致するすべての要素をまとめて取得するメソッドです。
メソッドとは？
プログラミングにおけるメソッドは、オブジェクト（データや要素）に対して何かの操作をするための関数です。
例：console.log() → 文字を出力する、
querySelectorAll() → HTMLページから要素を取得する。
document.querySelectorAll()は何のために使う？
Webページには、たくさんのHTML要素（ボタン、画像、リストなど）が存在します。
例えば「すべてのボタンに同じ処理をしたい」とき、1つずつidを指定して操作するのは大変です。
そこで使うのが document.querySelectorAll() です。
- 指定したCSSセレクタに一致するすべての要素をまとめて取得できる
- 取得した要素にまとめて処理（色を変える、文字を置き換えるなど）を行える
例：すべてのボタンの文字色を赤にする
<button class="red-btn">ボタン1</button>
<button class="red-btn">ボタン2</button>
<button class="red-btn">ボタン3</button>
<script>
const buttons = document.querySelectorAll(".red-btn"); // すべてのボタンを取得
buttons.forEach(btn => {
btn.style.color = "red"; // 文字色を赤に変更
});
</script>- querySelectorAll(“.red-btn”) → クラス名red-btnのボタンを全て取得
- 取得した要素（NodeList）にforEachで順番に操作
ちなみに配列（Array）とは？
配列とは、複数のデータを1つの変数にまとめて管理する仕組みのことです。
たとえば、「りんご」「みかん」「バナナ」という3つのデータをそれぞれ別の変数で管理するのは面倒ですよね。
const fruit1 = "りんご";
const fruit2 = "みかん";
const fruit3 = "バナナ";これを1つの箱（＝配列）にまとめて入れられるのが「配列」です。
const fruits = ["りんご", "みかん", "バナナ"];配列の特徴
- データを順番（インデックス）で管理できる
- 同じ処理を一括で行える（例：全てのデータを表示するなど）
console.log(fruits[0]); // りんご
console.log(fruits[2]); // バナナ
fruits.forEach(fruit => {
console.log(fruit); // 1つずつ出力
});では、NodeListとの違いは？
document.querySelectorAll()が返すのはNodeList（ノードリストと呼ばれる“配列っぽい”オブジェクトです。見た目は似ていますが、厳密には配列とは違います。
| 比較項目 | 配列（Array） | NodeList（ノードリスト） |
|---|---|---|
| 中身 | 何でも入る（文字・数字など） | HTML要素だけ |
| ループ処理 | forEach / map / filterなど多く使える | forEachは使えるが、mapやfilterは使えない |
| 変換方法 | そのまま使える | Array.from()で配列に変換できる |
NodeListを配列に変換する例
const items = document.querySelectorAll(".item"); // NodeListを取得
const arr = Array.from(items); // 配列に変換これでmap()やfilter()など、配列特有のメソッドも使えるようになります。
まとめ
- 配列（Array）：複数の値をまとめて扱う“箱”
- NodeList：HTML要素をまとめて扱う“配列に似た箱”
- document.querySelectorAll()はNodeListを返すため、「配列ではない」が「似ている」
(8) サイバーセキュリティ基本法は、個人にも責務を課している
正解：✕
サイバーセキュリティ基本法で責務を負うのは国や事業者です。
個人には法的な義務はありませんが、自分の情報をWebサービスやアンケート、通販などで扱う際は注意する必要があります。
便利さの裏にあるリスクを意識することが、個人のセキュリティ意識向上につながります。
(9) VDT作業者の作業時間管理は、個人任せでよい
正解：✕
VDT（Visual Display Terminal）作業とは、
パソコンやタブレットなどの画面を見ながら行う作業のことです。
この作業は長時間続けると、目の疲れ（眼精疲労）・肩こり・腰痛・ストレスなどの健康障害を引き起こすおそれがあります。
そのため、作業者本人の自己管理に任せるのではなく、事業者や上司が組織的に管理することが必要です。
労働安全衛生規則や厚生労働省の「VDT作業における労働衛生管理のためのガイドライン」でも、以下のような対策が推奨されています。
管理者が行うべき主な対策
- 作業時間の管理：連続して作業する時間は1時間程度を目安にし、10〜15分の休憩を取る。
- 作業環境の整備：照明の明るさやモニターの位置、高さを調整して目や体に負担をかけないようにする。
- 作業姿勢の確認：椅子や机の高さを調整し、正しい姿勢で作業できるようにする。
- 健康相談・教育：定期的に目や体の不調を確認し、必要に応じて相談できる体制を整える。
まとめ
VDT作業は個人のペースに任せると、自覚のないまま長時間作業を続けてしまう危険があります。
そのため、企業や管理者が主体となって作業時間・休憩・環境を管理することが安全衛生上の義務です。
(10) 中間指標は「KGI」である
正解：✕
KGI（Key Goal Indicator）とは、最終的なゴール（成果）を示す指標のことです。
それに対して、KPI（Key Performance Indicator）は、そのゴールに到達するまでの途中経過（プロセス）を測る指標です。
KGIとは？
最終目標（ゴール）の達成度を表す「結果の指標」。
どれくらい目標を達成できたかを判断するために使います。
例：
- 売上1,000万円を達成する
- 新規契約件数を500件にする
- 月間アクセス数を10万PVにする
KPIとは？
KGIを達成するための途中経過や行動量を測る指標。
目標に向かって順調に進んでいるかを管理する目的で使います。
例：
- 問い合わせ件数を月100件に増やす
- 広告クリック率（CTR）を3％にする
- LINE登録率を20％に保つ
KPIは「過程を測る指標」で、進捗や課題を早めに把握できます。
まとめ
| 種類 | 何を測る？ | 例 | タイミング |
|---|---|---|---|
| KGI | 最終的なゴール | 売上1,000万円達成 | 最後に確認 |
| KPI | 途中の経過 | 問い合わせ件数100件/月 | 日々・週ごとに確認 |
このように、KPIはKGIを達成するための道しるべです。
「中間指標＝KPI」、「最終目標＝KGI」と覚えると整理しやすいです。
ここまでで10問、お疲れ様でした！
HTML・CSS・Webの基礎をしっかり押さえましたね。少し休憩して、気持ちをリフレッシュしましょう。準備ができたら、11問目から また一緒に進めていきましょう！
11〜20問 ○×問題
(11)〜(15)は、CSSやJavaScriptなど見慣れた技術に関する問題や、Webデザイナーにはやや接点の少ない「ネットワーク」に関する問題が出題されます。
(11) CSSのfont-familyプロパティで複数の候補がカンマ区切りで指定されている場合、一番最初に書かれているフォントファミリから優先される。
正解：○
CSSの font-family は、指定したフォントの順番通りに優先されます。
p { font-family: "Arial", "ヒラギノ角ゴシック", sans-serif; }この場合、
- Arial があれば表示
- それもなければ最終的に sans-serif が使われる
- なければ ヒラギノ角ゴシックで表示
(12) PHPにおいて、printは関数である
正解：×
print は PHP の 文（statement） のひとつで、文字列や値を画面に表示する命令です。関数ではありません。
関数とは「何かの処理をまとめて呼び出せる仕組み」のことです。例えば PHP では strlen(“Hello”) のように文字列の長さを返す関数があります。関数は丸括弧で囲んで呼び出しますが、print はその場で値を表示するだけなので、丸括弧は不要です。
print "Hello"; // 文（statement）として画面に表示
echo strlen("Hello"); // 関数として文字列の長さを取得覚え方としては、
- print は「直接実行される命令」
- 関数は「呼び出して処理を行うもの」
と考えるとわかりやすいです。
(13) HTML5において、外部JavaScriptファイルを読み込むときは、<script src=”ファイル名.js”></script>のように記述する。
正解：×
外部JavaScriptを読み込むときは、<script src=”ファイル名.js”></script> と書きます。
ここでよくある間違いは href を使ってしまうこと。
href はリンク先に移動するときに使う属性です。JavaScriptを読み込む場合に使うとブラウザが「リンク」として扱ってしまうため、必ず src を使いましょう。
<!-- 正しい例 -->
<script src="main.js"></script>
<!-- 間違い -->
<script href="main.js"></script>(14) HTML5.2におけるfigcaption要素は、figure要素の要素内容の先頭か末尾にしか配置できない。
正解：×
<figure> は図や写真、イラストなどのコンテンツをまとめる要素で、<figcaption> はそのキャプション（説明文）をつけるための要素です。HTML5.1以降は <figure> の中なら 先頭でも途中でも末尾でも配置可能 です。
<!-- figcaptionを先頭に配置 -->
<figure>
<figcaption>図の説明</figcaption>
<img src="image.png" alt="サンプル画像">
</figure>
<!-- figcaptionを途中/末尾に配置 -->
<figure>
<img src="image.png" alt="サンプル画像">
<figcaption>図の説明</figcaption>
</figure>HTML5.0では先頭か末尾に置く必要がありましたが、HTML5.1以降は 内であればどこでも配置可能です。
(15) イーサネットとは、1000BASE-Tの規格のみを指す。
正解：×
イーサネットは LAN（有線ネットワーク）の 通信規格全体 を指します。
ここでいう「規格」とは、機器が正しく通信するためのルールや基準のセット のことです。
速度だけでなく、ケーブルの種類や信号の方式、コネクタの形状なども含まれます。
代表的な規格と速度の目安：
• 10BASE-T → 最大 10 Mbps
• 100BASE-TX → 最大 100 Mbps
• 1000BASE-T → 最大 1000 Mbps（1 Gbps）
ポイント：
- イーサネット = 「有線LANで通信するためのルール全体」
- 速度はその中の一部なので、1000BASE-T だけを指すわけではありません。
(16)〜(20)は、HTML・CSSに加えて、JavaScriptやPHPなどのプログラム問題が中心になります。
普段コーディングをプログラマーに任せている方にとっては少し難しく感じるかもしれませんが、
ここを押さえておくと、現場での理解力がグッと上がりますよ！
(16)次のSVGコードで例のようなグレーの円形を描きたい。このとき、[A]と[B]に記述すべきプロパティの組み合わせはどれか。以下より1つ選択しなさい。
<circle [A]=”50″ [B]=”50″ r=”40″ fill=”gray” />
1.A : cx / B : cy
2.A : x / B : y
3.A : ch / B : cv
4.A : center-x / B : center-y
正解：1
タグで円を描くとき、円の「中心位置」は
- cx（横の位置）
- cy（縦の位置）
で指定します。
たとえば cx=”50″ cy=”50″ r=”40″ は「座標(50,50)を中心に半径40の円」を意味します。
※xやyは四角形（<rect>）で使う属性なので混同しないように。
たとえば、次のように書くと、座標(50,50)を中心にしたグレーの円が表示されます。
<!-- レスポンシブで表示させたい場合の推奨コード -->
<svg viewBox="0 0 100 100" width="200" height="200" xmlns="http://www.w3.org/2000/svg" aria-label="グレーの円">
<circle cx="50" cy="50" r="40" fill="gray" />
</svg>
コメント