全59問から、出題範囲の骨格が掴める21問だけを抜き出しました。まずはここだけ流して、必要なら全問へ進んでください。
全59問に進むこの21問の内容
出典: オリジナル想定問題（当サイト作成、実際の過去問ではありません）。公表されている出題範囲に基づく（最終更新 2026-09-29）
あるレスポンシブ対応のWebサイトをスマートフォンで閲覧したところ、PC表示と同じ幅でレイアウトが表示され、横スクロールが発生してしまった。この現象の原因として最も考えられるものはどれか。
- ✓viewportメタタグが設定されていない
- B画像のalt属性が設定されていない
- C見出しタグにh1が使われていない
- D背景色がCSSで指定されていない
解説
viewportメタタグが設定されていないと、モバイル端末はPC向けの幅（既定で約980px）を基準にページを縮小表示しようとするため、横スクロールが発生する。これはマルチデバイス対応における基本的な不具合原因である。
根拠エキスパート認定基準：マルチデバイス対応（レスポンシブWebデザインの実装知識）
実際のWeb制作現場で一般的に行われるワークフローにおいて、ワイヤーフレームを作成した直後に行う工程として最も適切なものはどれか。
- A要件定義
- Bサイトマップ（情報設計）の作成
- ✓デザインカンプの作成
- DHTML・CSSによるコーディング
解説
一般的な制作工程は「要件定義→情報設計（サイトマップ）→ワイヤーフレーム→デザインカンプ→コーディング」の順で進む。ワイヤーフレームで画面構成を固めた後、見た目のデザインを詰めたデザインカンプを作成するのが通例である。
根拠エキスパート認定基準：新規サイトを構築することができる（デザインカンプによる出題を前提とした制作工程の理解）
あるWebページに、内容の伝達には関与しない純粋な装飾目的の画像を挿入する。スクリーンリーダー利用者への配慮を考慮した場合、最も適切なマークアップはどれか。
- Aalt属性自体を省略する
- ✓alt属性に空の値（alt=""）を指定する
- Calt属性に画像のファイル名をそのまま記述する
- Dalt属性の代わりにtitle属性のみを指定する
解説
装飾目的で情報を持たない画像には、alt=""（空文字）を指定することで、スクリーンリーダーがその画像を読み上げずにスキップできるようにするのが適切なアクセシビリティ対応である。alt属性の省略は仕様上未定義画像として扱われる可能性があり不適切である。
根拠エキスパート認定基準：ユーザビリティやアクセシビリティを考慮したWebデザイン
モバイルファーストの考え方に基づいてレスポンシブWebデザインのCSSを記述する場合、最も適切な手順はどれか。
- AまずPC向けの広い画面用のスタイルを記述し、max-widthのメディアクエリで画面が狭くなるほどスタイルを上書きしていく
- ✓まずスマートフォンなど狭い画面向けのスタイルを基本として記述し、min-widthのメディアクエリで画面が広くなるほどスタイルを上書きしていく
- C画面幅にかかわらず単一のスタイルのみを記述し、メディアクエリは使用しない
- DPC用とスマートフォン用でそれぞれ完全に別のHTMLファイルを用意し、CSSは共通化しない
解説
モバイルファーストでは、まず制約の多い狭い画面向けの基本スタイルを記述し、その上でmin-widthを用いたメディアクエリによって画面が広くなるにつれて段階的にスタイルを追加・上書きしていく手順が一般的である。
根拠エキスパート認定基準：マルチデバイス対応（レスポンシブWebデザインの実装手順）
CSSにおける「メディアクエリ」の説明として最も適切なものはどれか。
- ✓画面の幅や向きなどの条件に応じて、適用するCSSのスタイルを切り替えるための仕組み
- B外部のCSSファイルを複数まとめて1つのファイルに結合する仕組み
- CJavaScriptからCSSの値を動的に取得するための命令
- D画像ファイルの解像度をブラウザが自動的に最適化する仕組み
解説
メディアクエリは、画面幅や画面の向きといった条件（@media）に応じて適用するCSSを切り替える仕組みであり、レスポンシブWebデザインを実現する基本技術である。
根拠エキスパート認定基準：マルチデバイス対応（レスポンシブWebデザインの基礎技術）
あるページで、親要素であるdivにposition: relativeを指定し、その直下の子要素であるspan要素にposition: absolute; top: 0; left: 0;を指定した。このspan要素の配置位置の基準となる要素はどれか。
- ✓position: relativeが指定された親のdiv要素
- Bブラウザのビューポート
- Chtml要素
- Dposition指定のない直近の祖先要素
解説
position: absoluteが指定された要素は、static以外のposition値が指定された直近の祖先要素を基準に配置される。この例では親のdivにrelativeが指定されているため、そのdivが配置基準となる。
根拠認定基準（エキスパート）「レイアウト手法や色彩設計等、ユーザビリティやアクセシビリティを考慮したWebデザインを表現することができる」
Web制作の実務において、完成したデザインカンプをもとにコーディングを進める際、画像素材を準備する作業手順として最も適切なものはどれか。
- AHTMLへ画像を配置した後にデザインカンプから画像を書き出す
- Bファイル容量を圧縮した後にデザインカンプから画像を書き出す
- ✓デザインカンプから画像を書き出し、表示サイズにリサイズした上でファイル容量を圧縮してHTMLへ配置する
- Dリサイズを行う前にHTMLへ配置し、後から書き出す
解説
実務では、デザインカンプから画像を書き出したうえで表示サイズへリサイズし、ファイル容量を最適化してからHTMLに配置するのが一般的な手順である。
根拠試験概要「デザインカンプを用いた出題により、実際の制作現場同様のワークフローに基づいて出題問題の解答を進めていただきます」
あるWebページで、img要素にwidth属性とheight属性を指定せずに画像を配置したところ、画像の読み込み完了後にページ全体のレイアウトが大きくずれる現象が発生した。この問題を改善する対応として最も適切なものはどれか。
- Aimg要素にloading="lazy"属性を追加する
- Bimg要素にalt属性を追加する
- C画像をbackground-imageとしてdiv要素に指定する
- ✓img要素にwidth属性とheight属性（またはCSSのaspect-ratio）を指定し、画像の表示領域をあらかじめ確保する
解説
画像の縦横サイズを事前にブラウザへ伝えることで、読み込み前から表示領域が確保されレイアウトのずれ（レイアウトシフト）を防げる。alt属性はアクセシビリティ用でレイアウトには影響せず、loading="lazy"はむしろ表示タイミングをずらすため根本解決にならない。
根拠出題範囲：実技問題「画像の表示」
あるHTML文書のhead内で<script src="main.js"></script>のように通常の方法でJavaScriptファイルを読み込み、main.js内でdocument.getElementById("btn")によりDOM要素を取得する処理を記述したところ、要素の取得に失敗しnullが返るエラーが発生した。この原因として最も考えられるものはどれか。
- ✓script要素がhead内にあり、HTML本体の読み込みより先にJavaScriptが実行されるため対象の要素がまだ存在しない
- BJavaScriptファイルの拡張子が間違っているため
- CgetElementByIdはid属性を持つ要素にしか使用できないため
- DHTML5ではgetElementByIdが廃止されたため
解説
head内に通常の方法で記述されたscript要素はHTMLパース中に同期的に実行されるため、まだbody内の対象要素がDOMに構築されていない。defer属性の付与やbody末尾への配置、DOMContentLoadedイベントの利用で解決できる。
根拠出題範囲：実技問題「JavaScriptの読込」
幅800pxのdiv要素の内側にwidth: 25%を指定した子要素を配置し、さらにその子要素の内側にwidth: 50%を指定した孫要素を配置した（親のpadding・borderは0とする）。この孫要素の実際の幅は何pxになるか。
- A200px
- ✓100px
- C400px
- D50px
解説
パーセンテージ指定の幅は直近の親要素の幅を基準に計算される。子要素の幅は800px×25%=200px、孫要素の幅はその子要素の幅を基準に200px×50%=100pxとなる。
根拠出題範囲：実技問題「CSSの読込と作成」
script要素にdefer属性を指定してJavaScriptファイルを読み込んだ場合の動作として正しいものはどれか。
- AHTMLのパースを即座に停止し、ファイルのダウンロードと実行が完了してからパースを再開する
- Bファイルのダウンロードが完了した時点で即座に実行され、HTMLのパースを中断する
- Cページの表示がすべて完了した後、ユーザーの操作をきっかけに実行される
- ✓HTMLのパースをブロックせずファイルをダウンロードし、HTMLのパース完了後、DOMContentLoadedイベントの発火前に実行される
解説
defer属性を指定したscriptはHTMLパースをブロックせずバックグラウンドでダウンロードされ、パースが完了した後、DOMContentLoadedイベントが発火する前に実行される。これによりDOM要素の取得エラーを避けられる。
根拠出題範囲：実技問題「JavaScriptの読込」
CSSのposition: fixedとposition: stickyの違いに関する説明として最も適切なものはどれか。
- ✓fixedは常にビューポートに対して固定された位置に表示されるが、stickyは指定した閾値に達するまでは通常のフロー内に配置され、その後は固定表示に切り替わる
- Bfixedはスクロールに追従して常に移動するが、stickyはスクロールしても一切位置が変わらない
- Cfixedとstickyはどちらも親要素に対して常に固定表示される点で共通している
- DstickyはIEを含むすべてのブラウザで標準的にサポートされているが、fixedは一部のブラウザでしか動作しない
解説
fixedはスクロール量に関わらず常にビューポート基準の固定位置に表示される。stickyは通常のフロー内に配置されつつ、指定した閾値（top等）にスクロールが達した時点で固定表示に切り替わる点が異なる。
根拠出題範囲：実技問題「CSSの読込と作成」「レスポンシブWebデザイン対応」
HTML文書内でJavaScriptファイルを外部読込する際に指定するasync属性とdefer属性の違いに関する説明として正しいものはどれか。
- ✓async属性はダウンロード完了後すぐにスクリプトを実行するため記述順の実行が保証されないが、defer属性はHTML解析完了後に記述順で実行される
- Basync属性はHTML解析完了後に記述順で実行され、defer属性はダウンロード完了後すぐに実行される
- Casync属性とdefer属性のどちらも実行タイミングに違いはなく、記述する順序だけが異なる
- Dasync属性を指定すると、スクリプトのダウンロードが完了するまでHTML解析が停止する
解説
async属性はダウンロードが終わり次第すぐに実行されるため複数スクリプトの実行順序が保証されないが、defer属性はHTML解析がすべて終わってから記述順に実行される点が異なる。
根拠実技問題：JavaScriptの読込
縦横比が異なる複数の商品画像を、img要素を使って同一サイズの正方形の枠内にトリミングし隙間なく表示したい。この場合にCSSで指定すべきプロパティとして最も適切なものはどれか。
- Abackground-size: contain;
- Bobject-fit: fill;
- ✓object-fit: cover;
- Dwidth: auto; height: auto;
解説
object-fit: coverは要素の縦横比を保ったまま枠全体を覆うようにトリミング表示するため、枠に隙間ができず画像も歪まない。fillは画像が歪み、containは余白ができるため不適切である。
根拠実技問題：画像の表示
あるコーポレートサイトのヘッダー内に、サイト内の主要ページへのリンク一覧であるグローバルナビゲーションメニューをマークアップする。HTML5のセマンティックな要素として最も適切なものはどれか。
- ✓<nav>
- B<menu>
- C<div class="navigation">
- D<section>
解説
nav要素はページ内やサイト内の主要なナビゲーションリンクをまとめる際に使用するセマンティック要素である。div要素はセマンティックな意味を持たず、section要素は独立したひとまとまりの内容を表すため主要ナビゲーションには適さない。
根拠シラバス「HTML5の変換、HTMLの作成」セマンティックなマークアップ
新規に作成したHTML文書に、別ファイルとして用意した外部CSSファイル「style.css」を読み込ませる場合の正しい記述方法はどれか。
- Abody要素の末尾に<style src="style.css"></style>を記述する
- Bhead要素内に<script rel="stylesheet" href="style.css"></script>を記述する
- ✓head要素内に<link rel="stylesheet" href="style.css">を記述する
- Dhtml要素の属性としてcss="style.css"を指定する
解説
外部CSSファイルを読み込む際は、head要素内にlink要素を配置し、rel属性に"stylesheet"、href属性に読み込むCSSファイルのパスを指定するのが正しい記述方法である。
根拠シラバス「CSSの読込と作成」
CSSのセレクタ詳細度を、id選択子1個につき100点、class選択子1個につき10点、要素選択子1個につき1点として計算する場合、セレクタ「div#content p.text」の詳細度の合計点数はどれか。
- ✓112
- B111
- C121
- D102
解説
このセレクタには要素選択子が2個（div, p）、id選択子が1個（#content）、class選択子が1個（.text）含まれるため、100×1＋10×1＋1×2＝112点となる。
根拠シラバス「CSSの読込と作成」CSSセレクタの詳細度
HTML文書内でimg要素のsrc属性に画像ファイルのパスを指定する際、「相対パス」と「絶対パス（サイトルートからのパス）」の違いに関する説明として最も適切なものはどれか。
- A絶対パスを使用した場合、HTMLファイルを別のフォルダに移動しても画像のリンク切れは発生しない
- B相対パスと絶対パスは表示結果に違いがなく、どちらを使っても同じ挙動になる
- ✓相対パスは現在のHTMLファイルの場所を基準にファイルの位置を指定する方法であり、絶対パスはサイトのルートディレクトリを基準に指定する方法である
- D相対パスは常にhttps://から始まる記述であり、絶対パスは常にファイル名のみで記述する
解説
相対パスは参照元のHTMLファイルの位置からの相対的な経路で指定する方法であり、絶対パス（サイトルートからのパス）はドメインルートなど基準となる位置から指定する方法である。基準点が異なるため、ファイル移動時の挙動なども異なる。
根拠シラバス「HTMLの作成」「画像の表示」ファイルパスの指定
表形式のデータをHTMLでマークアップする際の要素の親子関係として正しいものはどれか。
- Atable要素の直下にtd要素を配置し、そのtd要素の子要素としてtr要素を配置する
- ✓table要素の直下にtr要素を配置し、そのtr要素の子要素としてtd要素やth要素を配置する
- Ctr要素の直下にtable要素を配置し、その子要素としてth要素を配置する
- Dtable要素の直下にth要素を配置し、そのth要素の子要素としてtr要素とtd要素を配置する
解説
HTMLの表組みは、table要素の中にtr（行）要素を配置し、さらにそのtr要素の中にth（見出しセル）やtd（データセル）要素を配置するという親子構造でマークアップする。
根拠シラバス「HTMLの作成」表組みのマークアップ
あるWebページで、文章の内容上重要な意味を持たせる必要はないが、他の語句と視覚的に区別するために太字にしたい箇所と、文章の内容上重要であることを示したい箇所がある。HTML5におけるstrong要素とb要素の使い分けに関する説明として正しいものはどれか。
- Astrong要素とb要素はどちらも同じ意味を持ち、使い分ける必要はない
- ✓strong要素は文章内容において重要性を表す強調に用い、b要素は特に重要性を持たない視覚的な差別化（太字表示）に用いる
- Cstrong要素はCSSでスタイルを変更できないが、b要素はCSSでスタイルを変更できる
- Db要素は常に強い重要性を表すため、キーワードの強調にはb要素のみを使用するべきである
解説
HTML5の仕様ではstrong要素は文章内容における重要性の強調を表し、b要素は特に重要性を持たないが他と区別したい部分（キーワードなど）に用いるとされている。どちらもCSSでスタイルを変更できる点は同じである。
根拠HTMLの作成（セマンティックなマークアップ）
HTML4.01 Strictで作成された既存のWebページに「<center><p>お知らせ</p></center>」という記述があった。このページをHTML5へ変換する際の対応として最も適切なものはどれか。
- Acenter要素をspan要素に名称だけ置き換える
- Bcenter要素をそのままHTML5でも使用し続ける
- Cp要素をdiv要素に置き換え、center要素はそのまま残す
- ✓p要素にCSSでtext-align: centerを指定し、center要素を削除する
解説
center要素はHTML5では廃止されており使用できない。見た目の中央揃えはHTML構造から分離し、CSSのtext-alignプロパティで指定するのが正しい変換方法である。
根拠HTML5の変換（非推奨要素の置き換え）