HTML5プロフェッショナル認定試験 レベル1 全分野の一問一答

HTML5プロフェッショナル認定試験 レベル1の全分野に関する一問一答（全488問）の正解と解説の一覧です。上の一問一答で実際に解いてから、ここで復習・確認できます。

1. 問1．Canvas APIはピクセル単位のビットマップ画像を動的に描画するためのAPIである。

   正解：○（正しい）

   解説：Canvasは2Dコンテキストでビットマップ（ラスター）描画を行うAPIである。

2. 問2．SVGは拡大・縮小しても画質が劣化しないベクター形式のグラフィックスを扱う。

   正解：○（正しい）

   解説：SVGは図形を座標や数式としてXMLで記述するベクター形式なので、どれだけ拡大しても輪郭が計算し直されて滑らかなまま保たれる。ピクセルの集合として保持するビットマップ（ラスター）形式は拡大すると粗さが目立つ点と対照的で、ロゴやアイコン、図表に向く。

3. 問3．Canvasで描画した図形は、描画後もそれぞれが個別のDOM要素として保持される。

   正解：×（誤り）

   解説：誤り。正しくは、Canvasはピクセルへ直接描画するため個々の図形はDOM要素として保持されない。要素単位で扱えるのはSVG。

4. 問4．SVGはピクセルへ直接描画する方式のため、描画した図形はDOM要素として保持されず個別に操作できない。

   正解：×（誤り）

   解説：誤り。正しくは、SVGはXMLベースでDOMツリーに含まれ、要素単位でCSSやJavaScriptから個別操作できる。ピクセルへ直接描画しDOM要素を保持しないのはCanvas。

5. 問5．多数の図形を頻繁に再描画するゲームなどではCanvasが、図形数が少なく拡大縮小を伴う図表ではSVGが適している。

   正解：○（正しい）

   解説：Canvasは1枚のビットマップに直接描くだけで個々の図形を保持しないため、大量の要素を毎フレーム描き直すゲームなどで負荷が小さい。SVGは図形をDOM要素として保持するので数が増えるほど重くなる反面、拡大しても劣化せず個別にスタイルやイベントを付けられる。

6. 問6．Canvasはベクター形式のため、拡大しても画像が荒くならない。

   正解：×（誤り）

   解説：誤り。正しくは、Canvasはビットマップ（ラスター）形式のため拡大すると荒くなる。ベクター形式はSVG。

7. 問7．video要素やaudio要素はプラグインなしでメディアを再生できる。

   正解：○（正しい）

   解説：HTML5でvideo要素・audio要素が標準化され、Flashのようなプラグインなしでブラウザ自身がメディアを再生できるようになった。controls属性で標準の再生UIを出せるほか、JavaScriptから再生位置や音量を制御することもできる。対応コーデックはブラウザによって異なるため、source要素で複数形式を用意することがある。

8. 問8．HLSやMPEG-DASHは、ネットワーク状況に応じて画質を切り替えるアダプティブストリーミングの技術である。

   正解：○（正しい）

   解説：HLS/MPEG-DASHは回線状況に応じ画質を切り替えるアダプティブビットレート配信技術。

9. 問9．Media Source Extensions(MSE)は、DRMで保護された暗号化メディアの復号と再生制御を担うAPIである。

   正解：×（誤り）

   解説：誤り。正しくは、MSEはJavaScriptで生成したメディアセグメントをvideo要素へ供給する仕組みである。DRM保護メディアの復号・再生制御を担うのはEncrypted Media Extensions(EME)。

10. 問10．Encrypted Media Extensions(EME)は、DRMで保護された暗号化メディアの再生を可能にするAPIである。

    正解：○（正しい）

    解説：EMEは、DRMで保護された暗号化コンテンツを再生するために、ブラウザとコンテンツ復号モジュール（CDM）およびライセンスサーバーとのやり取りを標準化したAPI。ブラウザ自身が復号鍵を扱うのではなく、鍵の取得と受け渡しの手順を定める点が要点で、動画配信サービスで使われている。

11. 問11．MPEG-DASHは特定のコーデックにのみ対応する規格であり、コーデックに依存しない設計ではない。

    正解：×（誤り）

    解説：誤り。正しくは、MPEG-DASHはコーデックに依存しない（コーデック非依存の）国際標準のアダプティブストリーミング規格である。

12. 問12．Geolocation APIはユーザーの現在の地理的位置（緯度・経度）を取得するためのAPIである。

    正解：○（正しい）

    解説：Geolocation APIはGPSのほかWi-Fiアクセスポイントや基地局、IPアドレスなどを組み合わせて現在位置（緯度・経度と精度）を取得する。プライバシーに関わるため利用者の許可が必須で、原則としてHTTPSなどのセキュアコンテキストでしか使えない。

13. 問13．Geolocation APIは、ユーザーの許可を得なくても無条件に位置情報を取得できる。

    正解：×（誤り）

    解説：誤り。正しくは、Geolocation APIは位置情報取得にユーザーの許可（同意）が必要である。

14. 問14．DeviceOrientation Eventは、端末の現在の地理的位置（緯度・経度）を取得するためのイベントである。

    正解：×（誤り）

    解説：誤り。正しくは、DeviceOrientation Eventは端末の物理的な傾き・向きを取得する。緯度・経度など地理的位置を取得するのはGeolocation API。

15. 問15．Touch Eventsはタッチスクリーン上の指の接触に関するイベントを扱う。

    正解：○（正しい）

    解説：Touch Eventsはtouchstart・touchmove・touchendなど、タッチスクリーン上の指の接触に特化したイベントを扱う。複数の指の座標をリストで受け取れるためピンチなどのマルチタッチ操作を実装できる。マウスやペンも含めて統一的に扱いたい場合はPointer Eventsを使う。

16. 問16．Pointer Eventsは、マウス・タッチ・ペンなど複数の入力デバイスを統一的に扱えるイベントモデルである。

    正解：○（正しい）

    解説：Pointer Eventsは、マウス・タッチ・ペンといった入力手段の違いをポインタという抽象に統一し、pointerdown・pointermoveなど共通のイベントで扱えるようにしたモデル。pointerTypeプロパティで元の入力手段を判別でき、デバイスごとに別々の処理を書き分ける必要がなくなる。

17. 問17．Generic Sensor APIは、マウス・タッチ・ペンなど複数の入力デバイスを統一的に扱うためのイベントモデルである。

    正解：×（誤り）

    解説：誤り。正しくは、Generic Sensor APIは加速度センサーやジャイロスコープなど各種センサーへ共通アクセスする枠組みである。複数の入力デバイスを統一的に扱うのはPointer Events。

18. 問18．DOM3 Events（UI Events）は、キーボードやマウスなどのUI操作に関するイベントモデルを規定する。

    正解：○（正しい）

    解説：DOM3 Events（現在のUI Events仕様）は、click・keydown・focusといったUI操作に伴うイベントの種類と、キャプチャからターゲット、バブリングへと進むイベント伝播の仕組みを規定する。addEventListenerの第3引数でどの段階で捕捉するかを選べるのもこのモデルに基づく。

19. 問19．localStorageに保存したデータは、ブラウザを閉じると自動的に消去される。

    正解：×（誤り）

    解説：誤り。正しくは、localStorageは明示的に削除しない限りブラウザを閉じても永続的に保持される。閉じると消えるのはsessionStorage。

20. 問20．sessionStorageに保存したデータは、そのタブ（セッション）が閉じられると破棄される。

    正解：○（正しい）

    解説：sessionStorageはタブ（ブラウジングコンテキスト）ごとに独立した領域を持ち、そのタブを閉じるとデータが破棄される。同じサイトを別タブで開いても内容は共有されない。ブラウザを閉じても残り続けるlocalStorageと使い分ける。

21. 問21．Web Storageは同一オリジンの範囲でデータが共有・参照される。

    正解：○（正しい）

    解説：Web Storageのデータはスキーム・ホスト・ポートの組（オリジン）単位で管理され、異なるオリジンからは読み書きできない。これが不正なサイトからのデータ窃取を防ぐ基本的な仕組みで、cookieと違いリクエストごとにサーバーへ自動送信されない点も特徴。

22. 問22．Web Storage（localStorage/sessionStorage）は、インデックスによる検索やトランザクションに対応した構造化データベースである。

    正解：×（誤り）

    解説：誤り。正しくは、Web Storageはキーと値のペアで文字列を保存する単純なストレージである。インデックス検索やトランザクションに対応した構造化DBはIndexedDB。

23. 問23．Web Storageはサーバーへのリクエストごとに自動送信される点でCookieと同じである。

    正解：×（誤り）

    解説：誤り。正しくは、Web Storageはリクエストに自動送信されない。リクエストへ自動付与されるのはCookie。

24. 問24．Indexed Database API(IndexedDB)は構造化データを大容量に保存できるクライアント側データベースである。

    正解：○（正しい）

    解説：IndexedDBはキーと値の組でオブジェクトを保存できるブラウザ内蔵のデータベースで、数MBが上限のWeb Storageと違い大容量のデータを扱える。値には文字列だけでなくオブジェクトやファイル（Blob）もそのまま格納でき、非同期APIとして提供される。

25. 問25．IndexedDBはキー・バリューだけでなくインデックスによる検索が可能なトランザクション型のデータベースである。

    正解：○（正しい）

    解説：IndexedDBは任意のプロパティにインデックスを張って検索や範囲指定ができ、複数の操作をトランザクションとしてまとめ、途中で失敗すれば一括して取り消せる。単純なキー・バリューしか持たないWeb Storageより本格的なデータ管理に向く。

26. 問26．Web Workersは、メインスレッドとは別のスレッドでJavaScriptをバックグラウンド実行できる。

    正解：○（正しい）

    解説：JavaScriptは基本的に1つのスレッドで動くため、重い処理を書くと画面が固まる。Web Workersは別スレッドでスクリプトを走らせ、メインスレッドとはpostMessageによるメッセージのやり取りで連携する。ただしDOMには直接アクセスできない。

27. 問27．Web WorkersはDOMへ直接アクセスして画面要素を操作できる。

    正解：×（誤り）

    解説：誤り。正しくは、Web WorkersはDOMへ直接アクセスできない。UI操作はメインスレッドへメッセージで委譲する。

28. 問28．Service Workerはネットワークリクエストを横取り（プロキシ）し、キャッシュを使ったオフライン動作を実現できる。

    正解：○（正しい）

    解説：Service Workerはリクエストを仲介しキャッシュでオフライン対応を可能にする。

29. 問29．Service Workerは常にメインスレッド上でWebページと同一のライフサイクルで動作し、ページが閉じられると必ず終了する。

    正解：×（誤り）

    解説：誤り。正しくは、Service Workerはページとは独立したライフサイクルを持ち、ページが閉じられてもバックグラウンドで動作し続けることがある。

30. 問30．Push APIは、構造化データを大容量にクライアント側へ保存するためのデータベースを提供する仕組みである。

    正解：×（誤り）

    解説：誤り。正しくは、Push APIはService Workerを介してサーバーからのプッシュ通知を受け取る仕組みである。大容量の構造化データ保存を担うのはIndexedDB。

31. 問31．Service WorkerはHTTP（非暗号化）でも、どのページでも自由に登録できる。

    正解：×（誤り）

    解説：誤り。正しくは、Service Workerは原則HTTPS（またはlocalhost）が必要で、セキュアコンテキストでのみ登録できる。

32. 問32．XMLHttpRequest(XHR)は、ブラウザ同士がP2Pで音声・映像をリアルタイムにやり取りするためのAPIである。

    正解：×（誤り）

    解説：誤り。正しくは、XHRはページ遷移なしの非同期通信（Ajax）を実現する仕組みである。ブラウザ間P2Pのリアルタイム通信を担うのはWebRTC。

33. 問33．Fetch APIはPromiseベースで設計された、HTTPリクエストを行うための新しいAPIである。

    正解：○（正しい）

    解説：Fetch APIはPromiseを返すため、then/catchやasync/awaitで非同期処理を素直に書ける。コールバックを入れ子にしがちだったXMLHttpRequestの後継にあたり、リクエストとレスポンスをオブジェクトとして扱えるので、ヘッダ操作やストリーム処理も扱いやすい。

34. 問34．WebSocketは、一度確立した接続上でサーバーとクライアントが双方向に通信できる。

    正解：○（正しい）

    解説：WebSocketは最初にHTTPでハンドシェイクした後、専用のプロトコルへ切り替えて1本の接続を維持し、サーバーとクライアントが好きなタイミングで送信できる全二重通信を実現する。都度リクエストを送るHTTPポーリングより遅延もオーバーヘッドも小さく、チャットや対戦ゲームに向く。

35. 問35．WebSocketの通信はリクエストごとに毎回新しいコネクションを張り直す方式である。

    正解：×（誤り）

    解説：誤り。正しくは、WebSocketは一度確立した接続を維持して双方向通信を行う（毎回張り直さない）。

36. 問36．Server-Sent Events(SSE)は、確立した接続上でサーバーとクライアントが双方向（全二重）に通信する仕組みである。

    正解：×（誤り）

    解説：誤り。正しくは、SSEはサーバーからクライアントへの単方向プッシュを行う仕組みである。双方向（全二重）通信を担うのはWebSocket。

37. 問37．Server-Sent Eventsはクライアントからサーバーへ任意のデータを送信するための双方向通信技術である。

    正解：×（誤り）

    解説：誤り。正しくは、SSEはサーバーからクライアントへの単方向通信であり、双方向はWebSocketが担う。

38. 問38．WebRTCは、ブラウザ同士がP2Pで音声・映像・データをリアルタイムにやり取りできるAPIである。

    正解：○（正しい）

    解説：WebRTCはブラウザ同士が直接（P2P）つながって音声・映像・任意のデータをやり取りする仕組み。相手を見つけて接続情報を交換するシグナリングは別途サーバーが必要だが、通信本体はサーバーを経由しないため遅延が小さい。ビデオ通話や画面共有に使われる。

39. 問39．WebRTCはサーバーを必ず経由してすべての音声・映像データを中継する設計である。

    正解：×（誤り）

    解説：誤り。正しくは、WebRTCは原則ブラウザ間のP2Pでメディアをやり取りする（接続確立にシグナリングは使うが、メディアは直接交換が基本）。

40. 問40．Fetch APIで取得したレスポンスのbodyをJSONとして読み取るには、Promiseを返すメソッドを用いる。

    正解：○（正しい）

    解説：Fetchのレスポンスはjson()などPromiseを返すメソッドでボディを読み取る。

41. 問41．WebSocketで使用するURLスキームはhttpまたはhttpsである。

    正解：×（誤り）

    解説：誤り。正しくは、WebSocketはws://（暗号化はwss://）スキームを用いる。http/httpsはHTTP通信用のスキーム。

42. 問42．Web Workersは画像処理や大量計算などの重い処理を、UIをブロックせずに実行するのに役立つ。

    正解：○（正しい）

    解説：画像処理や暗号計算のような重い処理をメインスレッドで実行すると、その間は描画も入力受付も止まって画面が固まる。Web Workersで別スレッドに逃がせばUIは応答し続けられる。結果はメッセージで受け取るため、処理の分割と受け渡しの設計が要点になる。

43. 問43．IndexedDBはWeb Storageに比べて保存できるデータ量が一般に小さい。

    正解：×（誤り）

    解説：誤り。正しくは、IndexedDBはWeb Storageより大容量のデータ保存に適している。

44. 問44．Geolocation APIでは、位置情報の変化を継続的に監視する機能も利用できる。

    正解：○（正しい）

    解説：1回だけ取得するgetCurrentPosition()のほか、位置が変わるたびにコールバックが呼ばれるwatchPosition()があり、移動に追従する地図やナビゲーションを実装できる。監視を止めるにはclearWatch()を呼ぶ必要があり、放置すると電池を消費し続ける。

45. 問45．Canvasに描画した内容は画像データとして書き出すことが一切できない。

    正解：×（誤り）

    解説：誤り。正しくは、Canvasは描画内容をtoDataURLなどで画像データ（データURL等）として書き出すことができる。

46. 問46．ベクター形式で図形を記述し、拡大縮小しても劣化しないグラフィックスAPIはどれか。

    • ア．Canvas API
    • イ．SVG
    • ウ．WebGL
    • エ．Media Source Extensions

    正解：イ．SVG

    解説：SVGは図形を座標や数式としてXMLで記述するベクター形式なので、拡大しても輪郭が再計算されて劣化しない。CanvasとWebGLはピクセルの集合として描くビットマップ方式、MSEはメディアの供給を扱うAPIで、いずれもベクター描画のためのものではない。

47. 問47．ピクセル単位のビットマップ描画を行うために用いられるAPIはどれか。

    • ア．Canvas API
    • イ．SVG
    • ウ．Geolocation API
    • エ．WebSocket

    正解：ア．Canvas API

    解説：Canvas APIは2次元のビットマップ領域にJavaScriptで直接ピクセルを描くAPI。描いた後は個々の図形の情報が残らないため、変更したいときは描き直す必要がある。SVGはベクター形式、Geolocationは位置情報、WebSocketは通信のAPIで用途が異なる。

48. 問48．ネットワーク状況に応じて画質を切り替えるアダプティブストリーミングの技術はどれか。

    • ア．Web Storage
    • イ．IndexedDB
    • ウ．Pointer Events
    • エ．MPEG-DASH

    正解：エ．MPEG-DASH

    解説：MPEG-DASHやHLSは、動画をあらかじめ複数の画質で細かいセグメントに分割しておき、再生中の回線速度に応じて次に取得するセグメントの画質を切り替えるアダプティブストリーミング方式。Web StorageやIndexedDBは保存、Pointer Eventsは入力のAPIで、配信技術ではない。

49. 問49．DRMで保護された暗号化メディアの再生を扱うAPIはどれか。

    • ア．Media Source Extensions
    • イ．WebRTC
    • ウ．Encrypted Media Extensions
    • エ．Fetch API

    正解：ウ．Encrypted Media Extensions

    解説：Encrypted Media Extensions（EME）は、暗号化されたメディアの再生に必要な鍵のやり取りを、ブラウザ・コンテンツ復号モジュール・ライセンスサーバーの間で標準化したAPI。MSEはメディアデータの供給、WebRTCはP2P通信、Fetchは汎用のHTTP通信を担う別のAPI。

50. 問50．JavaScriptで生成したメディアセグメントをvideo要素へ供給する仕組みを提供するAPIはどれか。

    • ア．Media Source Extensions
    • イ．Encrypted Media Extensions
    • ウ．Geolocation API
    • エ．Push API

    正解：ア．Media Source Extensions

    解説：Media Source Extensions（MSE）は、JavaScriptが用意したメディアのセグメントをvideo要素に供給できるようにするAPI。これによりアダプティブストリーミングのように、再生しながら画質の異なるセグメントへ切り替える制御をスクリプト側で実装できる。

51. 問51．端末の現在の地理的位置（緯度・経度）を取得するAPIはどれか。

    • ア．DeviceOrientation Event
    • イ．Generic Sensor API
    • ウ．Touch Events
    • エ．Geolocation API

    正解：エ．Geolocation API

    解説：Geolocation APIが緯度・経度と精度を取得する。DeviceOrientation Eventは端末の傾き、Generic Sensor APIは加速度計などのセンサー、Touch Eventsはタッチ操作を扱うもので、位置情報の取得は担当しない。利用には利用者の許可とセキュアコンテキストが必要。

52. 問52．端末の物理的な傾き・向きの情報を取得するAPIはどれか。

    • ア．Geolocation API
    • イ．Pointer Events
    • ウ．DeviceOrientation Event
    • エ．WebSocket

    正解：ウ．DeviceOrientation Event

    解説：DeviceOrientation Eventは、端末がどの向きにどれだけ傾いているかをalpha・beta・gammaという3つの角度で通知する。地磁気と加速度センサーの情報をもとにしており、簡易的なARや傾き操作のゲームなどに使われる。位置そのものはGeolocation APIが扱う。

53. 問53．マウス・タッチ・ペンなど複数の入力デバイスを統一的に扱えるイベントモデルはどれか。

    • ア．Pointer Events
    • イ．Touch Events
    • ウ．DOM3 Events
    • エ．DeviceOrientation Event

    正解：ア．Pointer Events

    解説：Pointer Eventsはマウス・タッチ・ペンをポインタとして統一的に扱い、pointerTypeで元の入力手段も判別できる。Touch Eventsはタッチ専用、DOM3 Events（UI Events）はイベントモデル全般の規定、DeviceOrientation Eventは端末の傾きを扱うもので、統一的な入力抽象ではない。

54. 問54．加速度センサーやジャイロスコープなど各種センサーへ共通の方法でアクセスする枠組みはどれか。

    • ア．Touch Events
    • イ．Geolocation API
    • ウ．Generic Sensor API
    • エ．Push API

    正解：ウ．Generic Sensor API

    解説：Generic Sensor APIは、加速度センサー・ジャイロスコープ・磁力計・環境光センサーなどに共通のインタフェースでアクセスできる枠組み。センサーごとに異なるAPIを覚える必要がなく、権限管理も統一的に扱える。Touch Eventsは入力、Geolocationは位置、Push APIは通知のAPI。

55. 問55．ブラウザを閉じても明示的に削除するまでデータが永続的に保持されるストレージはどれか。

    • ア．sessionStorage
    • イ．Cookie(セッション)
    • ウ．メモリキャッシュ
    • エ．localStorage

    正解：エ．localStorage

    解説：localStorageはブラウザを閉じても、明示的に削除するまでデータが残り続ける永続的なストレージ。sessionStorageはタブを閉じると破棄され、セッションCookieもブラウザ終了時に消え、メモリキャッシュは一時的なものなので、いずれも永続保存には該当しない。

56. 問56．タブ（セッション）が閉じられるとデータが破棄されるストレージはどれか。

    • ア．localStorage
    • イ．IndexedDB
    • ウ．sessionStorage
    • エ．Cache Storage

    正解：ウ．sessionStorage

    解説：sessionStorageはタブ（ブラウジングコンテキスト）ごとに独立し、そのタブを閉じるとデータが破棄される。localStorageは明示的に削除するまで残り、IndexedDBとCache Storageも永続的な保存領域なので、いずれもセッション終了で消えるわけではない。

57. 問57．構造化データを大容量にクライアント側へ保存できるデータベースAPIはどれか。

    • ア．Web Storage
    • イ．Web Workers
    • ウ．Server-Sent Events
    • エ．Indexed Database API

    正解：エ．Indexed Database API

    解説：Indexed Database API（IndexedDB）は、構造化データを大容量に保存でき、インデックス検索やトランザクションにも対応するクライアント側のデータベース。Web Storageは単純なキー・バリューで容量も小さく、Web Workersは並行処理、Server-Sent Eventsはサーバーからの一方向通信のAPI。

58. 問58．メインスレッドとは別のスレッドでJavaScriptをバックグラウンド実行する仕組みはどれか。

    • ア．Service Workers
    • イ．Push API
    • ウ．Fetch API
    • エ．Web Workers

    正解：エ．Web Workers

    解説：Web Workersがメインスレッドとは別のスレッドでスクリプトを実行し、重い処理でUIが固まるのを防ぐ。Service Workersはネットワークを仲介する常駐型で用途が異なり、Push APIは通知の受信、Fetch APIはHTTP通信を担う。

59. 問59．ネットワークリクエストを横取りしキャッシュを使ったオフライン動作を実現するのはどれか。

    • ア．Web Workers
    • イ．XMLHttpRequest
    • ウ．Service Workers
    • エ．WebSocket

    正解：ウ．Service Workers

    解説：Service Workerはページとネットワークの間に常駐し、fetchイベントでリクエストを横取りしてキャッシュから応答を返せる。これによりオフラインでも動作するWebアプリ（PWA）が実現する。Web Workersは計算処理の並行実行が目的で、ネットワークの仲介は行わない。

60. 問60．サーバーからのプッシュ通知をService Worker経由で受信する仕組みを提供するAPIはどれか。

    • ア．Push API
    • イ．Notifications API
    • ウ．Fetch API
    • エ．Web Storage

    正解：ア．Push API

    解説：Push APIはサーバーから送られた通知をService Worker経由で受け取る仕組みで、ページが開かれていなくても受信できる点が特徴。受け取った内容を実際に画面へ表示するのはNotifications APIの役割で、両者は組み合わせて使われる。

61. 問61．ページ全体を再読み込みせずにサーバーと非同期通信を行う、古くからあるAPIはどれか。

    • ア．Fetch API
    • イ．WebSocket
    • ウ．XMLHttpRequest
    • エ．Server-Sent Events

    正解：ウ．XMLHttpRequest

    解説：XMLHttpRequestはAjaxの基盤として古くから使われてきた非同期通信のAPI。コールバックとイベントで結果を受け取る設計のため処理が入れ子になりやすく、現在はPromiseベースのFetch APIが後継として推奨されている。WebSocketとServer-Sent Eventsは常時接続型で用途が異なる。

62. 問62．Promiseベースで設計された、HTTPリクエストを行う新しいAPIはどれか。

    • ア．XMLHttpRequest
    • イ．WebSocket
    • ウ．WebRTC
    • エ．Fetch API

    正解：エ．Fetch API

    解説：Fetch APIはPromiseを返すため、async/awaitと組み合わせて同期的な見た目で非同期処理を書ける。リクエストとレスポンスをオブジェクトとして扱えるのでヘッダ操作も明快。XMLHttpRequestはコールバック方式の旧API、WebSocketとWebRTCは通信の性質そのものが異なる。

63. 問63．確立した接続上でサーバーとクライアントが双方向（全二重）に通信できるAPIはどれか。

    • ア．Server-Sent Events
    • イ．Fetch API
    • ウ．WebSocket
    • エ．XMLHttpRequest

    正解：ウ．WebSocket

    解説：WebSocketは1本の接続を維持したまま、サーバーとクライアントの双方が任意のタイミングで送信できる全二重通信を実現する。Server-Sent Eventsはサーバーからクライアントへの一方向、Fetch APIとXMLHttpRequestはリクエストに対する応答という往復型で、双方向の常時通信には向かない。

64. 問64．サーバーからクライアントへの単方向データ送信を継続的に行う仕組みはどれか。

    • ア．Server-Sent Events
    • イ．WebSocket
    • ウ．WebRTC
    • エ．Fetch API

    正解：ア．Server-Sent Events

    解説：Server-Sent Eventsはサーバー→クライアント単方向のプッシュを行う。

65. 問65．ブラウザ同士がP2Pで音声・映像・データをリアルタイムにやり取りできるAPIはどれか。

    • ア．WebSocket
    • イ．Server-Sent Events
    • ウ．Push API
    • エ．WebRTC

    正解：エ．WebRTC

    解説：WebRTCはブラウザ同士が直接つながって音声・映像・データをやり取りするAPI。サーバーを介さないため遅延が小さい。WebSocketとServer-Sent Eventsはサーバーとの通信、Push APIは通知受信の仕組みで、いずれもブラウザ間のP2P通信ではない。

66. 問66．次のうち、双方向のリアルタイム通信に適したAPIはどれか。

    • ア．Server-Sent Events
    • イ．WebSocket
    • ウ．Geolocation API
    • エ．Web Storage

    正解：イ．WebSocket

    解説：WebSocketは接続を維持したまま双方が自由に送信できる全二重通信に対応する。Server-Sent Eventsはサーバーからクライアントへの一方向専用、Geolocationは位置取得、Web Storageは保存のAPIで、双方向のリアルタイム通信には使えない。

67. 問67．オフライン時にもアプリを動作させるためのキャッシュ・プロキシの中心となる技術はどれか。

    • ア．Service Workers
    • イ．Web Workers
    • ウ．Web Storage
    • エ．Fetch API

    正解：ア．Service Workers

    解説：Service Workerはページとネットワークの間に常駐し、リクエストを横取りしてキャッシュから応答を返すプロキシとして働くため、オフライン動作の中心技術になる。Web Workersは計算の並行実行、Web Storageは保存、Fetch APIは通信の手段で、いずれも仲介役は担わない。

68. 問68．DOM要素として図形を保持し、CSSやスクリプトで個別操作しやすいのはどれか。

    • ア．Canvas
    • イ．SVG
    • ウ．WebGL
    • エ．MSE

    正解：イ．SVG

    解説：SVGの図形はそれぞれがDOM要素として存在するので、CSSでスタイルを当てたり、個別にクリックイベントを付けたりできる。Canvasは描いた時点でただのピクセルになり図形の情報が残らないため、個別操作にはあたりの判定を自前で実装する必要がある。

69. 問69．高頻度に大量の図形を再描画するゲーム描画に適しているのはどれか。

    • ア．SVG
    • イ．Canvas
    • ウ．DOM3 Events
    • エ．Push API

    正解：イ．Canvas

    解説：Canvasは1枚のビットマップに描くだけで個々の図形を保持しないため、大量の要素を毎フレーム描き直すゲームでも負荷が小さい。SVGは図形の数だけDOM要素が増えるので高頻度の再描画には不利。DOM3 EventsとPush APIは描画のAPIではない。

70. 問70．キーボードやマウスなどのUI操作イベントモデルを規定する仕様はどれか。

    • ア．Touch Events
    • イ．DOM3 Events
    • ウ．Generic Sensor API
    • エ．Pointer Events

    正解：イ．DOM3 Events

    解説：DOM3 Events（現在のUI Events仕様）が、click・keydownなどのイベントの種類と、キャプチャ→ターゲット→バブリングというイベント伝播の仕組みを規定する。Touch Eventsはタッチ、Pointer Eventsは統合入力、Generic Sensor APIはセンサーに特化した別仕様。

71. 問71．タッチスクリーン上の指の接触に特化したイベントを扱うのはどれか。

    • ア．Pointer Events
    • イ．Touch Events
    • ウ．DeviceOrientation Event
    • エ．DOM3 Events

    正解：イ．Touch Events

    解説：Touch Eventsはtouchstart・touchmove・touchendなど、タッチスクリーン上の指の接触に特化したイベントを扱い、複数の指の座標をまとめて取得できる。Pointer Eventsはマウスやペンも含めて統一的に扱う点で対象が広く、DOM3 EventsはUIイベント全般の枠組みにあたる。

72. 問72．Web Storageに関する説明として正しいものはどれか。

    • ア．リクエストごとにサーバーへ自動送信される
    • イ．同一オリジン単位でキーと値を保存する
    • ウ．構造化データのインデックス検索ができる
    • エ．別スレッドでスクリプトを実行する

    正解：イ．同一オリジン単位でキーと値を保存する

    解説：Web Storage（localStorage・sessionStorage）は、スキーム・ホスト・ポートの組であるオリジン単位で文字列のキーと値を保存する。cookieと違いリクエストごとに自動送信されず、インデックス検索ができるのはIndexedDB、別スレッド実行はWeb Workersの役割である。

73. 問73．Service Workerの登録に関する説明として正しいものはどれか。

    • ア．どのHTTPページでも自由に登録できる
    • イ．原則HTTPS等のセキュアコンテキストが必要
    • ウ．DOMを直接操作するために使う
    • エ．Cookieの代替として自動送信される

    正解：イ．原則HTTPS等のセキュアコンテキストが必要

    解説：Service Workerは通信を横取りして応答を差し替えられるため、悪用されると通信内容を改ざんされうる。そこで登録は原則としてHTTPSなどのセキュアコンテキストに限られる（開発用のlocalhostは例外）。またDOMには直接アクセスできず、cookieのように自動送信されるものでもない。

74. 問74．Fetch APIの説明として誤っているものはどれか。

    • ア．Promiseベースで設計されている
    • イ．レスポンスのbodyを非同期に読み取る
    • ウ．JSON形式のレスポンスしか扱えない
    • エ．HTTPリクエストを発行できる

    正解：ウ．JSON形式のレスポンスしか扱えない

    解説：Fetch APIはJSONに限らず、text()・blob()・arrayBuffer()・formData()などでテキスト・画像・バイナリなど多様な形式のレスポンスを読み取れる。Promiseベースで設計され、bodyを非同期に読み取り、HTTPリクエストを発行できるという他の3つの記述はいずれも正しい。

75. 問75．Web Workersの説明として誤っているものはどれか。

    • ア．バックグラウンドスレッドで実行される
    • イ．DOMへ直接アクセスできる
    • ウ．重い計算でUIをブロックしにくい
    • エ．メインスレッドとメッセージでやり取りする

    正解：イ．DOMへ直接アクセスできる

    解説：Web Workersは別スレッドで動くためDOMには直接アクセスできず、画面を更新したい場合はpostMessageでメインスレッドに依頼する必要がある。バックグラウンドスレッドで実行される、重い計算でもUIをブロックしにくい、メッセージでやり取りするという他の3つは正しい説明。

76. 問76．タイプセレクタ(要素セレクタ)は、指定した名前のHTML要素すべてにスタイルを適用する。

    正解：○（正しい）

    解説：pやdivなど要素名を指定し、その種類の全要素を対象とするのがタイプセレクタである。

77. 問77．CSSのコメントは、//で始め行末までが対象となる。

    正解：×（誤り）

    解説：誤り。CSSのコメントは /* ... */ で囲む形式のみで、複数行にまたがって書ける。//で始める行コメントはJavaScriptなどの記法であり、CSSでは解釈されずスタイルが壊れる原因になる。

78. 問78．クラスセレクタは、セレクタ名の前にシャープ記号(#)を付けて記述する。

    正解：×（誤り）

    解説：誤り。正しくは、クラスセレクタはピリオド(.)を前に付ける。#はIDセレクタである。

79. 問79．!importantを付けた宣言は、通常の詳細度の計算を上書きして優先的に適用される。

    正解：○（正しい）

    解説：!importantを付けた宣言は、詳細度やソース順よりも先に評価され、通常の宣言をすべて上回る。ただし多用すると、後から上書きするにはさらに!importantが必要になり保守が困難になるため、使用は最小限にとどめるのが原則。

80. 問80．:visited疑似クラスは、まだ訪問していないリンクを選択する。

    正解：×（誤り）

    解説：誤り。正しくは、:visitedは訪問済みのリンクを選択する。未訪問は:linkである。

81. 問81．background(背景)プロパティは、子要素に継承される。

    正解：×（誤り）

    解説：誤り。backgroundは継承しないプロパティ。子要素の背景が親と同じに見えるのは、初期値のtransparentによって親の背景が透けているだけで、値が受け継がれているわけではない。継承するのは文字色やフォントなどテキスト関連のプロパティが中心。

82. 問82．@import規則は、内部スタイルシート(<style>)の中では使用できない。

    正解：×（誤り）

    解説：誤り。@importはstyle要素内でも使用できるが、他の規則より前（@charsetの直後）に書く必要がある。ただし読み込みが直列になり表示が遅れるため、実務ではlink要素で並列に読み込むほうが推奨される。

83. 問83．外部スタイルシートをHTMLに適用するには、head要素内で<link rel="stylesheet" href="style.css">のように記述する。

    正解：○（正しい）

    解説：link要素のrel属性にstylesheetを指定し、hrefでCSSファイルを参照する正しい記述である。

84. 問84．同じid属性値を1つのHTML文書内で複数の要素に付けてもよい。

    正解：×（誤り）

    解説：誤り。id属性の値は文書内で一意でなければならない。重複するとページ内リンクやgetElementByIdが最初の1つしか参照できず、意図しない動作になる。複数の要素をまとめて指定したい場合はclass属性を使う。

85. 問85．:last-child疑似クラスは、兄弟要素の中で最後の子要素を選択する。

    正解：○（正しい）

    解説：:last-childは、同じ親を持つ兄弟の中で最後に位置する子要素にマッチする。要素の種類を問わず「最後の子」であることが条件なので、最後の子が別の要素だと期待どおりに当たらない。種類を限定したい場合は:last-of-typeを使う。

86. 問86．隣接兄弟結合子(+)は、指定要素の直後にある同じ親を持つ兄弟要素を選択する。

    正解：○（正しい）

    解説：隣接兄弟結合子（+）は、同じ親を持ち、直前に指定要素が来る「直後の1つ」の兄弟だけを選ぶ。たとえば h2 + p は見出しのすぐ後ろの段落だけに当たり、2つ目以降の段落には当たらない。後続すべてを選ぶには間接兄弟結合子（~）を使う。

87. 問87．border(境界線)プロパティは、子要素に継承されるプロパティである。

    正解：×（誤り）

    解説：誤り。borderは継承しないプロパティ。もし継承すると入れ子になった要素すべてに枠線が描かれて意図しない見た目になるため、ボックスの見た目に関わるプロパティ（border・margin・padding・backgroundなど）は継承しない設計になっている。

88. 問88．@import規則は、スタイルシート内で他のすべてのCSS規則よりも後ろに記述しなければならない。

    正解：×（誤り）

    解説：誤り。正しくは、@importは@charsetを除く他のすべての規則よりも前(先頭)に記述する必要がある。

89. 問89．::first-line疑似要素は、ブロック要素の最初の行にスタイルを適用する。

    正解：○（正しい）

    解説：::first-lineはブロックレベル要素の最初の1行にスタイルを適用する疑似要素。何文字目までが1行かはウィンドウ幅やフォントサイズで変わるため、対象範囲は表示状況に応じて動的に決まる。適用できるプロパティはフォントや色など一部に限られる。

90. 問90．HTML文書内に直接CSSを記述する内部スタイルシートは、<style>要素を使い通常はhead要素内に置く。

    正解：○（正しい）

    解説：style要素にCSSを直接書く方法で、そのページだけに適用したい場合に使う。読み込み順の関係でhead要素内に置くのが一般的。複数ページで共有するなら外部ファイルにしてlink要素で読み込むほうが、キャッシュが効き保守もしやすい。

91. 問91．link要素はbody要素内にのみ記述できる。

    正解：×（誤り）

    解説：誤り。正しくは、スタイルシート読み込みのlink要素は通常head要素内に記述する。

92. 問92．::before疑似要素は、要素の内容の前にコンテンツを生成して挿入する。

    正解：○（正しい）

    解説：::beforeはcontentプロパティと組み合わせ要素内容の前に生成内容を挿入する。

93. 問93．:link疑似クラスは、まだ訪問していないリンクを選択する。

    正解：○（正しい）

    解説：:linkはまだ訪問していないリンクにマッチする疑似クラス。訪問済みは:visitedで、両者は排他的な関係にある。なお履歴の漏洩を防ぐため、:visitedに指定できるプロパティは色など一部に制限されている。

94. 問94．font-sizeプロパティは、子要素に継承されないプロパティである。

    正解：×（誤り）

    解説：誤り。font-sizeは継承するプロパティ。フォント・文字色・行の高さ・文字揃えといったテキスト関連は、いちいち指定し直さずに済むよう継承する設計になっている。継承しないのはbox関連（margin・padding・border・background）が中心。

95. 問95．a:hover, a:focusのように疑似クラスを含むセレクタはグループ化(カンマ区切り)できない。

    正解：×（誤り）

    解説：誤り。疑似クラスを含むセレクタもカンマで区切ってグループ化できる。ただしグループ内に1つでも不正なセレクタがあると、その規則全体が無視される点には注意が必要。

96. 問96．インラインスタイル(style属性)は、IDセレクタによる指定よりも詳細度が低い。

    正解：×（誤り）

    解説：誤り。詳細度はインラインスタイル＞IDセレクタ＞クラス・属性・疑似クラス＞要素・疑似要素の順で高く、style属性が最も強い。これを上回れるのは!important付きの宣言だけである。

97. 問97．複数のセレクタにまとめて同じスタイルを適用するには、セレクタをカンマ(,)で区切る。

    正解：○（正しい）

    解説："h1, h2, h3"のようにカンマで区切るとグループ化され同じ宣言が適用される。

98. 問98．:first-child疑似クラスは、兄弟要素の中で最後の子要素を選択する。

    正解：×（誤り）

    解説：誤り。正しくは、:first-childは最初の子要素を選択する。最後はlast-childである。

99. 問99．ユニバーサルセレクタ(*)は、ルート要素にのみマッチする。

    正解：×（誤り）

    解説：誤り。ユニバーサルセレクタ（*）はすべての要素にマッチする。ルート要素だけを選ぶのは:root疑似クラス（HTMLではhtml要素）である。*はリセットCSSなどで全要素にまとめて指定する用途で使われる。

100. 問100．子結合子(>)は、指定要素の直接の子要素のみを選択する。

     正解：○（正しい）

     解説：子結合子（>）は直接の子要素だけを選び、孫以降には当たらない。たとえば ul > li は入れ子になった内側のリストのliには適用されない。すべての子孫を対象にしたい場合は半角スペースで区切る子孫結合子を使う。

101. 問101．:nth-child(2n+1)は偶数番目の子要素を選択する。

     正解：×（誤り）

     解説：誤り。正しくは、2n+1はn=0,1,2…で1,3,5…となり奇数番目を選択する。

102. 問102．インラインスタイル(style属性)では、セレクタを記述する必要がない。

     正解：○（正しい）

     解説：style属性はその要素自身にだけ適用されるため、どの要素を対象にするかを示すセレクタは不要で、プロパティと値の宣言だけを書く。ただしHTMLと見た目が混ざって保守しにくく、詳細度も最強になるため、原則は外部スタイルシートを使う。

103. 問103．子孫結合子は、セレクタ間を半角スペースで区切って表す。

     正解：○（正しい）

     解説：子孫結合子は半角スペースで区切って書き、階層の深さを問わずその要素の中にあるすべての子孫にマッチする。div p なら、div直下のpも、div内のsection内のpも対象になる。直接の子だけに限定したい場合は子結合子（>）を使う。

104. 問104．:checked疑似クラスは、チェックされたチェックボックスやラジオボタンを選択する。

     正解：○（正しい）

     解説：:checkedはチェックされたチェックボックス・選択されたラジオボタン・選択状態のoption要素にマッチする。これを隣接兄弟結合子などと組み合わせると、JavaScriptを使わずにCSSだけで開閉表示などの動きを作れる。

105. 問105．詳細度が同じ宣言が複数ある場合、後に記述された宣言が優先される(ソース順)。

     正解：○（正しい）

     解説：カスケードは、まず!importantの有無、次にセレクタの詳細度、それでも決まらなければ記述順で優先度を決める。したがって詳細度が同じなら後に書かれた宣言が勝つ。上書き用のCSSを後に読み込ませるのはこの性質を利用したもの。

106. 問106．間接兄弟結合子(~)は、指定要素の直後の1つの兄弟要素だけを選択する。

     正解：×（誤り）

     解説：誤り。間接（一般）兄弟結合子（~）は、同じ親を持ち後に続く兄弟要素をすべて選択する。直後の1つだけに限定するのは隣接兄弟結合子（+）のほうである。

107. 問107．:nth-child(2n)は、偶数番目の子要素を選択する。

     正解：○（正しい）

     解説：2nはn=0,1,2…で2,4,6…となり偶数番目の子要素にマッチする。

108. 問108．[href$=".pdf"]は、href属性の値が.pdfで終わる要素を選択する。

     正解：○（正しい）

     解説：属性セレクタの $= は、属性値が指定した文字列で終わる要素にマッチする。[href$=".pdf"] ならPDFへのリンクだけを選べるので、アイコンを付けるといった用途に使える。^= は前方一致、*= は部分一致。

109. 問109．[class*="btn"]は、class属性の値にbtnという文字列を含む要素を選択する。

     正解：○（正しい）

     解説：属性セレクタの *= は、属性値のどこかに指定文字列を含む要素にマッチする。[class*="btn"] は btn-primary でも large-btn でも当たる。単語単位で一致させたい場合は ~= を使う。

110. 問110．[href^="https"]は、href属性の値がhttpsで終わる要素を選択する。

     正解：×（誤り）

     解説：誤り。正しくは、^=は値が指定文字列で始まる要素を選択する。終わるのは$=である。

111. 問111．ユニバーサルセレクタはアスタリスク(*)で表し、すべての要素を対象とする。

     正解：○（正しい）

     解説：ユニバーサルセレクタ（*）はすべての要素にマッチする。ブラウザ既定の余白をそろえるリセットCSSなどで使われるが、対象が多く詳細度は0なので、他の指定に簡単に上書きされる点も理解しておく。

112. 問112．font-familyプロパティは、子要素に継承される。

     正解：○（正しい）

     解説：font-familyは継承するプロパティ。body要素にまとめて指定しておけば文書全体に行き渡るため、要素ごとに書き直す必要がない。文字色・font-size・line-height・text-alignなどテキスト関連も同様に継承する。

113. 問113．特定の要素にのみスタイルを適用するインラインスタイルは、要素のstyle属性に記述する。

     正解：○（正しい）

     解説：style属性に直接 color:red; のように宣言を書く方法で、その要素だけに適用される。セレクタが不要な反面、詳細度が最も高くなり後から上書きしにくいうえ、構造と見た目が混在して保守性が落ちるため、原則は外部スタイルシートを使う。

114. 問114．text-alignプロパティは継承しないため、親で指定しても子の文字配置には影響しない。

     正解：×（誤り）

     解説：誤り。text-alignは継承するプロパティで、親に指定すれば子孫のテキストにも及ぶ。テキスト関連（font系・color・line-height・text-alignなど）は継承し、ボックス関連（margin・padding・border・background）は継承しない、と整理して覚える。

115. 問115．margin(外側の余白)プロパティは、子要素に継承される。

     正解：×（誤り）

     解説：誤り。marginは継承しないプロパティ。もし継承すると入れ子の要素すべてに余白が加算されてレイアウトが破綻するため、ボックスの寸法に関わるプロパティは継承しない設計になっている。

116. 問116．CSSの詳細度において、IDセレクタはクラスセレクタよりも優先度が高い。

     正解：○（正しい）

     解説：詳細度はインラインスタイル＞ID＞クラス・属性・疑似クラス＞要素・疑似要素の順。IDは文書内で一意な要素を指すぶん意図が明確なので、クラスより強い重みが与えられている。数の多寡ではなく上位のカテゴリが1つでも多いほうが勝つ点に注意。

117. 問117．同一の宣言ブロック内で同じプロパティを2回指定した場合、先に書いた値が優先される。

     正解：×（誤り）

     解説：誤り。同じ宣言ブロック内で同じプロパティを複数回書いた場合は、後に書いた値が勝つ。これは詳細度が等しいときソース順で決まるというカスケードの原則どおりで、古いブラウザ向けの記述を先に、新しい記述を後に書くフォールバックの手法もこの性質を利用している。

118. 問118．IDセレクタは、セレクタ名の前にシャープ記号(#)を付けて記述する。

     正解：○（正しい）

     解説：IDセレクタは #intro のようにシャープ記号を前に付ける。ピリオド（.）はクラスセレクタ、記号なしは要素セレクタで、記号によって対象が変わる。id属性の値は文書内で一意でなければならない点もあわせて押さえる。

119. 問119．:not(.active)は、activeクラスを持つ要素のみを選択する。

     正解：×（誤り）

     解説：誤り。正しくは、:not()は括弧内の条件に合致しない要素を選択する否定疑似クラスである。

120. 問120．::first-letter疑似要素は、ブロック要素の最初の単語にスタイルを適用する。

     正解：×（誤り）

     解説：誤り。::first-letterが対象とするのは最初の1文字で、単語単位ではない。雑誌のようなドロップキャップ（先頭文字を大きく飾る表現）に使われる。最初の1行を対象とするのは::first-lineである。

121. 問121．次のうち、クラスセレクタの正しい記述はどれか。

     • ア．.menu
     • イ．#menu
     • ウ．menu
     • エ．*menu

     正解：ア．.menu

     解説：クラスセレクタはピリオドを前に付けて .menu と書く。#menu はIDセレクタ、menu は要素セレクタ（menu要素）を意味し、*menu という記法はCSSに存在しない。クラスは同じ文書内で何度でも使える点がIDとの違い。

122. 問122．次のうち、属性値が指定文字列で「始まる」要素を選択する属性セレクタはどれか。

     • ア．[href^="a"]
     • イ．[href*="a"]
     • ウ．[href$="a"]
     • エ．[href~="a"]

     正解：ア．[href^="a"]

     解説：^= は属性値が指定文字列で始まる（前方一致）要素を選択する。[href^="https"]で外部リンクだけを選ぶ、といった使い方ができる。*= は部分一致、$= は後方一致、~= はスペース区切りの単語単位の一致を表す。

123. 問123．次のうち、要素の最初の1文字にスタイルを適用する疑似要素はどれか。

     • ア．::first-letter
     • イ．::before
     • ウ．::after
     • エ．::first-line

     正解：ア．::first-letter

     解説：::first-letterは要素内の最初の1文字にスタイルを適用する疑似要素で、先頭文字を大きく飾るドロップキャップなどに使う。::first-lineは最初の1行、::beforeと::afterは要素内容の前後に生成内容を挿入するもので、対象が異なる。

124. 問124．次のうち、子結合子を表す記号はどれか。

     • ア．>
     • イ．+
     • ウ．~
     • エ．

     正解：ア．>

     解説：子結合子は > で、直接の子要素だけを選択する。+ は直後の1つの兄弟、~ は後続の兄弟すべて、半角スペースは階層を問わない子孫を表し、記号ごとに選択範囲が異なる。

125. 問125．詳細度が最も高いのはどれか。

     • ア．インラインスタイル(style属性)
     • イ．クラスセレクタ
     • ウ．IDセレクタ
     • エ．要素セレクタ

     正解：ア．インラインスタイル(style属性)

     解説：詳細度はインラインスタイル（style属性）＞IDセレクタ＞クラス・属性・疑似クラス＞要素セレクタの順で高い。style属性は対象が1要素に限定され意図が最も明確なため最強とされ、これを上回れるのは!important付きの宣言だけである。

126. 問126．次のセレクタのうち、隣接兄弟結合子を使っているものはどれか。

     • ア．h2 + p
     • イ．h2 p
     • ウ．h2 > p
     • エ．h2 ~ p

     正解：ア．h2 + p

     解説：h2 + p の + が隣接兄弟結合子で、h2の直後にある1つのp要素だけを選ぶ。h2 p は子孫、h2 > p は直接の子、h2 ~ p は後続の兄弟すべてを表し、それぞれ選択範囲が異なる。

127. 問127．外部スタイルシートを読み込むための正しいlink要素はどれか。

     • ア．<link rel="stylesheet" href="a.css">
     • イ．<link rel="style" src="a.css">
     • ウ．<style src="a.css">
     • エ．<css href="a.css">

     正解：ア．<link rel="stylesheet" href="a.css">

     解説：外部スタイルシートは <link rel="stylesheet" href="a.css"> と書く。関係を示すrelにstylesheetを指定し、参照先はhref属性で示す。srcは画像やスクリプトを埋め込む要素の属性で、link要素では使わない。style要素は外部ファイルを読み込めない。

128. 問128．次のうち、継承しないプロパティはどれか。

     • ア．margin
     • イ．color
     • ウ．font-size
     • エ．line-height

     正解：ア．margin

     解説：marginはボックス関連で継承しない。color/font-size/line-heightは継承する。

129. 問129．div.box p { } のセレクタの詳細度を構成する内訳として正しいのはどれか。

     • ア．ID1・要素2
     • イ．クラス1・要素2
     • ウ．クラス2・要素1
     • エ．ID1・クラス1

     正解：イ．クラス1・要素2

     解説：詳細度はID・クラス相当（クラス／属性／疑似クラス）・要素相当（要素／疑似要素）の3階層で数える。div.box p は .box がクラス1個、div と p が要素2個なのでクラス1・要素2となる。IDは含まれない。

130. 問130．次のうち、奇数番目の子要素を選択する記述として正しいものはどれか。

     • ア．:nth-child(even)
     • イ．:nth-child(odd)
     • ウ．:nth-child(2n)
     • エ．:last-child

     正解：イ．:nth-child(odd)

     解説：:nth-child(odd) が奇数番目、:nth-child(even) が偶数番目を選ぶ。an+b の形でも書け、oddは2n+1、evenは2nと同じ。表の行を交互に色分けするストライプ表示などで使われる。:last-childは最後の子で位置の偶奇とは無関係。

131. 問131．#main .item(ID1・クラス1)と .item.active(クラス2)が同じ要素にcolorを指定している。どちらが優先されるか。

     • ア．.item.active
     • イ．#main .item
     • ウ．ソース順で常に後者
     • エ．両方無効

     正解：イ．#main .item

     解説：#main .item はID1+クラス1、.item.active はクラス2。IDを含む前者が優先される。

132. 問132．次のうち、否定を表す疑似クラスはどれか。

     • ア．:checked
     • イ．:not()
     • ウ．:hover
     • エ．:nth-child()

     正解：イ．:not()

     解説：:not() は括弧内のセレクタに当てはまらない要素を選ぶ否定疑似クラス。li:not(:last-child) のように書けば「最後以外」に区切り線を付けるといった指定ができる。:checkedは選択状態、:hoverはポインタが乗った状態、:nth-child()は位置による選択。

133. 問133．ユニバーサルセレクタを表す記号はどれか。

     • ア．#
     • イ．*
     • ウ．.
     • エ．~

     正解：イ．*

     解説：* がすべての要素にマッチするユニバーサルセレクタ。# はID、. はクラス、~ は間接兄弟結合子を表す記号で、それぞれ役割が異なる。

134. 問134．a:link, a:visited, a:hover, a:active を記述する推奨順序(LVHA)として正しいものはどれか。

     • ア．hover→active→link→visited
     • イ．link→visited→hover→active
     • ウ．active→hover→visited→link
     • エ．visited→link→active→hover

     正解：イ．link→visited→hover→active

     解説：link→visited→hover→active（LVHA）の順に書く。詳細度が同じなので後に書いたほうが勝つため、順序を誤ると訪問済みリンクにhoverが効かないといった不具合が起きる。「LoVe HAte」と語呂で覚えるのが定番。

135. 問135．次のうち、内部スタイルシートを記述する要素はどれか。

     • ア．<link>
     • イ．<style>
     • ウ．<script>
     • エ．<css>

     正解：イ．<style>

     解説：内部スタイルシートはstyle要素にCSSを直接書く。link要素は外部ファイルの読み込み、script要素はJavaScriptの記述に使うもので、cssという要素は存在しない。style要素は通常head内に置く。

136. 問136．p#intro { } のセレクタの詳細度を構成する内訳として正しいものはどれか。

     • ア．クラス1・要素1
     • イ．ID1・要素1
     • ウ．ID2
     • エ．要素2

     正解：イ．ID1・要素1

     解説：p#intro は #intro がID1個、p が要素1個なので、詳細度はID1・要素1となる。クラスは含まれていない。詳細度はID・クラス相当・要素相当の3階層で数え、上位の階層が多いほうが優先される。

137. 問137．次のうち、属性値に指定文字列を「部分的に含む」要素を選択する属性セレクタはどれか。

     • ア．[class^="x"]
     • イ．[class$="x"]
     • ウ．[class*="x"]
     • エ．[class="x"]

     正解：ウ．[class*="x"]

     解説：*= は属性値のどこかに指定文字列を含む要素にマッチする部分一致。^= は前方一致、$= は後方一致、= は完全一致で、それぞれ照合の仕方が異なる。

138. 問138．次のうち、間接(一般)兄弟結合子を表す記号はどれか。

     • ア．+
     • イ．>
     • ウ．~
     • エ．

     正解：ウ．~

     解説：~（チルダ）が間接（一般）兄弟結合子で、同じ親を持つ後続の兄弟要素すべてにマッチする。+ は直後の1つだけ、> は直接の子、半角スペースは階層を問わない子孫を表す。

139. 問139．以下の指定で最終的にp要素のcolorはどうなるか。p { color: blue !important; } p { color: red; }

     • ア．red
     • イ．継承値
     • ウ．blue
     • エ．無効

     正解：ウ．blue

     解説：カスケードでは!importantの有無が詳細度やソース順より先に評価されるため、後から書かれたredではなく!important付きのblueが適用される。順序で上書きしたい場合は、後の宣言にも!importantを付ける必要がある。

140. 問140．次のうち、要素内容の前に生成内容を挿入する疑似要素はどれか。

     • ア．::after
     • イ．::first-line
     • ウ．::before
     • エ．::first-letter

     正解：ウ．::before

     解説：::beforeが要素内容の直前に生成内容を挿入する疑似要素で、content プロパティとセットで使う。::afterは直後に挿入、::first-lineは最初の1行、::first-letterは最初の1文字を対象とするもので、役割が異なる。

141. 問141．li:nth-child(3) が選択するのはどの要素か。

     • ア．2番目のli
     • イ．最初のli
     • ウ．3番目のli
     • エ．最後のli

     正解：ウ．3番目のli

     解説：:nth-child(3) は親要素から見て3番目の子要素を選ぶ。要素の種類を問わず順番だけで数えるため、間に別の種類の要素が挟まると期待とずれることがある。種類ごとに数えたい場合は:nth-of-type()を使う。

142. 問142．複数のセレクタにまとめてスタイルを適用する(グループ化する)際の区切り文字はどれか。

     • ア．セミコロン(;)
     • イ．スペース
     • ウ．カンマ(,)
     • エ．ピリオド(.)

     正解：ウ．カンマ(,)

     解説：複数のセレクタをカンマで区切ると、同じ宣言をまとめて適用できる。セミコロンは宣言どうしの区切り、半角スペースは子孫結合子、ピリオドはクラスセレクタを表す記号で、いずれもグループ化には使えない。

143. 問143．次の継承プロパティに関する記述のうち正しいものはどれか。

     • ア．borderは継承する
     • イ．marginは継承する
     • ウ．colorは継承する
     • エ．paddingは継承する

     正解：ウ．colorは継承する

     解説：colorなどテキスト関連は継承し、margin/border/paddingは継承しない。

144. 問144．input[type="text"] が選択するのはどの要素か。

     • ア．すべてのinput
     • イ．input以外の要素
     • ウ．type属性がcheckboxのinput
     • エ．type属性がtextのinput

     正解：エ．type属性がtextのinput

     解説：input[type="text"] は属性セレクタで、type属性の値がtextであるinput要素だけを選ぶ。input要素は type の値によってテキスト欄・チェックボックス・ボタンなど見た目も役割も変わるため、この書き方で対象を限定するのが定石。

145. 問145．#nav { color: red; } と nav { color: blue !important; } が同じnav要素に適用される場合、色はどうなるか。

     • ア．red
     • イ．無効
     • ウ．ソース順で後者
     • エ．blue

     正解：エ．blue

     解説：!importantは詳細度の比較より先に評価されるため、要素セレクタの指定であってもIDセレクタの通常の宣言を上回る。したがってblueが適用される。これが!importantの多用を避けるべき理由でもある。

146. 問146．次のうち、訪問済みのリンクを選択する疑似クラスはどれか。

     • ア．:link
     • イ．:active
     • ウ．:hover
     • エ．:visited

     正解：エ．:visited

     解説：:visitedが訪問済みのリンクを選択する。:linkは未訪問、:hoverはポインタが乗っている状態、:activeは押されている瞬間を表す。なお履歴の漏洩を防ぐため、:visitedに指定できるプロパティは色などに制限されている。

147. 問147．ul li a のセレクタが選択するのはどの要素か。

     • ア．すべてのa要素
     • イ．ul要素
     • ウ．li要素のみ
     • エ．ul内のliの子孫であるa要素

     正解：エ．ul内のliの子孫であるa要素

     解説：ul li a は半角スペース区切りの子孫結合子が2つ連なった形で、ul の中の li の中にある a 要素を選ぶ。階層の深さは問わないため、liの直下でなくても中にあれば対象になる。直接の子だけに限定したい場合は > を使う。

148. 問148．詳細度が同じ2つの規則がある場合の優先決定方法として正しいものはどれか。

     • ア．ランダムに決まる
     • イ．先に書いた規則が優先
     • ウ．両方無効になる
     • エ．後に書いた規則が優先

     正解：エ．後に書いた規則が優先

     解説：カスケードは!important→詳細度→ソース順の順に判定するため、詳細度が同じなら後に書かれた規則が勝つ。共通CSSの後に個別CSSを読み込ませて上書きするのは、この性質を利用した実務上の定石である。

149. 問149．button:hover の指定が適用されるのはどんな時か。

     • ア．クリックされた時
     • イ．フォーカスを得た時
     • ウ．読み込み完了時
     • エ．ポインタが上に乗っている時

     正解：エ．ポインタが上に乗っている時

     解説：:hoverはマウスポインタなどのポインティングデバイスが要素の上に乗っている間だけ適用される。クリックされている瞬間は:active、キーボード等でフォーカスを得た状態は:focusで、それぞれ別の疑似クラスになる。

150. 問150．section > p { } が選択するのはどの要素か。

     • ア．section内の全階層のp
     • イ．sectionの親のp
     • ウ．sectionの兄弟のp
     • エ．sectionの直接の子であるp

     正解：エ．sectionの直接の子であるp

     解説：子結合子（>）は直接の子だけを選ぶため、section > p は sectionの直下にあるp要素だけに当たり、section内のdivの中にあるpには当たらない。階層を問わず選びたい場合は半角スペースの子孫結合子を使う。

151. 問151．box-sizingプロパティの初期値はcontent-boxであり、この場合widthプロパティで指定した値はコンテンツ領域の幅のみを表す。

     正解：○（正しい）

     解説：box-sizingの初期値はcontent-boxで、widthはコンテンツ領域の幅を指す。paddingやborderは加算される。

152. 問152．marginプロパティにはパーセント値を指定できない。

     正解：×（誤り）

     解説：誤り。正しくは、marginにはパーセント値を指定でき、その基準は包含ブロックの幅となる。

153. 問153．display:noneを指定した要素は、レイアウト上の領域を占有せず、画面に表示されない。

     正解：○（正しい）

     解説：display:noneは要素を完全に非表示にし、ボックスも生成されず領域を占有しない。

154. 問154．display:inlineを指定した要素には、widthとheightプロパティの指定が効果を持つ。

     正解：×（誤り）

     解説：誤り。正しくは、display:inlineの要素にはwidth・heightは適用されない。inline-blockやblockなら適用される。

155. 問155．display:inline-blockを指定した要素には、widthやheightの指定が一切効かない。

     正解：×（誤り）

     解説：誤り。正しくは、inline-blockは横並び配置を保ちつつwidth・heightの指定が有効になる。

156. 問156．position:absoluteを指定した要素は、最も近い位置指定された祖先要素を基準に配置される。

     正解：○（正しい）

     解説：absoluteはposition:static以外の最も近い祖先を基準に配置される。なければ初期包含ブロック基準。

157. 問157．position:relativeを指定すると、要素は通常のレイアウト位置から、その分の領域も詰めて移動する。

     正解：×（誤り）

     解説：誤り。正しくは、relativeは元の領域を保持したままtop/left等でオフセットされる。元の位置のスペースは残る。

158. 問158．positionプロパティの初期値はstaticである。

     正解：○（正しい）

     解説：positionの初期値はstaticで、通常のフローに従い配置される。top等は無効。

159. 問159．floatプロパティで要素を左右に回り込ませた後、その回り込みを解除するにはclearプロパティを使う。

     正解：○（正しい）

     解説：clearプロパティ（left/right/both）でfloatによる回り込みを解除できる。

160. 問160．overflow:scrollを指定すると、内容がはみ出すときだけスクロールバーが表示される。

     正解：×（誤り）

     解説：誤り。正しくは、scrollは常時スクロールバーを表示する。はみ出す時のみ表示するのはauto。

161. 問161．max-widthプロパティを指定すると、要素の幅がその値を超えないように制限される。

     正解：○（正しい）

     解説：max-widthは最大幅を制限する。widthがこれを超えると、max-widthの値が優先される。

162. 問162．borderプロパティはborder-width、border-style、border-colorをまとめて指定できるショートハンドである。

     正解：○（正しい）

     解説：border: 1px solid #333 のように、border-width・border-style・border-colorを一度に指定できるショートハンド。border-styleを省略すると初期値のnoneになり線が描かれないため、太さと色だけ書いても表示されない点に注意する。

163. 問163．border-styleの値にsolidを指定すると、点線の罫線が描画される。

     正解：×（誤り）

     解説：誤り。正しくは、solidは実線。点線はdotted、破線はdashedで描画される。

164. 問164．box-shadowプロパティのキーワードinsetを指定すると、影が要素の内側に描画される。

     正解：○（正しい）

     解説：box-shadowは既定では要素の外側に影を落とすが、値の先頭または末尾にinsetを付けると内側に影が描かれ、へこんだような表現になる。入力欄の押し込み表現などに使われる。

165. 問165．opacityプロパティの値1は完全に透明、0は完全に不透明を意味する。

     正解：×（誤り）

     解説：誤り。opacityは0が完全な透明、1が完全な不透明で、設問は逆になっている。0.5なら半透明。なお要素全体（子要素も含む）が透けるので、文字だけを半透明にしたい場合は色指定のrgba()やcolorのアルファ値を使う。

166. 問166．background-colorとbackground-imageを同時に指定した場合、背景色が背景画像より手前に表示される。

     正解：×（誤り）

     解説：誤り。背景は下から背景色、その上に背景画像の順で重なるため、背景画像のほうが手前に描画される。背景画像に透明部分があるとその隙間から背景色が見える、という関係になる。

167. 問167．background-repeatの値no-repeatを指定すると、背景画像は繰り返されず1回だけ表示される。

     正解：○（正しい）

     解説：background-repeatの初期値はrepeatで、背景画像は縦横にタイル状に繰り返される。no-repeatを指定すると繰り返しを行わず1枚だけ表示される。repeat-x・repeat-yで横方向だけ・縦方向だけの繰り返しも指定できる。

168. 問168．background-attachmentの初期値はfixedであり、背景画像はビューポートに固定される。

     正解：×（誤り）

     解説：誤り。正しくは、background-attachmentの初期値はscrollで、背景は要素と共にスクロールする。固定はfixed。

169. 問169．linear-gradient()は放射状（円形）のグラデーションを生成する関数である。

     正解：×（誤り）

     解説：誤り。正しくは、linear-gradientは線形（直線方向）のグラデーション。放射状はradial-gradient。

170. 問170．font-weightプロパティのboldは太字を、normalは標準の太さを表す。

     正解：○（正しい）

     解説：font-weight:boldは太字、normalは通常。数値400がnormal、700がboldに相当。

171. 問171．font-familyに複数のフォントを指定した場合、最後に書いたフォントが最優先で適用される。

     正解：×（誤り）

     解説：誤り。正しくは、font-familyは先頭から順に探し、最初に利用可能なものが適用される。

172. 問172．text-align:centerを指定すると、インラインコンテンツが水平方向の中央に揃えられる。

     正解：○（正しい）

     解説：text-align:centerはテキスト等のインライン内容を中央揃えにする。

173. 問173．text-decoration:line-throughを指定すると、テキストに下線が引かれる。

     正解：×（誤り）

     解説：誤り。正しくは、line-throughは打ち消し線。下線はunderlineで引く。

174. 問174．text-transform:uppercaseを指定すると、英字がすべて小文字に変換されて表示される。

     正解：×（誤り）

     解説：誤り。正しくは、uppercaseは大文字に変換する。小文字化はlowercase。

175. 問175．text-shadowプロパティを使うと、テキストに影を付けることができる。

     正解：○（正しい）

     解説：text-shadowは水平・垂直オフセット、ぼかし、色でテキストに影を付ける。

176. 問176．letter-spacingプロパティは、文字と文字の間隔（字間）を調整する。

     正解：○（正しい）

     解説：letter-spacingは字間を、word-spacingは単語間の間隔を調整する。

177. 問177．vertical-alignプロパティはブロックレベル要素全体を上下中央に配置するためのものである。

     正解：×（誤り）

     解説：誤り。正しくは、vertical-alignはインライン要素やテーブルセル内の縦方向の揃えを指定する。ブロック全体の中央寄せ用ではない。

178. 問178．directionプロパティの初期値はrtlであり、テキストは右から左へ記述される。

     正解：×（誤り）

     解説：誤り。正しくは、directionの初期値はltr（左から右）。右から左はrtl。

179. 問179．list-style-typeにcircleを指定すると、リストマーカーが黒丸（●）になる。

     正解：×（誤り）

     解説：誤り。circleは白丸（○）で、黒丸（●）はdisc。ul要素の初期値はdiscなので、circleを指定するとマーカーが塗りつぶしから白抜きに変わる。squareは四角形のマーカーになる。

180. 問180．list-style-type:noneを指定すると、リストのマーカーが表示されなくなる。

     正解：○（正しい）

     解説：list-style-type: none はマーカーを表示しない指定。ナビゲーションメニューのようにli要素を使いつつ記号を出したくない場合に用いる。マーカーが消えるだけで、li要素そのものや左のパディングは残る点に注意する。

181. 問181．list-style-positionの値outsideは、マーカーをリスト項目のテキストの内側に配置する。

     正解：×（誤り）

     解説：誤り。正しくは、outsideはマーカーをボックスの外側に配置する。内側はinside。

182. 問182．border-collapse:collapseを指定すると、テーブルの隣接するセルの罫線が1本に結合される。

     正解：○（正しい）

     解説：collapseは隣接セルのボーダーを重ねて1本にまとめる。separateは分離。

183. 問183．caption-sideプロパティはテーブルのキャプション（caption要素）の表示位置を指定する。

     正解：○（正しい）

     解説：caption-sideはキャプションをtop（上）かbottom（下）に配置する。

184. 問184．empty-cellsプロパティは、内容が空のセルの罫線や背景を表示するかどうかを制御する。

     正解：○（正しい）

     解説：empty-cells:show/hideで空セルの枠線・背景の表示有無を制御する（separate時）。

185. 問185．transform-originプロパティは、変形（transform）の基準点を指定する。

     正解：○（正しい）

     解説：transform-originは回転・拡大などの基準点。初期値は要素中央（50% 50%）。

186. 問186．@keyframesルールは、アニメーションの途中経過（キーフレーム）を定義するために使う。

     正解：○（正しい）

     解説：@keyframesでアニメーションの各段階（0%〜100%やfrom/to）の状態を定義する。

187. 問187．animation-iteration-countにloopを指定すると、アニメーションが無限に繰り返される。

     正解：×（誤り）

     解説：誤り。正しくは、無限ループの指定値はinfinite。loopという値は存在しない。

188. 問188．column-countプロパティは、要素の内容を分割する段組み（カラム）の数を指定する。

     正解：○（正しい）

     解説：column-countは内容を何列に分割するかを指定するマルチカラムレイアウトのプロパティ。列幅を基準にするcolumn-widthと併用すると、指定幅を保ちながら入る列数を自動調整でき、両者をまとめたcolumnsショートハンドもある。列の間隔はcolumn-gapで指定する。

189. 問189．column-ruleプロパティは、段組みの列と列の間に引く罫線のスタイルをまとめて指定する。

     正解：○（正しい）

     解説：column-ruleはカラム間の罫線の幅・スタイル・色をまとめて指定するショートハンド。

190. 問190．flex-directionの初期値はcolumnであり、フレックスアイテムは縦方向に並ぶ。

     正解：×（誤り）

     解説：誤り。正しくは、flex-directionの初期値はrowで、アイテムは横方向（主軸が水平）に並ぶ。

191. 問191．flex-wrapの初期値はwrapであり、フレックスアイテムは収まらないと自動的に折り返される。

     正解：×（誤り）

     解説：誤り。正しくは、flex-wrapの初期値はnowrapで折り返さない。折り返すにはwrapを指定する。

192. 問192．justify-content:space-betweenを指定すると、最初と最後のアイテムが両端に寄せられ、間が均等に配分される。

     正解：○（正しい）

     解説：space-betweenは両端のアイテムを端に置き、アイテム間を等間隔にする。

193. 問193．隣接するブロックレベル要素の上下のmarginは、重なって大きい方の値が採用されることがある（マージンの相殺）。

     正解：○（正しい）

     解説：上下marginは相殺（margin collapsing）が起こり、大きい方の値になる。

194. 問194．font-sizeの単位pxは、親要素のフォントサイズを基準とした相対値である。

     正解：×（誤り）

     解説：誤り。正しくは、pxは絶対的な長さの単位。親フォントサイズ基準の相対単位はem。

195. 問195．animation-fill-modeにbackwardsを指定すると、アニメーション終了後に最後のキーフレームの状態が維持される。

     正解：×（誤り）

     解説：誤り。正しくは、終了後に最終状態を維持するのはforwards。backwardsは開始前に最初の状態を適用する。

196. 問196．box-sizing:border-boxを指定し、width:200px、padding:20px、border:5pxとした要素のコンテンツ領域の幅はいくつになるか。

     • ア．150px
     • イ．250px
     • ウ．200px
     • エ．160px

     正解：ア．150px

     解説：border-boxではwidthに padding・borderが含まれる。200−（20×2）−（5×2）＝150px。

197. 問197．display:noneとvisibility:hiddenの違いとして正しいものはどれか。

     • ア．display:noneは領域を占有しないが、visibility:hiddenは領域を確保する
     • イ．どちらも領域を確保する
     • ウ．どちらも領域を占有しない
     • エ．visibility:hiddenは領域を占有しないが、display:noneは領域を確保する

     正解：ア．display:noneは領域を占有しないが、visibility:hiddenは領域を確保する

     解説：display:noneは領域を占有しないが、visibility:hiddenは見えなくても領域を確保する。

198. 問198．放射状（円形）のグラデーションを生成するCSS関数はどれか。

     • ア．radial-gradient()
     • イ．linear-gradient()
     • ウ．circle-gradient()
     • エ．round-gradient()

     正解：ア．radial-gradient()

     解説：radial-gradientが放射状グラデーション。linear-gradientは線形。

199. 問199．position:absoluteを指定した要素の配置基準となるのはどの要素か。

     • ア．position:static以外が指定された最も近い祖先要素
     • イ．常にbody要素
     • ウ．直近の親要素（positionに関係なく）
     • エ．常にビューポート

     正解：ア．position:static以外が指定された最も近い祖先要素

     解説：absoluteはposition:static以外で最も近い祖先を基準にする。なければ初期包含ブロック。

200. 問200．要素を斜体で表示するために使うCSSプロパティと値の組み合わせはどれか。

     • ア．font-style: italic
     • イ．font-weight: italic
     • ウ．text-style: italic
     • エ．text-decoration: italic

     正解：ア．font-style: italic

     解説：font-style:italicで斜体になる。font-weightは太さ、text-decorationは装飾線。

201. 問201．テキストをすべて大文字に変換して表示するプロパティと値はどれか。

     • ア．text-transform: uppercase
     • イ．text-transform: capitalize
     • ウ．text-transform: lowercase
     • エ．font-variant: small-caps

     正解：ア．text-transform: uppercase

     解説：text-transform:uppercaseで大文字化。lowercaseは小文字、capitalizeは各単語頭文字を大文字化。

202. 問202．フレックスボックスで主軸（横方向のデフォルト）に沿った子要素の配置を制御するプロパティはどれか。

     • ア．justify-content
     • イ．align-items
     • ウ．align-content
     • エ．flex-direction

     正解：ア．justify-content

     解説：justify-contentが主軸方向の配置を制御。align-itemsは交差軸方向。

203. 問203．transformで要素を時計回りに45度回転させる正しい記述はどれか。

     • ア．transform: rotate(45deg)
     • イ．transform: skew(45deg)
     • ウ．transform: translate(45deg)
     • エ．transform: scale(45deg)

     正解：ア．transform: rotate(45deg)

     解説：rotate(45deg)で回転。translateは移動、scaleは拡大縮小、skewは傾斜。

204. 問204．アニメーションを無限に繰り返すためにanimation-iteration-countに指定する値はどれか。

     • ア．loop
     • イ．infinite
     • ウ．repeat
     • エ．always

     正解：イ．infinite

     解説：animation-iteration-countはアニメーションの繰り返し回数を指定し、数値なら回数、infiniteなら無限に繰り返す。loopやrepeat、alwaysというキーワードはCSSには存在しない。既定値は1で、1回だけ再生される。

205. 問205．次のうち、テーブルの隣接セルの罫線を1本に結合するプロパティと値はどれか。

     • ア．border-spacing: 0
     • イ．border-collapse: collapse
     • ウ．border-collapse: separate
     • エ．empty-cells: hide

     正解：イ．border-collapse: collapse

     解説：border-collapse:collapseで罫線を結合。separateは分離。

206. 問206．段組み（マルチカラム）の列数を指定するプロパティはどれか。

     • ア．column-width
     • イ．column-count
     • ウ．column-gap
     • エ．columns-number

     正解：イ．column-count

     解説：column-countで列数を指定。column-widthは列幅、column-gapは列間隔。

207. 問207．box-shadowプロパティで影を要素の内側に描画するために付けるキーワードはどれか。

     • ア．inner
     • イ．inset
     • ウ．inside
     • エ．input

     正解：イ．inset

     解説：box-shadowにinsetを付けると影が要素の内側に描かれ、へこんだような表現になる。指定しなければ外側に影が落ちる。inner・inside・inputというキーワードはCSSには存在しない。

208. 問208．opacity:0.5を指定した要素の状態として正しいものはどれか。

     • ア．完全に不透明
     • イ．半透明（50%の不透明度）
     • ウ．完全に透明
     • エ．非表示で領域も消える

     正解：イ．半透明（50%の不透明度）

     解説：opacityは0が完全な透明、1が完全な不透明なので、0.5はちょうど半透明にあたる。要素は透けても領域は残るのでレイアウトは変わらない。領域ごと消したい場合はdisplay:noneを使う。

209. 問209．次のうち、リストマーカーを非表示にするプロパティと値はどれか。

     • ア．list-style-type: disc
     • イ．list-style-type: none
     • ウ．list-style-position: outside
     • エ．list-style-image: none

     正解：イ．list-style-type: none

     解説：list-style-type:noneでマーカーを消す。discは黒丸、circleは白丸。

210. 問210．スクロールしても背景画像をビューポートに固定するbackground-attachmentの値はどれか。

     • ア．scroll
     • イ．fixed
     • ウ．local
     • エ．static

     正解：イ．fixed

     解説：background-attachment: fixed は背景画像をビューポートに対して固定するため、ページをスクロールしても背景が動かず、内容だけが上を流れていくパララックス的な表現になる。初期値のscrollは要素とともにスクロールし、localは要素内部のスクロールにも追従する。

211. 問211．font-familyに「'Arial', 'Helvetica', sans-serif」と指定した場合、最初に適用されるフォントの決まり方として正しいものはどれか。

     • ア．最後に書いたものが優先される
     • イ．先頭から順に探し、最初に利用できるものが適用される
     • ウ．ランダムに選ばれる
     • エ．すべて同時に重ねて適用される

     正解：イ．先頭から順に探し、最初に利用できるものが適用される

     解説：font-familyはフォントの候補リストで、ブラウザは先頭から順に利用可能なものを探し、最初に見つかったフォントを適用する。そのため最後には必ずsans-serifやserifといった総称ファミリーを書いておき、どの環境でも破綻しないようにするのが定石。

212. 問212．背景画像をタイル状に繰り返さず1回だけ表示するbackground-repeatの値はどれか。

     • ア．repeat
     • イ．repeat-x
     • ウ．no-repeat
     • エ．space

     正解：ウ．no-repeat

     解説：no-repeatで繰り返しなし。repeatは縦横、repeat-x/yは一方向に繰り返す。

213. 問213．transformの変形における基準点を変更するプロパティはどれか。

     • ア．transform-base
     • イ．transform-point
     • ウ．transform-origin
     • エ．transform-center

     正解：ウ．transform-origin

     解説：transform-originは回転・拡大縮小・傾斜の基準となる点を指定するプロパティで、初期値は要素の中心（50% 50%）。たとえばtransform-origin: left centerとすれば左端を軸に回転する。transform-baseなどのプロパティは存在しない。

214. 問214．はみ出した内容を切り取り、スクロールバーも表示しないoverflowの値はどれか。

     • ア．visible
     • イ．scroll
     • ウ．hidden
     • エ．auto

     正解：ウ．hidden

     解説：hiddenははみ出しを切り取り表示しない。scrollは常にバー、autoは必要時のみ。

215. 問215．flex-directionプロパティの初期値はどれか。

     • ア．column
     • イ．row-reverse
     • ウ．row
     • エ．column-reverse

     正解：ウ．row

     解説：flex-directionの初期値はrowで、主軸が横方向（インライン方向）になり、フレックスアイテムが左から右へ並ぶ。columnにすると主軸が縦方向になり、-reverseを付けると並ぶ向きが逆になる。主軸がどちらかでjustify-contentとalign-itemsの効く方向が入れ替わる点が重要。

216. 問216．CSSのカウンタ機能で連番を表示する際、値を1ずつ増加させるプロパティはどれか。

     • ア．counter-reset
     • イ．counter-set
     • ウ．counter-increment
     • エ．content

     正解：ウ．counter-increment

     解説：counter-incrementでカウンタを加算。counter-resetは初期化。

217. 問217．テキストに下線を引くプロパティと値の組み合わせはどれか。

     • ア．text-decoration: line-through
     • イ．text-decoration: overline
     • ウ．text-decoration: underline
     • エ．text-style: underline

     正解：ウ．text-decoration: underline

     解説：text-decoration:underlineで下線。line-throughは打ち消し線、overlineは上線。

218. 問218．テーブルのキャプションの表示位置（上下）を指定するプロパティはどれか。

     • ア．caption-position
     • イ．caption-align
     • ウ．caption-side
     • エ．table-caption

     正解：ウ．caption-side

     解説：caption-sideはcaption要素を表の上に置くか下に置くかを指定するプロパティで、値はtopまたはbottom（初期値はtop）。caption-positionやcaption-alignといったプロパティは存在しない。

219. 問219．position:relativeを指定し、top:10px・left:20pxとした要素の挙動として正しいものはどれか。

     • ア．元の領域は詰められ、後続要素が前に詰まる
     • イ．ビューポート基準で配置される
     • ウ．親要素の左上に固定される
     • エ．元の位置を基準に下10px・右20pxずれ、元の領域は残る

     正解：エ．元の位置を基準に下10px・右20pxずれ、元の領域は残る

     解説：relativeは元の位置から相対的にずれ、元の領域（スペース）はそのまま残る。

220. 問220．transitionやanimationで使われ、変化の速度の緩急（イージング）を指定するプロパティはどれか。

     • ア．animation-delay
     • イ．animation-fill-mode
     • ウ．animation-direction
     • エ．animation-timing-function

     正解：エ．animation-timing-function

     解説：animation-timing-function（transition-timing-function）で緩急を指定する。easeやlinear等。

221. 問221．box-sizingプロパティの初期値はどれか。

     • ア．border-box
     • イ．padding-box
     • ウ．margin-box
     • エ．content-box

     正解：エ．content-box

     解説：box-sizingの初期値はcontent-boxで、widthやheightがコンテンツ領域だけを指すため、paddingやborderを足した分だけ実際の表示幅は大きくなる。border-boxを指定するとpaddingとborderを含めた寸法になり、レイアウトの計算が直感的になるため広く使われている。

222. 問222．アニメーション終了後に最後のキーフレームの状態を維持するanimation-fill-modeの値はどれか。

     • ア．backwards
     • イ．none
     • ウ．both
     • エ．forwards

     正解：エ．forwards

     解説：forwardsは終了後に最終状態を保持。backwardsは開始前に最初の状態を適用。

223. 問223．floatによる回り込みを解除するために使うプロパティはどれか。

     • ア．clip
     • イ．clip-path
     • ウ．clearfix
     • エ．clear

     正解：エ．clear

     解説：clearプロパティ（left/right/both）でfloatの回り込みを解除する。

224. 問224．白丸（○）のリストマーカーを指定するlist-style-typeの値はどれか。

     • ア．disc
     • イ．square
     • ウ．decimal
     • エ．circle

     正解：エ．circle

     解説：list-style-typeのcircleが白抜きの丸（○）。discが塗りつぶしの丸（●）でul要素の初期値、squareが四角形、decimalが算用数字でol要素の初期値にあたる。

225. 問225．z-indexプロパティが効果を発揮するための前提条件として正しいものはどれか。

     • ア．positionがstaticであること
     • イ．displayがinlineであること
     • ウ．floatが指定されていること
     • エ．positionがstatic以外に指定されていること

     正解：エ．positionがstatic以外に指定されていること

     解説：z-indexはposition:static以外（relative/absolute/fixed等）が指定された要素にのみ効く。

226. 問226．section要素は、文書やアプリケーションの一般的なセクションを表し、通常は見出しを伴う。

     正解：○（正しい）

     解説：section要素は文書やアプリケーションの汎用的なセクションを表し、原則として見出し（h1-h6）を持つことが推奨される。

227. 問227．article要素は、それ単独で完結し、独立して再配布・再利用可能なコンテンツを表す。

     正解：○（正しい）

     解説：article要素はブログ記事やニュース記事など、単独で完結し独立して配布可能なコンテンツを表す。

228. 問228．nav要素は、ページ内のすべてのリンクを必ず囲まなければならない。

     正解：×（誤り）

     解説：誤り。正しくは、nav要素は主要なナビゲーションリンクのまとまりに用いるもので、ページ内のすべてのリンクを囲む必要はない。

229. 問229．aside要素は、文書の主要コンテンツそのものを表すために用いる要素である。

     正解：×（誤り）

     解説：誤り。正しくは、aside要素は本文と間接的にしか関連しない補足情報（サイドバー、広告、関連リンク等）を表す。主要コンテンツを表すのはmain要素。

230. 問230．main要素は、1つの文書内に複数個配置してよい。

     正解：×（誤り）

     解説：誤り。正しくは、main要素は文書の主要コンテンツを表し、hidden属性のないものは文書内に1つだけ配置できる。

231. 問231．figure要素はキャプションを伴う画像・図表・コードなどを表し、figcaption要素でそのキャプションを示す。

     正解：○（正しい）

     解説：figure要素は自己完結的な図表・画像・コード等を表し、figcaptionでキャプションを付与する。

232. 問232．figcaption要素は、figure要素の2番目の子要素としてのみ配置できる。

     正解：×（誤り）

     解説：誤り。正しくは、figcaptionはfigureの最初または最後の子要素として配置する。

233. 問233．header要素は、ページ全体に1つしか配置できない。

     正解：×（誤り）

     解説：誤り。正しくは、header要素はsectionやarticleなどの内部にも配置でき、複数置くことができる。

234. 問234．footer要素には、著作者情報や著作権、関連文書へのリンクなどを含めることができる。

     正解：○（正しい）

     解説：footer要素は直近のセクションのフッターを表し、著作者情報・著作権・関連リンク等を含められる。

235. 問235．見出し要素はh1からh6まであり、数字が大きいほど上位（重要)な見出しを表す。

     正解：×（誤り）

     解説：誤り。h1が最上位で、数字が大きくなるほど下位の見出しになる。見出しは文書のアウトライン（階層構造）を作るものなので、文字の大きさを目的に飛ばして使うのではなく、内容の階層に従って順に使うのが正しい。

236. 問236．p要素は段落を表すグルーピングコンテンツである。

     正解：○（正しい）

     解説：p要素は1つの段落を表すグルーピングコンテンツ。単に改行や余白を作る目的で使うものではなく、まとまった意味を持つ文のかたまりを示す。中にブロックレベルのコンテンツを入れることはできない。

237. 問237．ul要素は順序を持たないリスト、ol要素は順序を持つリストを表す。

     正解：○（正しい）

     解説：ulは順序なしリスト、olは順序付きリストを表し、いずれも項目はli要素で記述する。

238. 問238．dl要素は説明リスト（記述リスト）を表し、用語をdt、説明をddで記述する。

     正解：○（正しい）

     解説：dlは用語とその説明の組を並べる説明リストで、dtに用語、ddにその説明を書く。1つのdtに複数のddを対応させたり、複数のdtに1つのddを対応させたりもできる。用語集やメタデータの一覧に適する。

239. 問239．blockquote要素は、インライン（行内）の短い引用を表すための要素である。

     正解：×（誤り）

     解説：誤り。正しくは、blockquoteは他出典からのブロックレベルの引用を表す。インラインの短い引用はq要素を用いる。

240. 問240．pre要素は、空白や改行などの整形をそのまま保持して表示する。

     正解：○（正しい）

     解説：pre要素は整形済みテキストを表し、ソース中の空白・改行をそのまま反映して表示する。

241. 問241．strong要素は単に文字を太字で表示するためだけの要素である。

     正解：×（誤り）

     解説：誤り。正しくは、strongは内容の強い重要性・重大性・緊急性を示す意味的な要素である。

242. 問242．em要素は、テキストの強調（ストレス）を表し、文の意味に影響する強調点を示す。

     正解：○（正しい）

     解説：em要素は発話上の強勢（ストレスエンファシス）を表し、ネストすると強調度が増す。

243. 問243．b要素は、内容の強い重要性や緊急性を意味的に示すための要素である。

     正解：×（誤り）

     解説：誤り。正しくは、b要素は重要性や強調の意味を持たず、注意を引きたい語句を慣用的に示す。強い重要性を示すのはstrong要素。

244. 問244．i要素は、発話上の強勢による強調（ストレスエンファシス）を表すための要素である。

     正解：×（誤り）

     解説：誤り。正しくは、i要素は別の声・気分、専門用語、外国語句など通常と異なるテキストを表す。強勢による強調を表すのはem要素。

245. 問245．mark要素は、参照のために関連性を持ってハイライト（強調表示）された部分を表す。

     正解：○（正しい）

     解説：mark要素は文脈上参照のために目立たせた（ハイライトした）テキスト範囲を表す。

246. 問246．small要素は、文字を物理的に小さく表示することだけを目的とした要素で、意味は持たない。

     正解：×（誤り）

     解説：誤り。正しくは、small要素は但し書き・免責・著作権などのサイドコメント（細目）を意味的に表す要素である。

247. 問247．abbr要素は作品（著書・論文・楽曲など）のタイトルを表すための要素である。

     正解：×（誤り）

     解説：誤り。正しくは、abbr要素は略語・頭字語を表し、title属性で完全形を示せる要素である。作品のタイトルを表すのはcite要素。

248. 問248．cite要素は、引用された人物の名前を表すための要素である。

     正解：×（誤り）

     解説：誤り。正しくは、cite要素は作品（著書・論文・楽曲など）のタイトルを表す要素である。

249. 問249．q要素は、インライン（短い）引用を表し、ブラウザは通常引用符を自動付加する。

     正解：○（正しい）

     解説：q要素は文中に埋め込む短い引用を表し、多くのブラウザが自動で引用符を表示するため自分で書く必要はない。段落単位の長い引用にはblockquote要素を使う。引用元のURLはcite属性で示せる。

250. 問250．code要素は、整形済みテキストとしてソース中の空白や改行をそのまま保持して表示する要素である。

     正解：×（誤り）

     解説：誤り。正しくは、code要素はコード断片を表すフレージングコンテンツであり、空白・改行をそのまま保持表示するのはpre要素の役割である。

251. 問251．time要素のdatetime属性には、機械可読な日時を指定する。

     正解：○（正しい）

     解説：time要素は日時を表し、datetime属性に機械可読形式の日付・時刻を記述する。

252. 問252．sub要素は上付き文字、sup要素は下付き文字を表す。

     正解：×（誤り）

     解説：誤り。subが下付き文字（H₂Oの2など）、supが上付き文字（x²や注釈番号など）で、設問は逆になっている。いずれも見た目のためではなく、化学式や数式のように意味的に上下の位置が必要な場合に使う。

253. 問253．span要素は、それ自体に固有の意味を持たない汎用的なインライン要素である。

     正解：○（正しい）

     解説：span要素は意味を持たない汎用インラインコンテナで、属性やスタイル付与に用いる。

254. 問254．ruby要素はルビ（読み仮名など）を表し、rt要素でルビ文字、rp要素で非対応ブラウザ用の括弧を示す。

     正解：○（正しい）

     解説：ruby要素はルビ注釈を表し、rtでルビテキスト、rpでルビ非対応時に表示する括弧を示す。

255. 問255．ins要素は文書から削除された内容、del要素は文書に追加された内容を表す。

     正解：×（誤り）

     解説：誤り。正しくは、ins要素が追加されたテキスト、del要素が削除されたテキストを表す（説明が逆）。

256. 問256．a要素のrel属性にnofollowを指定すると、検索エンジンにそのリンクをたどらない・支持しないことを示せる。

     正解：○（正しい）

     解説：rel="nofollow"はリンク先を是認しない旨を示し、検索エンジンの評価伝播を抑制する。

257. 問257．rel属性のnoopenerを指定すると、検索エンジンにそのリンクをたどらせないことを示せる。

     正解：×（誤り）

     解説：誤り。正しくは、rel="noopener"は新規ウィンドウから元ページのwindow.openerを参照できなくする指定である。検索エンジンにリンクをたどらせないのはrel="nofollow"。

258. 問258．lang属性は要素内のコンテンツの言語を指定する属性である。

     正解：○（正しい）

     解説：lang属性はその要素の内容が何語であるかをjaやenといった言語コードで示す。スクリーンリーダーの読み上げ言語の切り替え、ブラウザの翻訳、フォントや行分割規則の選択に使われるため、文中で言語が変わる箇所に付けるとアクセシビリティが向上する。

259. 問259．dir属性は、要素内のコンテンツの言語を指定する属性で、値にja・enなどを指定する。

     正解：×（誤り）

     解説：誤り。正しくは、dir属性は書字方向（ltr・rtl・auto）を指定する属性であり、言語を指定するのはlang属性である。

260. 問260．table要素の表のキャプションはth要素で指定する。

     正解：×（誤り）

     解説：誤り。正しくは、表のキャプションはcaption要素で指定し、table内の最初の子要素として置く。

261. 問261．th要素のscope属性には、その見出しが行・列のどちらに対応するかをrow・colなどで指定する。

     正解：○（正しい）

     解説：scope属性は見出しセルの適用範囲を示し、col（列）、row（行）、colgroup、rowgroupを指定できる。

262. 問262．thead・tbody・tfootは、それぞれ表のフッター行・本体行・ヘッダー行のグループを表す。

     正解：×（誤り）

     解説：誤り。正しくは、theadが表頭（ヘッダー行）、tbodyが表本体、tfootが表脚（フッター行）のグループを表す（theadとtfootの説明が逆）。

263. 問263．colgroup要素は表の列のグループを表し、col要素で各列に属性を適用できる。

     正解：○（正しい）

     解説：colgroupは列のまとまりを定義し、内部のcol要素で列単位の属性指定が可能。

264. 問264．td要素はデータセル、th要素は見出しセルを表す。

     正解：○（正しい）

     解説：thは見出しセルでscope属性により行・列どちらの見出しかを示せ、tdは実際のデータセル。スクリーンリーダーはこの区別を使ってデータと見出しを結び付けて読み上げるため、見た目を太字にしたいという理由だけでthを使うのは適切でない。

265. 問265．video要素のcontrols属性を指定すると、再生・一時停止・音量などの標準コントロールが表示される。

     正解：○（正しい）

     解説：controls属性を付けるとブラウザ標準の再生・一時停止・シーク・音量などのUIが表示される。付けない場合は何も表示されないため、JavaScriptから独自のUIで制御する必要がある。

266. 問266．audio要素のautoplay属性を指定すると、再生終了後に自動で先頭へ戻って繰り返し再生される。

     正解：×（誤り）

     解説：誤り。正しくは、autoplay属性は読み込み後に自動再生を開始させる属性である。再生終了後に先頭へ戻って繰り返すのはloop属性。

267. 問267．video要素のposter属性は、動画再生前に表示するプレビュー画像を指定する。

     正解：○（正しい）

     解説：poster属性は再生が始まる前に表示される代表画像（サムネイル）のURLを指定する。指定しないと動画の最初のフレームか空白が表示されるため、読み込み中の見た目を整える目的で使われる。

268. 問268．audio要素にposter属性を指定すると、音声のジャケット画像を表示できる。

     正解：×（誤り）

     解説：誤り。正しくは、poster属性はvideo要素の属性であり、audio要素には存在しない。

269. 問269．loop属性を指定すると、メディアは初期状態でミュート（消音）された状態になる。

     正解：×（誤り）

     解説：誤り。正しくは、loop属性はメディアを末尾まで再生後に先頭から繰り返す属性である。初期状態をミュートにするのはmuted属性。

270. 問270．muted属性を指定すると、メディアは初期状態でミュート（消音）される。

     正解：○（正しい）

     解説：muted属性を付けるとメディアは消音状態で読み込まれる。多くのブラウザは利用者の操作なしに音の出る自動再生を禁止しているため、autoplayを使いたい場合はmutedとの併用が事実上必須になる。

271. 問271．preload属性には、none・metadata・autoなどの値を指定できる。

     正解：○（正しい）

     解説：preload属性は事前読み込みのヒントで、none・metadata・auto（または空文字）を指定できる。

272. 問272．source要素は、video・audio要素内で複数の代替メディアリソースを指定するために使う。

     正解：○（正しい）

     解説：source要素は複数の代替ソースを列挙し、ブラウザが対応する最初のものを選択して使用する。

273. 問273．track要素は、video・audio要素に複数の代替メディアリソース（動画・音声ファイル）を指定するために使う。

     正解：×（誤り）

     解説：誤り。正しくは、track要素は字幕・キャプション等のテキストトラックを追加する要素である。複数の代替メディアリソースを指定するのはsource要素。

274. 問274．WebVTTは、HTML5のtrack要素で用いられる字幕・キャプション用のテキストフォーマットである。

     正解：○（正しい）

     解説：WebVTT（.vtt）はtrack要素で参照される字幕・キャプション記述のための標準フォーマット。

275. 問275．H.264は音声コーデックであり、映像の圧縮には使われない。

     正解：×（誤り）

     解説：誤り。正しくは、H.264は映像（ビデオ）コーデックであり、音声コーデックではない。

276. 問276．AACおよびOpusは音声（オーディオ）コーデックである。

     正解：○（正しい）

     解説：AACとOpusはいずれも音声を圧縮するコーデック。AACはMP4で広く使われ、OpusはWebMで使われ低遅延に強い。これに対しH.264やVP9は映像コーデック、MP4やWebMは映像と音声をまとめる入れ物（コンテナ）で、階層が異なる概念である。

277. 問277．VP9は音声（オーディオ）コーデックであり、映像の圧縮には用いられない。

     正解：×（誤り）

     解説：誤り。正しくは、VP9はGoogleが開発した映像（ビデオ）コーデックであり、音声コーデックではない。

278. 問278．a要素のdownload属性を指定すると、リンク先を表示するのではなくダウンロードさせることを示せる。

     正解：○（正しい）

     解説：download属性はリンク先をナビゲートせずファイルとしてダウンロードする指示を与える。

279. 問279．a要素のtarget="_self"は、リンクを新しいタブまたはウィンドウで開くことを示す。

     正解：×（誤り）

     解説：誤り。正しくは、target="_self"は現在のコンテキストでリンクを開く（既定値）。新しいタブ/ウィンドウで開くのはtarget="_blank"。

280. 問280．form要素のaction属性は、フォーム送信先のURLを指定する。

     正解：○（正しい）

     解説：action属性はフォームの内容を送信する先のURLを指定する。省略すると現在のページ自身へ送信される。送信方法（GET/POST）はmethod属性、送信先の表示先はtarget属性で指定し、それぞれ役割が異なる。

281. 問281．input要素のtype="email"は、メールアドレス形式の入力欄を表し、入力値の形式検証が行われる。

     正解：○（正しい）

     解説：type="email"はメール用入力欄で、ブラウザが基本的なメール形式の妥当性検証を行う。

282. 問282．input要素のtype="number"では、min・max・step属性で入力範囲や刻みを指定できる。

     正解：○（正しい）

     解説：type="number"は数値入力欄で、min/max/stepで許容範囲と増減幅を指定できる。

283. 問283．input要素のtype="range"は、カラーピッカーを表示して色を選択する入力欄を表す。

     正解：×（誤り）

     解説：誤り。正しくは、type="range"はスライダーで範囲内の数値を選ばせる入力欄である。カラーピッカーを表示するのはtype="color"。

284. 問284．input要素のtype="color"は、色を選択するためのカラーピッカーを表示する。

     正解：○（正しい）

     解説：type="color"はカラーピッカーUIを表示し、色（16進カラー値）を入力させる。

285. 問285．input要素のtype="file"は、画面に表示されないがフォーム送信時に値を送る非表示の入力欄である。

     正解：×（誤り）

     解説：誤り。正しくは、type="file"はファイル選択UIを表示する入力欄である。画面に表示されず値を送る非表示の入力欄はtype="hidden"。

286. 問286．required属性は、その入力欄が空のままでもフォーム送信を許可することを示す。

     正解：×（誤り）

     解説：誤り。正しくは、required属性は入力必須を意味し、空のまま送信しようとすると検証エラーになる。

287. 問287．placeholder属性は、入力値が満たすべき正規表現を指定するための属性である。

     正解：×（誤り）

     解説：誤り。正しくは、placeholder属性は入力前に薄く表示される入力例・ヒント文を指定する。入力値の正規表現を指定するのはpattern属性。

288. 問288．pattern属性は、input要素の入力値が満たすべき正規表現を指定する。

     正解：○（正しい）

     解説：pattern属性に正規表現を書くと、入力値がそれに一致しない限り送信できない。title属性に条件の説明を添えるとエラー時に案内として表示される。ただしブラウザ側の検証は利用者の利便性のためのもので、サーバー側の検証を省略してよい理由にはならない。

289. 問289．label要素のfor属性には、関連付けるフォーム部品のname値を指定する。

     正解：×（誤り）

     解説：誤り。正しくは、label要素のfor属性には対象コントロールのid値を指定する（name値ではない）。

290. 問290．fieldset要素は関連するフォーム部品をグループ化し、caption要素でそのグループの見出しを示す。

     正解：×（誤り）

     解説：誤り。正しくは、fieldsetのグループの見出しはlegend要素で示す。caption要素は表（table）のキャプション用である。

291. 問291．select要素は選択肢のリストを提供し、各選択肢はoption要素で記述する。

     正解：○（正しい）

     解説：select要素はドロップダウン等の選択リストを作り、option要素で各選択肢を定義する。

292. 問292．textarea要素は複数行のテキスト入力欄を提供する。

     正解：○（正しい）

     解説：textareaは複数行の自由なテキスト入力を受け付ける要素で、初期値はタグの間に書く（input要素のようにvalue属性では指定しない）。表示上の大きさはrows・cols属性やCSSで調整する。

293. 問293．iframe要素は、複数行のテキストを入力するための自由入力欄を提供する要素である。

     正解：×（誤り）

     解説：誤り。正しくは、iframe要素は別のHTML文書を埋め込むインラインフレームである。複数行のテキスト入力欄を提供するのはtextarea要素。

294. 問294．details要素は開閉できる情報の開示ウィジェットを作り、summary要素でその見出し（開閉ラベル）を示す。

     正解：○（正しい）

     解説：details要素はディスクロージャー（開閉）部品を作り、summaryが常時表示の見出しになる。

295. 問295．details要素にopen属性を指定すると、初期状態で内容が閉じた（折りたたまれた）状態になる。

     正解：×（誤り）

     解説：誤り。正しくは、open属性を付けるとdetailsは初期状態で展開（内容が見える）状態になる。open未指定時が閉じた状態である。

296. 問296．maxlength属性は、テキスト入力に許容される最大文字数を指定する。

     正解：○（正しい）

     解説：maxlength属性は入力できる最大文字数を制限し、それ以上は打ち込めなくなる。表示上の横幅を指定するsize属性とは別物で、最小文字数はminlength属性で指定する。

297. 問297．button要素のtype属性のデフォルト値（form内）はresetである。

     正解：×（誤り）

     解説：誤り。正しくは、form内のbutton要素はtype未指定の場合、既定でsubmit（送信）として動作する（resetではない）。

298. 問298．input要素のtype="file"は、ユーザーがファイルを選択してアップロードするための入力欄を表す。

     正解：○（正しい）

     解説：type="file"はファイル選択UIを表示し、ファイルのアップロードに用いる。

299. 問299．次のうち、自己完結し独立して再配布可能なコンテンツを表す要素はどれか。

     • ア．article
     • イ．section
     • ウ．aside
     • エ．div

     正解：ア．article

     解説：article要素は、それだけを切り出して配信・再利用しても意味が通る自己完結したまとまりを表す（ブログ記事、ニュース、コメントなど）。sectionは文書内の章立て、asideは本筋から外れた補足、divは意味を持たない汎用の入れ物で、用途が異なる。

300. 問300．主要なナビゲーションリンクのまとまりを表す要素はどれか。

     • ア．menu
     • イ．nav
     • ウ．aside
     • エ．header

     正解：イ．nav

     解説：nav要素は他のページや同一ページ内の主要なリンクのまとまりを表す。スクリーンリーダーの利用者はnavを目印に本文へ読み飛ばせるため、ページ内のあらゆるリンク群に付けるのではなく主要なナビゲーションに限って使う。

301. 問301．文書の主要コンテンツを表し、hidden属性のないものは原則1文書に1つだけ置ける要素はどれか。

     • ア．section
     • イ．article
     • ウ．main
     • エ．body

     正解：ウ．main

     解説：main要素は文書の主要なコンテンツを表し、ヘッダー・ナビゲーション・フッターのように複数ページで繰り返される部分は含めない。hidden属性のないmainは1文書に1つだけ置ける決まりで、支援技術が本文へ直接移動するための目印になる。

302. 問302．figure要素に付けるキャプションを表す要素はどれか。

     • ア．caption
     • イ．legend
     • ウ．figcaption
     • エ．summary

     正解：ウ．figcaption

     解説：figcaption要素はfigureに対するキャプションを表し、figureの最初か最後の子として1つだけ置ける。captionは表（table）のキャプション、legendはfieldsetの見出し、summaryはdetailsの見出しで、それぞれ対応する親要素が異なる。

303. 問303．テキストの強い重要性・重大性・緊急性を表す要素はどれか。

     • ア．b
     • イ．em
     • ウ．strong
     • エ．mark

     正解：ウ．strong

     解説：strong要素は内容の重要性・重大性・緊急性を意味的に示す。太字という見た目は既定のスタイルにすぎず、見た目だけが目的ならCSSを使う。b要素は特に重要とは言えないが目立たせたい語、emは強勢による強調、markはハイライトを表す。

304. 問304．文脈上の強勢（ストレスエンファシス）による強調を表す要素はどれか。

     • ア．em
     • イ．i
     • ウ．strong
     • エ．cite

     正解：ア．em

     解説：em要素は、その部分を強く読むと文の意味が変わるような強勢（ストレスエンファシス）を表す。重要性を示すstrongとは意味が異なり、i要素は声色の違う語（学名・専門用語・外国語など）、citeは作品名を表す。

305. 問305．参照のために目立たせた（ハイライトした）テキスト範囲を表す要素はどれか。

     • ア．b
     • イ．mark
     • ウ．strong
     • エ．span

     正解：イ．mark

     解説：mark要素は、元の文書では特別でなかった箇所を、読者の現在の関心に照らして目立たせる場合に使う。検索結果でキーワードを強調表示するのが典型例。重要性を示すstrongや強勢のem、意味を持たないspanとは目的が異なる。

306. 問306．作品（著書・論文・楽曲など）のタイトルを表す要素はどれか。

     • ア．q
     • イ．blockquote
     • ウ．cite
     • エ．abbr

     正解：ウ．cite

     解説：cite要素は著書・論文・楽曲などの作品のタイトルを表す。人名そのものを表す要素ではない点に注意。

307. 問307．略語を表し、title属性で完全形を示せる要素はどれか。

     • ア．abbr
     • イ．acronym
     • ウ．cite
     • エ．small

     正解：ア．abbr

     解説：abbr要素は略語や頭字語を表し、title属性に完全な語句を書いておくとマウスを乗せたときに表示され、支援技術も読み上げられる。acronymはHTML5で廃止された要素、citeは作品名、smallは注釈や細目を表す。

308. 問308．インラインの短い引用を表し、ブラウザが引用符を自動付加する要素はどれか。

     • ア．blockquote
     • イ．cite
     • ウ．q
     • エ．ins

     正解：ウ．q

     解説：q要素は文中に埋め込む短い引用を表し、多くのブラウザが引用符を自動で付けるため自分で書き足す必要はない。blockquoteは段落単位の長い引用、citeは作品名、insは追加された内容を表す。

309. 問309．上付き文字（指数や順序記号など）を表す要素はどれか。

     • ア．sub
     • イ．sup
     • ウ．small
     • エ．ins

     正解：イ．sup

     解説：sup要素が上付き文字で、指数（x²）や注釈番号、序数（1st）などに使う。subは下付き文字で化学式（H₂O）などに使う。smallは注釈や細目、insは追加された内容を表す要素で、文字位置とは無関係。

310. 問310．日時を表し、datetime属性に機械可読な日付を指定する要素はどれか。

     • ア．data
     • イ．time
     • ウ．date
     • エ．abbr

     正解：イ．time

     解説：time要素は日時を表し、datetime属性に機械が解釈できる形式（2026-07-24など）を書いておくと、検索エンジンやカレンダーアプリが正確に読み取れる。表示は「7月24日」のように自由な書き方でよい。dataは数値等の機械可読値、abbrは略語を表す。

311. 問311．ルビのルビ文字（読み）を表す要素はどれか。

     • ア．rb
     • イ．rp
     • ウ．rt
     • エ．ruby

     正解：ウ．rt

     解説：ruby要素の中で、rt要素がルビ（読み仮名）そのものを表す。ベーステキストを囲むのがrb、ルビ非対応環境向けの括弧を示すのがrpで、ruby全体を囲むのがruby要素という役割分担になっている。

312. 問312．ルビ非対応のブラウザで表示される括弧を指定する要素はどれか。

     • ア．rt
     • イ．rp
     • ウ．rb
     • エ．ruby

     正解：イ．rp

     解説：rp要素はルビに対応していない環境で表示される括弧を指定する。対応環境ではrpの内容は表示されず、非対応環境では「漢字（かんじ）」のように括弧付きで並んで読める、というフォールバックの仕組みになっている。

313. 問313．文書に追加された（挿入された）内容を表す要素はどれか。

     • ア．add
     • イ．ins
     • ウ．del
     • エ．new

     正解：イ．ins

     解説：ins要素は文書に追加・挿入された内容を表し、既定では下線が引かれる。削除された内容を表すdel要素と対で使い、いずれもdatetime属性で変更日時、cite属性で変更理由の説明ページを示せる。改訂履歴を明示したい文書で有用。

314. 問314．表のキャプションを指定する要素はどれか。

     • ア．caption
     • イ．legend
     • ウ．figcaption
     • エ．thead

     正解：ア．caption

     解説：caption要素は表のタイトル（キャプション）を表し、tableの最初の子に置く。

315. 問315．見出しセル（th）の適用範囲を行・列で指定する属性はどれか。

     • ア．span
     • イ．headers
     • ウ．scope
     • エ．axis

     正解：ウ．scope

     解説：scope属性はthの適用範囲（col/row/colgroup/rowgroup）を指定する。

316. 問316．表の本体行のグループを表す要素はどれか。

     • ア．thead
     • イ．tbody
     • ウ．tfoot
     • エ．tr

     正解：イ．tbody

     解説：tbodyは表の本体となるデータ行のグループを表す。theadは見出し行、tfootは合計などの脚注行のグループで、trは1行そのものを指す。これらで区分しておくと、長い表を印刷する際に見出し行を各ページで繰り返すといった処理が可能になる。

317. 問317．video要素で再生前に表示する代表画像を指定する属性はどれか。

     • ア．poster
     • イ．src
     • ウ．preview
     • エ．thumbnail

     正解：ア．poster

     解説：poster属性は再生開始前に表示される代表画像のURLを指定する。指定しないと最初のフレームか空白が表示されるため、読み込み中の見た目を整える目的で使う。srcは動画本体、preview・thumbnailという属性は存在しない。

318. 問318．メディアの事前読み込みのヒントを与える属性はどれか。

     • ア．buffer
     • イ．preload
     • ウ．cache
     • エ．loading

     正解：イ．preload

     解説：preload属性はnone/metadata/autoで事前読み込みの程度を指示する。

319. 問319．video・audio要素で複数の代替メディアリソースを列挙する要素はどれか。

     • ア．track
     • イ．media
     • ウ．source
     • エ．embed

     正解：ウ．source

     解説：source要素はvideo・audioの子として複数の代替リソースを列挙し、ブラウザは上から順に見て自分が再生できる最初のものを使う。コーデックの対応がブラウザごとに異なるため、MP4とWebMを併記するといった使い方をする。trackは字幕、embedは外部コンテンツの埋め込み。

320. 問320．video・audioに字幕やキャプションを追加する要素はどれか。

     • ア．caption
     • イ．subtitle
     • ウ．track
     • エ．cue

     正解：ウ．track

     解説：track要素は字幕・キャプション・説明などのテキストトラックを追加する。kind属性でsubtitles（翻訳字幕）やcaptions（音声情報を含む字幕）などの種類を、srclang属性で言語を指定する。音を出せない環境や聴覚に障害のある利用者への配慮として重要。

321. 問321．track要素で用いる、字幕記述用の標準フォーマットはどれか。

     • ア．SRT
     • イ．WebVTT
     • ウ．TTML
     • エ．ASS

     正解：イ．WebVTT

     解説：WebVTT（.vtt）がtrack要素で参照される字幕の標準フォーマットで、開始時刻→終了時刻とテキストを並べた単純なテキストファイル。SRTは類似形式だがHTMLの標準ではなく、TTMLはXMLベースの別規格、ASSは字幕ソフト向けの形式である。

322. 問322．次のうち音声（オーディオ）コーデックはどれか。

     • ア．H.264
     • イ．VP9
     • ウ．Opus
     • エ．WebM

     正解：ウ．Opus

     解説：Opusは音声コーデックで、低ビットレートでも品質が高く遅延も小さいためWebRTCなどでも使われる。H.264とVP9は映像コーデック、WebMは映像と音声をまとめる入れ物（コンテナ）で、それぞれ階層の異なる概念である。

323. 問323．次のうち映像（ビデオ）コーデックはどれか。

     • ア．AAC
     • イ．H.264
     • ウ．Opus
     • エ．MP4

     正解：イ．H.264

     解説：H.264は最も広く普及している映像コーデックで、ほぼすべてのブラウザと端末が対応する。AACとOpusは音声コーデック、MP4はコンテナ（入れ物）であり、映像・音声・コンテナの3階層を区別して覚えることが要点。

324. 問324．a要素でリンク先を新しいタブ/ウィンドウで開くために指定する属性値はどれか。

     • ア．target="_self"
     • イ．target="_blank"
     • ウ．target="_parent"
     • エ．target="_top"

     正解：イ．target="_blank"

     解説：target="_blank"で新しいタブやウィンドウに開く。ただし開かれた側からwindow.openerで元ページを操作できる問題があるため、rel="noopener noreferrer"を併記するのが安全（現在のブラウザは既定で対策済み）。_selfは同じ枠、_parentは親、_topは最上位の枠を指す。

325. 問325．a要素でリンク先をダウンロードさせることを示す属性はどれか。

     • ア．save
     • イ．download
     • ウ．href
     • エ．rel

     正解：イ．download

     解説：download属性を付けると、リンク先を表示せずファイルとして保存する動作になる。値を書けば保存時のファイル名を指定できる。ただし別オリジンのリソースには原則として効かない。saveという属性は存在せず、hrefはリンク先、relは関係を示す属性。

326. 問326．フォームデータの送信先URLを指定するform要素の属性はどれか。

     • ア．method
     • イ．action
     • ウ．target
     • エ．src

     正解：イ．action

     解説：action属性がフォームデータの送信先URLを指定する。methodは送信方法（GET/POST）、targetは応答の表示先を指定するもので、srcはimgやscriptなど別の要素で使う属性。actionを省略した場合は現在のページ自身に送信される。

327. 問327．スライダー形式で数値を選択させるinputのtypeはどれか。

     • ア．number
     • イ．range
     • ウ．slider
     • エ．scroll

     正解：イ．range

     解説：type="range"はつまみを動かして値を選ぶスライダーを表示する。min・max・step属性で範囲と刻みを指定でき、正確な数値入力にはtype="number"のほうが向く。sliderやscrollというtypeは存在しない。

328. 問328．カラーピッカーを表示するinputのtypeはどれか。

     • ア．color
     • イ．palette
     • ウ．colour
     • エ．picker

     正解：ア．color

     解説：type="color"は色を選ぶピッカーを表示し、値は#rrggbb形式の文字列として送信される。paletteやpicker、英国式綴りのcolourというtypeは定義されていない。

329. 問329．画面に表示されず値を送信するinputのtypeはどれか。

     • ア．secret
     • イ．hidden
     • ウ．invisible
     • エ．none

     正解：イ．hidden

     解説：type="hidden"は画面に表示されないまま値を保持して送信する入力欄で、編集中のレコードIDやCSRF対策トークンの受け渡しに使われる。ただしHTMLソースを見れば内容は分かるため、秘密にすべき情報を入れてはならない。

330. 問330．入力が必須であることを示すinput要素の属性はどれか。

     • ア．required
     • イ．mandatory
     • ウ．needed
     • エ．must

     正解：ア．required

     解説：required属性を付けると、値が空のままでは送信できず、ブラウザがエラーメッセージを表示する。あくまで利用者の入力を助ける仕組みなので、開発者ツールで外せることを踏まえてサーバー側の検証は必ず別途行う必要がある。

331. 問331．input要素で入力値が満たすべき正規表現を指定する属性はどれか。

     • ア．regex
     • イ．match
     • ウ．pattern
     • エ．validate

     正解：ウ．pattern

     解説：pattern属性に正規表現を指定すると、入力値が一致しない限り送信できない。titleに条件の説明を書いておくとエラー時の案内に使われる。regex・match・validateといった属性は存在しない。

332. 問332．関連するフォーム部品をグループ化する要素はどれか。

     • ア．group
     • イ．fieldset
     • ウ．section
     • エ．optgroup

     正解：イ．fieldset

     解説：fieldset要素は関連するフォーム部品を1つのまとまりとして囲み、legend要素でそのまとまりの見出しを付ける。支援技術が「どの見出しに属する項目か」を伝えられるため、ラジオボタン群のように選択肢がまとまっている場合に特に有効。optgroupはselect内の選択肢のグループ化。

333. 問333．fieldsetのグループに見出し（キャプション）を付ける要素はどれか。

     • ア．caption
     • イ．legend
     • ウ．label
     • エ．summary

     正解：イ．legend

     解説：legend要素はfieldsetの最初の子として置き、そのグループの見出しを表す。captionは表（table）の、summaryはdetailsの見出しで、labelは個々のフォーム部品に対する名札であり、対応する親要素がそれぞれ異なる。

334. 問334．開閉できる情報の開示部品を作る要素はどれか。

     • ア．details
     • イ．summary
     • ウ．dialog
     • エ．disclosure

     正解：ア．details

     解説：details要素はクリックで開閉できる領域を作り、その中のsummary要素が常に見えている見出しになる。JavaScriptなしで開閉を実現でき、open属性を付ければ初期状態で開いた状態にできる。dialogはモーダルダイアログを作る別の要素。

335. 問335．details要素で常時表示される見出し（開閉ラベル）を示す要素はどれか。

     • ア．caption
     • イ．legend
     • ウ．summary
     • エ．title

     正解：ウ．summary

     解説：summary要素はdetailsの見出しとして常時表示され、クリックで開閉する。

336. 問336．テキスト入力の最大文字数を制限する属性はどれか。

     • ア．size
     • イ．maxlength
     • ウ．limit
     • エ．maxsize

     正解：イ．maxlength

     解説：maxlength属性が入力可能な最大文字数を制限する。size属性は表示上の横幅（文字数の目安）を指定するもので、入力できる文字数の制限ではない点に注意する。最小文字数はminlength属性で指定する。

337. 問337．複数行のテキスト入力欄を提供する要素はどれか。

     • ア．input
     • イ．textarea
     • ウ．textfield
     • エ．textbox

     正解：イ．textarea

     解説：textarea要素が複数行のテキスト入力欄を提供する。input要素は1行入力用で、textfieldやtextboxという要素は存在しない。textareaの初期値はvalue属性ではなくタグの間に書く点も特徴。

338. 問338．label要素を特定のフォーム部品と関連付けるために用いる属性はどれか。

     • ア．id
     • イ．name
     • ウ．for
     • エ．ref

     正解：ウ．for

     解説：label要素のfor属性に対象部品のid値を指定すると両者が関連付けられ、ラベルをクリックしただけで入力欄にフォーカスが移り、チェックボックスなら選択も切り替わる。支援技術が項目名を正しく読み上げるためにも重要で、labelで部品ごと囲む書き方でも関連付けられる。

339. 問339．レスポンシブWebデザインでは、グリッドの幅を%などの相対値で指定する「フルードグリッド」が用いられる。

     正解：○（正しい）

     解説：フルードグリッドは画面幅に応じて伸縮するよう、列幅を%等の相対値で指定する手法である。

340. 問340．フルードイメージを実現するため、画像に「max-width: 100%;」を指定するのが一般的である。

     正解：○（正しい）

     解説：img{max-width:100%}により親要素を超えない範囲で画像が縮小し、レイアウト崩れを防ぐ。

341. 問341．可変（リキッド）レイアウトは、ウィンドウ幅に応じてコンテンツの幅が伸縮するレイアウトである。

     正解：○（正しい）

     解説：幅を%やvwなどの相対値で指定するため、ウィンドウ幅の変化に応じてコンテンツが伸び縮みする。pxで固定する固定レイアウトと違い、どの画面幅でも横スクロールが出にくい反面、極端に広い画面では1行が長くなりすぎるため、max-widthの併用が定石になる。

342. 問342．リセットCSSは、ブラウザごとに異なるデフォルトスタイルを打ち消し、ほぼ無装飾の状態に揃えることを目的とする。

     正解：○（正しい）

     解説：リセットCSSはmarginやpadding等のデフォルト値を0等にリセットし、ブラウザ間の差異をなくす。

343. 問343．CSSスプライトは、複数の画像を1枚にまとめ、background-positionで表示位置をずらして使う手法である。

     正解：○（正しい）

     解説：CSSスプライトは画像を1枚に統合しHTTPリクエスト数を減らす手法で、位置はbackground-positionで調整する。

344. 問344．高解像度（Retina）ディスプレイ向けには、2倍などの大きな画像を用意して縮小表示するとぼやけを防げる。

     正解：○（正しい）

     解説：高解像度端末ではdprが高く、2倍画像を用意して縮小表示することで鮮明に表示できる。

345. 問345．img要素のsizes属性は、各表示条件における画像の表示サイズをブラウザに伝え、srcsetからの選択を補助する。

     正解：○（正しい）

     解説：sizesはメディア条件ごとの表示幅を示し、ブラウザがsrcsetから適切な画像を選ぶ材料となる。

346. 問346．srcsetの「2x」のようなx記述子は、デバイスピクセル比（dpr）に基づいて画像を切り替える指定である。

     正解：○（正しい）

     解説：x記述子(1x/2x等)はデバイスピクセル比に応じて画像を選択させる指定方法である。

347. 問347．ビューポートを指定するmeta要素は「<meta name="viewport" content="width=device-width, initial-scale=1">」のように記述する。

     正解：○（正しい）

     解説：width=device-widthで端末幅に合わせ、initial-scale=1で初期倍率を等倍にする標準的記述である。

348. 問348．viewportのcontentで「width=device-width」と指定すると、ビューポートの幅を端末の画面幅に合わせる。

     正解：○（正しい）

     解説：width=device-widthはビューポート幅をデバイスの画面幅(CSSピクセル)に一致させる指定である。

349. 問349．viewportの「initial-scale」は、ページ読み込み時の初期ズーム倍率を指定するプロパティである。

     正解：○（正しい）

     解説：initial-scaleはページを開いた瞬間の表示倍率を指定し、1にすると等倍で表示される。width=device-widthと組み合わせて指定するのが基本形で、これがないとスマートフォンがPC向けの広い仮想幅で描画し、全体が縮小表示されてしまう。

350. 問350．viewportの「user-scalable」をnoにすると、ピンチ操作などでの拡大・縮小を禁止できる。

     正解：○（正しい）

     解説：user-scalable=noでユーザーのズーム操作が無効化される(アクセシビリティ上は非推奨)。

351. 問351．デバイスピクセル比（dpr）とは、1つのCSSピクセルに対応する物理（デバイス）ピクセルの数を示す比率である。

     正解：○（正しい）

     解説：dprはCSSピクセル1に対する物理ピクセル数の比で、Retina端末では2や3となる。

352. 問352．ファビコンは、ブラウザのタブやブックマークに表示されるサイトのアイコンである。

     正解：○（正しい）

     解説：ファビコンはタブ・ブックマーク・履歴などに表示される小さなサイトアイコンである。

353. 問353．apple-touch-icon-precomposedは、iOSが自動で付ける光沢などの効果を適用させずにアイコンを表示させる指定である。

     正解：○（正しい）

     解説：precomposed版はOSによる光沢加工を無効にし、用意した画像をそのまま表示させる。

354. 問354．apple-mobile-web-app-capableをyesにすると、iOSでホーム画面から起動した際にスタンドアロンモード（ブラウザUIなし）で表示できる。

     正解：○（正しい）

     解説：このmetaをyesにすると、ホーム画面起動時にブラウザUIを隠したフルスクリーン表示になる。

355. 問355．電話番号へのリンクは「<a href="tel:0312345678">」のようにtelスキームを用いて記述する。

     正解：○（正しい）

     解説：tel:スキームを使うと、対応端末でタップにより発信できる電話番号リンクになる。

356. 問356．script要素のasync属性を付けると、スクリプトは非同期にダウンロードされ、完了次第すぐに実行される。

     正解：○（正しい）

     解説：asyncはダウンロードを非同期で行い、完了次第HTML解析を止めて実行する(順序は保証されない)。

357. 問357．script要素のdefer属性を付けると、スクリプトはHTMLの解析完了後に記述順で実行される。

     正解：○（正しい）

     解説：deferを付けるとスクリプトの取得はHTMLの解析と並行して行われ、実行は解析が終わってから記述順に行われる。DOMが完成した後に動くので要素の取得に失敗せず、複数のスクリプトの依存関係も保たれる。head内に書いても描画をブロックしない点が利点。

358. 問358．async属性は外部スクリプト（src属性付き）に対して有効であり、インラインスクリプトには効果がない。

     正解：○（正しい）

     解説：asyncはsrcを持つ外部スクリプトにのみ作用し、インラインスクリプトには無効である。

359. 問359．メディアクエリは「@media」というアットルールを使って、特定の条件下でのみ適用するスタイルを記述する。

     正解：○（正しい）

     解説：@media条件{...}の形でメディアクエリを記述し、条件に合うときだけスタイルを適用する。

360. 問360．メディアタイプ「screen」は、画面（ディスプレイ）向けの表示を対象とする。

     正解：○（正しい）

     解説：screenはPCやスマートフォンなどのスクリーン表示を対象とするメディアタイプである。

361. 問361．メディアタイプ「all」は、すべてのメディアタイプを対象とする。

     正解：○（正しい）

     解説：メディアタイプallはすべての出力先を対象とし、指定を省略した場合の既定値でもある。ほかにscreen（画面）、print（印刷）、speech（読み上げ）があり、かつて存在したhandheldやttyなどは廃止された。

362. 問362．固定（フィックス）レイアウトは、ウィンドウ幅に応じてコンテンツ幅がpx等の固定値から伸縮する。

     正解：×（誤り）

     解説：誤り。正しくは、固定レイアウトは幅を固定値で指定し、ウィンドウ幅が変わってもコンテンツ幅は変化しない。

363. 問363．ノーマライズCSS（Normalize.css）は、ブラウザのデフォルトスタイルをすべて0にリセットすることを目的としている。

     正解：×（誤り）

     解説：誤り。正しくは、Normalize.cssは有用な既定値を残しつつブラウザ間の差異だけを揃える手法で、すべてを0にはしない。

364. 問364．CSSスプライトを使うとHTTPリクエスト数が増えるため、表示速度はむしろ低下する。

     正解：×（誤り）

     解説：誤り。正しくは、複数画像を1枚に束ねることでリクエスト数は削減され、表示は高速化される。

365. 問365．img要素のsrcset属性は、ページに表示する音声ファイルのビットレート候補を指定する属性である。

     正解：×（誤り）

     解説：誤り。正しくは、srcsetは複数の画像候補を解像度や幅とともに指定し最適な画像を選ばせる属性である。

366. 問366．srcsetの「w記述子」は、各画像のファイルサイズをキロバイト単位で示すものである。

     正解：×（誤り）

     解説：誤り。w記述子は画像の実際の横幅をピクセル数で示すもので、ファイルサイズではない。ブラウザはこの値とsizes属性が示す表示幅、さらにデバイスピクセル比を突き合わせて最適な画像を選ぶ。

367. 問367．viewportの「maximum-scale」は、ユーザーが拡大できる最小の倍率を指定する。

     正解：×（誤り）

     解説：誤り。正しくは、maximum-scaleはユーザーが拡大できる最大倍率を指定する。最小はminimum-scaleである。

368. 問368．viewportの「device-width」は、サーバー側で設定した固定のページ幅を表すキーワードである。

     正解：×（誤り）

     解説：誤り。正しくは、device-widthは端末の画面幅(デバイス幅)を表すキーワードである。

369. 問369．apple-touch-iconは、印刷時に用紙の余白に表示する透かしアイコンを指定するためのものである。

     正解：×（誤り）

     解説：誤り。正しくは、apple-touch-iconはiOSでホーム画面に追加した際に使われるアイコンを指定するものである。

370. 問370．defer属性を付けた複数のスクリプトは、記述順とは無関係にダウンロード完了が早い順で実行される。

     正解：×（誤り）

     解説：誤り。正しくは、deferのスクリプトはHTML中の記述順で実行される。順不同なのはasyncである。

371. 問371．メディアタイプ「print」は、画面表示のみを対象とし印刷時には適用されない。

     正解：×（誤り）

     解説：誤り。正しくは、printは印刷出力および印刷プレビューに適用されるメディアタイプである。

372. 問372．メディア特性「max-width: 600px」は、ビューポート幅が600px以上のときに条件が真となる。

     正解：×（誤り）

     解説：誤り。正しくは、max-widthは指定値以下の幅で真となる。以上で真になるのはmin-widthである。

373. 問373．メディア特性「orientation: landscape」は、幅が高さより大きい縦長表示のときに真となる。

     正解：×（誤り）

     解説：誤り。正しくは、landscapeは幅が高さより大きい横長表示で真となる。縦長はportraitである。

374. 問374．メディアクエリでカンマ（,）は、すべての条件を満たさなければならない論理積（AND）の意味を持つ。

     正解：×（誤り）

     解説：誤り。カンマは論理和（OR）で、区切られた条件のいずれかを満たせば適用される。すべての条件を満たすことを求める論理積（AND）はandキーワードで表す。

375. 問375．解像度単位「dpi」は、1センチメートルあたりのドット数を表す。

     正解：×（誤り）

     解説：誤り。正しくは、dpiはdots per inchで1インチあたりのドット数を表す。cm単位はdpcmである。

376. 問376．viewportで「initial-scale=1.0」と指定すると、ページが2倍に拡大された状態で初期表示される。

     正解：×（誤り）

     解説：誤り。正しくは、initial-scale=1.0は等倍(拡大なし)で初期表示する指定である。

377. 問377．async属性を付けたスクリプトの実行順序は、複数ある場合でも記述順に従って保証される。

     正解：×（誤り）

     解説：誤り。正しくは、asyncはダウンロード完了順で実行され、記述順は保証されない。順序保証はdeferである。

378. 問378．tel:リンクは、発信機能のないPCを含むすべての環境で必ず電話発信ダイアログを表示する。

     正解：×（誤り）

     解説：誤り。正しくは、tel:の挙動は環境依存で、発信機能のないPC等ではダイアログが出ないことがある。

379. 問379．メディアクエリの長さ値は単位を省略しても、自動的にpxとして解釈される。

     正解：×（誤り）

     解説：誤り。メディアクエリの長さ値には単位が必須で、min-width: 600 のように単位を省くと条件全体が無効になる（0のみ例外）。CSSの宣言部では0以外の長さにも単位が必要なのと同じ原則である。

380. 問380．レスポンシブWebデザインでは、デバイスごとに別々のURLとHTMLを用意するのが必須である。

     正解：×（誤り）

     解説：誤り。正しくは、レスポンシブは1つのHTMLをCSSで切り替える手法で、別URL別HTMLは必須ではない。

381. 問381．viewportの「minimum-scale」は、ユーザーが拡大できる最大の倍率を指定する。

     正解：×（誤り）

     解説：誤り。正しくは、minimum-scaleは縮小できる最小倍率を指定する。最大はmaximum-scaleである。

382. 問382．メディア特性「min-width」は、ビューポート幅が指定値以下のときに条件が真となる。

     正解：×（誤り）

     解説：誤り。正しくは、min-widthは指定値以上の幅で真となる。以下で真になるのはmax-widthである。

383. 問383．フルードグリッドでは、列幅をすべてpxの固定値で指定して画面幅に依存しないようにする。

     正解：×（誤り）

     解説：誤り。正しくは、フルードグリッドは列幅を%等の相対値で指定し画面幅に応じ伸縮させる。

384. 問384．次のうち、フルードイメージを実現するために画像に指定するCSSとして最も適切なものはどれか。

     • ア．max-width: 100%;
     • イ．min-width: 100%;
     • ウ．width: 100px;
     • エ．display: none;

     正解：ア．max-width: 100%;

     解説：max-width:100%で親要素を超えず、縮小可能なフルードイメージになる。

385. 問385．スマートフォン等で表示領域をデバイスの画面幅に合わせるために指定するmeta要素のname属性の値はどれか。

     • ア．screen
     • イ．viewport
     • ウ．device
     • エ．display

     正解：イ．viewport

     解説：<meta name="viewport" content="width=device-width, initial-scale=1"> のように、name属性にviewportを指定する。これがないとスマートフォンはPC向けの広い仮想幅（980px程度）で描画してページ全体を縮小表示してしまい、メディアクエリも意図どおりに働かない。

386. 問386．ページ読み込み時の初期表示倍率を等倍にするviewportの記述として正しいものはどれか。

     • ア．maximum-scale=1
     • イ．minimum-scale=1
     • ウ．initial-scale=1
     • エ．user-scalable=1

     正解：ウ．initial-scale=1

     解説：initial-scale=1で初期表示倍率が等倍になる。minimum-scale・maximum-scaleは利用者が縮小・拡大できる下限と上限、user-scalableはズーム操作の可否を指定するもので、いずれも初期倍率そのものを決めるものではない。

387. 問387．ビューポートの幅を端末の画面幅に合わせるためのviewport記述はどれか。

     • ア．height=device-height
     • イ．width=auto
     • ウ．scale=device
     • エ．width=device-width

     正解：エ．width=device-width

     解説：width=device-widthでビューポートの幅を端末の画面幅に合わせる。これを指定しないとPC向けの広い仮想幅で描画され、メディアクエリのmin-width/max-widthも実機の幅と食い違ってしまう。initial-scale=1とセットで書くのが基本。

388. 問388．ユーザーによる拡大・縮小操作を禁止するviewportの記述はどれか。

     • ア．user-scalable=no
     • イ．zoom=no
     • ウ．scalable=false
     • エ．scale=fixed

     正解：ア．user-scalable=no

     解説：user-scalable=noでズーム操作を禁止できる。ただし利用者が文字を拡大できなくなりアクセシビリティを損なうため、現在は指定しないことが推奨されており、ブラウザによっては無視される。

389. 問389．メディアクエリを記述するためのアットルールはどれか。

     • ア．@import
     • イ．@media
     • ウ．@screen
     • エ．@query

     正解：イ．@media

     解説：@mediaがメディアクエリを記述するためのアットルール。@importは外部スタイルシートの読み込み、@screenや@queryというアットルールは存在しない。@media (min-width: 768px) { ... } のように条件と適用規則を書く。

390. 問390．画面表示かつ幅が600px以下のときにスタイルを適用するメディアクエリとして正しいものはどれか。

     • ア．@media print and (max-width:600px)
     • イ．@media screen and (min-width:600px)
     • ウ．@media screen and (max-width:600px)
     • エ．@media all or (width:600px)

     正解：ウ．@media screen and (max-width:600px)

     解説：screen and (max-width:600px)で画面かつ幅600px以下に適用される。

391. 問391．印刷時に適用するスタイルを指定するメディアタイプはどれか。

     • ア．handheld
     • イ．screen
     • ウ．speech
     • エ．print

     正解：エ．print

     解説：printメディアタイプは印刷時と印刷プレビュー時に適用される。ナビゲーションや広告を非表示にする、背景色を落とす、リンクのURLを::afterで併記するといった調整に使う。screenは画面表示、speechは音声読み上げが対象。

392. 問392．縦長（高さが幅以上）の表示状態を表すメディア特性の値はどれか。

     • ア．orientation: portrait
     • イ．orientation: landscape
     • ウ．orientation: vertical
     • エ．orientation: column

     正解：ア．orientation: portrait

     解説：orientationは表示領域の向きを表すメディア特性で、高さが幅以上ならportrait（縦長）、幅が高さより大きければlandscape（横長）。verticalやcolumnという値は定義されていない。端末の物理的な向きではなくビューポートの縦横比で判定される点に注意。

393. 問393．複数のメディア特性をすべて満たす場合に適用する論理演算子はどれか。

     • ア．, （カンマ）
     • イ．and
     • ウ．or
     • エ．not

     正解：イ．and

     解説：andは論理積で、結んだすべての条件を満たすときだけ適用される。(min-width:768px) and (max-width:1024px) のように範囲を絞る使い方が典型。カンマは論理和、notは否定を表す。

394. 問394．メディアクエリにおいてカンマ（,）が表す論理関係はどれか。

     • ア．論理積（AND）
     • イ．否定（NOT）
     • ウ．論理和（OR）
     • エ．排他的論理和（XOR）

     正解：ウ．論理和（OR）

     解説：カンマは論理和（OR）で、区切られた条件のいずれかを満たせば適用される。print, screen のように異なるメディアへ同じスタイルを当てたい場合に使う。すべてを満たす必要があるANDはandキーワードで表す。

395. 問395．メディアクエリ非対応の古いブラウザへの誤適用を防ぐために用いるキーワードはどれか。

     • ア．not
     • イ．and
     • ウ．all
     • エ．only

     正解：エ．only

     解説：onlyはメディアクエリに対応していない古いブラウザにスタイルを誤って適用させないためのキーワード。古いブラウザはonlyを未知のメディアタイプとみなして規則全体を無視するので、意図しない適用を防げる。現在のブラウザは対応済みのため実質的には無害な記述となる。

396. 問396．解像度を表すメディア特性として正しいものはどれか。

     • ア．resolution
     • イ．density
     • ウ．dpr
     • エ．sharpness

     正解：ア．resolution

     解説：resolutionは出力デバイスのピクセル密度を表すメディア特性で、dpi・dpcm・dppxといった単位を伴って指定する。高精細ディスプレイ向けに画像やアイコンを切り替える用途に使う。density・dpr・sharpnessというメディア特性は存在しない。

397. 問397．次の解像度単位のうち「1インチあたりのドット数」を表すものはどれか。

     • ア．dpcm
     • イ．dpi
     • ウ．dppx
     • エ．cpi

     正解：イ．dpi

     解説：dpiはdots per inchの略で、1インチあたりのドット数を表す。dpcmは1センチメートルあたり、dppxは1CSSピクセルあたりのドット数を表す単位で、cpiという解像度単位はない。

398. 問398．「1CSSピクセルあたりのドット数」を表し、1dppx＝96dpiに相当する解像度単位はどれか。

     • ア．dpi
     • イ．dpcm
     • ウ．dppx
     • エ．cm

     正解：ウ．dppx

     解説：dppxはdots per pxで、1CSSピクセルあたりの物理ドット数を表す。CSSでは1インチ＝96pxと定義されているため1dppx＝96dpiに対応し、いわゆる2倍解像度ディスプレイは2dppx（＝192dpi）となる。デバイスピクセル比と直接対応するため扱いやすい。

399. 問399．img要素で複数の画像候補を解像度や幅とともに指定する属性はどれか。

     • ア．src
     • イ．sizes
     • ウ．media
     • エ．srcset

     正解：エ．srcset

     解説：srcsetは画像候補を「ファイル名＋記述子」の形で列挙する属性。w記述子なら各画像の実際の横幅、x記述子ならデバイスピクセル比を示し、ブラウザが環境に応じて最適な1枚を選ぶ。sizesは表示幅の情報を補う属性、srcは単一の画像を指定する従来の属性。

400. 問400．img要素で各表示条件における画像の表示サイズをブラウザに伝える属性はどれか。

     • ア．sizes
     • イ．src
     • ウ．alt
     • エ．width

     正解：ア．sizes

     解説：sizesはメディア条件ごとに「その画像が何px幅で表示されるか」をブラウザへ伝える属性。srcsetをw記述子で書く場合、ブラウザはこの表示幅とデバイスピクセル比を掛け合わせて必要な解像度を求め、候補の中から適切な画像を選ぶ。src・alt・widthはこの選択には関与しない。

401. 問401．srcsetでデバイスピクセル比に基づいて画像を切り替える記述子はどれか。

     • ア．w記述子
     • イ．x記述子
     • ウ．h記述子
     • エ．d記述子

     正解：イ．x記述子

     解説：x記述子は 2x のようにデバイスピクセル比を示し、高精細ディスプレイでは2x、通常のディスプレイでは1xの画像が選ばれる。表示幅が固定の画像に向く。表示幅が可変ならw記述子とsizesを組み合わせるほうが適切。

402. 問402．iOSでホーム画面に追加した際のアイコンを指定するlinkのrel値はどれか。

     • ア．stylesheet
     • イ．shortcut icon
     • ウ．apple-touch-icon
     • エ．home-icon

     正解：ウ．apple-touch-icon

     解説：apple-touch-iconがホーム画面追加時のアイコンを指定するrel値である。

403. 問403．iOSが付ける光沢効果を適用させずにホーム画面アイコンを表示させるrel値はどれか。

     • ア．apple-touch-icon
     • イ．apple-icon-flat
     • ウ．icon-noeffect
     • エ．apple-touch-icon-precomposed

     正解：エ．apple-touch-icon-precomposed

     解説：apple-touch-icon-precomposedはOSによる光沢加工を無効化する。

404. 問404．iOSでホーム画面起動時にスタンドアロン表示を有効にするmetaのname値はどれか。

     • ア．apple-mobile-web-app-capable
     • イ．apple-standalone
     • ウ．apple-fullscreen
     • エ．web-app-mode

     正解：ア．apple-mobile-web-app-capable

     解説：apple-mobile-web-app-capableをyesにするとスタンドアロン表示になる。

405. 問405．電話番号へのリンクを作成する際に用いるURLスキームはどれか。

     • ア．phone:
     • イ．tel:
     • ウ．call:
     • エ．dial:

     正解：イ．tel:

     解説：tel:スキームを使い <a href="tel:0312345678">と書くと、スマートフォンでタップしたときに電話発信の操作につながる。同様にメールはmailto:、SMSはsms:スキームを使う。phone:やcall:といったスキームは定義されていない。

406. 問406．script要素で、HTML解析完了後に記述順で実行させたい場合に付ける属性はどれか。

     • ア．async
     • イ．sync
     • ウ．defer
     • エ．blocking

     正解：ウ．defer

     解説：deferはHTMLの解析と並行して取得し、解析完了後に記述順で実行する。DOMが完成してから動くうえ順序も保たれるため、依存関係のある複数のスクリプトに向く。asyncは取得完了次第すぐ実行されるので順序が保証されない。

407. 問407．script要素のasync属性に関する説明として正しいものはどれか。

     • ア．HTML解析完了後に必ず記述順で実行される
     • イ．インラインスクリプトでも実行順を制御できる
     • ウ．ダウンロード完了まで実行を必ず遅延し記述順を保つ
     • エ．非同期にダウンロードされ、完了次第すぐ実行され順序は保証されない

     正解：エ．非同期にダウンロードされ、完了次第すぐ実行され順序は保証されない

     解説：asyncはHTMLの解析と並行してスクリプトを取得し、取得が終わった時点で解析を中断して即座に実行する。したがって複数指定した場合の実行順は取得の速さ次第で保証されず、他のスクリプトに依存しないアクセス解析タグなどに向く。順序を保ちたい場合はdeferを使う。

408. 問408．ブラウザのタブやブックマークに表示されるサイトアイコンの呼称はどれか。

     • ア．ファビコン
     • イ．サムネイル
     • ウ．スプライト
     • エ．ロゴマーク

     正解：ア．ファビコン

     解説：ファビコン（favicon＝favorite icon）は、ブラウザのタブやブックマーク、履歴一覧などに表示されるサイトの小さなアイコン。<link rel="icon" href="..."> で指定し、複数サイズを用意しておくと表示先に応じて使い分けられる。

409. 問409．複数の画像を1枚にまとめHTTPリクエストを減らす手法の名称はどれか。

     • ア．フルードイメージ
     • イ．CSSスプライト
     • ウ．レイジーロード
     • エ．画像マップ

     正解：イ．CSSスプライト

     解説：CSSスプライトは、アイコンなど小さな画像を1枚の画像にまとめ、background-positionで表示位置をずらして必要な部分だけを見せる手法。画像ごとにHTTPリクエストが発生するのを避けて表示を速くする狙いがある。HTTP/2の多重化やSVGアイコンの普及で必要性は下がっている。

410. 問410．ブラウザ間のデフォルトスタイル差をなくしつつ有用な既定値を残す手法はどれか。

     • ア．リセットCSS
     • イ．CSSスプライト
     • ウ．ノーマライズCSS
     • エ．インラインCSS

     正解：ウ．ノーマライズCSS

     解説：ノーマライズCSSは、ブラウザ間で異なる既定スタイルを揃えつつ、見出しの大きさなど有用な既定値は残す方針を取る。すべての既定値を一律にゼロにするリセットCSSと違い、必要なスタイルを一から書き直す手間が少ない点が特徴。

411. 問411．ウィンドウ幅に応じてコンテンツ幅が%等で伸縮するレイアウトの呼称はどれか。

     • ア．固定レイアウト
     • イ．印刷レイアウト
     • ウ．グリッド固定レイアウト
     • エ．リキッドレイアウト

     正解：エ．リキッドレイアウト

     解説：リキッド（フルード）レイアウトは幅を%などの相対値で指定するため、ウィンドウ幅に応じてコンテンツが伸縮する。pxで固定する固定レイアウトと異なり、狭い画面でも横スクロールが出にくいが、広すぎる画面では行長が伸びすぎるためmax-widthの併用が定石。

412. 問412．フルードグリッドでターゲット幅の%値を求める計算式として正しいものはどれか。

     • ア．対象幅 ÷ 親要素幅 × 100
     • イ．対象幅 × 親要素幅 ÷ 100
     • ウ．親要素幅 ÷ 対象幅 × 100
     • エ．対象幅 ÷ 100 × 親要素幅

     正解：ア．対象幅 ÷ 親要素幅 × 100

     解説：フルードグリッドでは「目標とする幅 ÷ 親要素（コンテキスト）の幅 × 100」で%値を求める。たとえば960px幅の中で300pxの列を作るなら 300÷960×100＝31.25% となる。親を基準に割合を出すという考え方が要点。

413. 問413．viewportで縮小できる最小倍率を指定するプロパティはどれか。

     • ア．initial-scale
     • イ．minimum-scale
     • ウ．maximum-scale
     • エ．user-scalable

     正解：イ．minimum-scale

     解説：minimum-scaleは利用者が縮小できる下限の倍率を指定する。initial-scaleは読み込み時の初期倍率、maximum-scaleは拡大の上限、user-scalableはズーム操作そのものの可否を指定するもので、それぞれ役割が異なる。

414. 問414．HTTPのGETメソッドは、サーバーからリソースを取得するために使用される。

     正解：○（正しい）

     解説：GETはサーバー上のリソースを取得するためのメソッドで、サーバーの状態を変更しない安全なメソッドとされる。何度実行しても結果が変わらない冪等性も持つため、ブラウザが自由に再送したりキャッシュしたりできる。パラメータはURLのクエリ文字列として送られるので、機密情報の送信には向かない。

415. 問415．HTTPのHEADメソッドは、レスポンスボディ(本体)を含めてヘッダ情報を取得する。

     正解：×（誤り）

     解説：誤り。HEADはGETと同じヘッダだけを返し、ボディは含まない。ファイルの更新日時やサイズ、リンク先が生きているかを、本体をダウンロードせずに確認したいときに使う。

416. 問416．HTTPのPUTメソッドは、指定したURIにリソースを置き換える(または作成する)際に使用される。

     正解：○（正しい）

     解説：PUTは指定したURIにリソースを丸ごと置き換える（存在しなければ作成する）メソッド。同じ内容を何度送っても結果が同じになる冪等性を持つ点が、送るたびに新しいリソースが増えうるPOSTとの違い。

417. 問417．ステータスコード404は、サーバー内部でエラーが発生したことを示す。

     正解：×（誤り）

     解説：誤り。正しくは404はリソースが見つからない(Not Found)を示し、サーバー内部エラーは500である。

418. 問418．ステータスコード301は、リソースが恒久的に別のURIへ移動したことを示す。

     正解：○（正しい）

     解説：301 Moved Permanentlyは恒久的な移動を示し、ブラウザや検索エンジンは以後そのURIを新しいものへ置き換えて扱う。一時的な移動を示す302とは異なり、検索評価も引き継がれるため、サイト移転やHTTPS化のリダイレクトでは301を使う。

419. 問419．ステータスコード302は、リソースが恒久的に移動したことを示す。

     正解：×（誤り）

     解説：誤り。正しくは302はFound(一時的な移動)を示し、恒久的な移動は301である。

420. 問420．ステータスコード304は、リソースが未更新でありキャッシュが利用可能であることを示す。

     正解：○（正しい）

     解説：304 Not Modifiedは、条件付きリクエスト（If-Modified-SinceやIf-None-Match）に対して「前回から変わっていない」と答えるもの。ボディを返さないので通信量を大幅に削減でき、クライアントは手元のキャッシュをそのまま使う。

421. 問421．ステータスコード500は、クライアントのリクエストが不正であることを示す。

     正解：×（誤り）

     解説：誤り。正しくは500はサーバー内部エラーを示し、不正なリクエストは400である。

422. 問422．ステータスコード403は、サーバーがリクエストを理解したが認可されず処理を拒否したことを示す。

     正解：○（正しい）

     解説：403 Forbiddenは、サーバーがリクエスト自体は理解したうえで、権限がないため実行を拒否した状態。認証すればアクセスできる可能性がある401 Unauthorizedと違い、認証をやり直しても通らないという点が異なる。

423. 問423．ステータスコードの4xx系はサーバー側のエラーを表す。

     正解：×（誤り）

     解説：誤り。4xxはクライアント側に原因があるエラー（404 Not Found、403 Forbiddenなど）、5xxはサーバー側に原因があるエラー（500 Internal Server Errorなど）。1xxは情報、2xxは成功、3xxはリダイレクトを表す。

424. 問424．HTTP/2では、1つのTCP接続上で複数のリクエスト/レスポンスを多重化できる。

     正解：○（正しい）

     解説：HTTP/1.1では1つの接続で1つのリクエストを順に処理するため、前の応答が遅いと後続が待たされた（Head-of-Line ブロッキング）。HTTP/2はリクエストとレスポンスをストリームに分けて多重化し、1本のTCP接続で並行してやりとりできるようにした。ヘッダ圧縮やサーバープッシュも導入されている。

425. 問425．HTTP/1.1はバイナリ形式、HTTP/2はテキスト形式でメッセージをやり取りする。

     正解：×（誤り）

     解説：誤り。正しくはHTTP/1.1がテキスト形式、HTTP/2がバイナリ形式である。

426. 問426．HTTP/1.1ではKeep-Aliveにより1つのTCP接続を継続して使い回すことができる。

     正解：○（正しい）

     解説：接続のたびにTCPのハンドシェイクをやり直すのは無駄が大きいため、HTTP/1.1では持続的接続（Keep-Alive）が既定になり、1つの接続を複数のリクエストで使い回せる。接続を閉じたい場合はConnection: closeを明示する。

427. 問427．HTTPはステートフルなプロトコルであり、各リクエスト間で状態を自動的に保持する。

     正解：×（誤り）

     解説：誤り。HTTPはステートレスで、各リクエストは独立して扱われ前回の状態を覚えていない。これが実装を単純にし拡張性を高めている一方、ログイン状態などを保つにはcookieやセッションといった仕組みを別途使う必要がある。

428. 問428．cookieはサーバーがSet-Cookieヘッダで発行し、クライアントはCookieヘッダで送り返す。

     正解：○（正しい）

     解説：サーバーはレスポンスのSet-Cookieヘッダで値を渡し、ブラウザはそれを保存して以後同じサイトへのリクエストにCookieヘッダとして自動的に付ける。これによりステートレスなHTTPでもログイン状態などを維持できる。HttpOnly・Secure・SameSite属性で安全性を高められる。

429. 問429．Basic認証では、ユーザー名とパスワードが暗号化されて送信される。

     正解：×（誤り）

     解説：誤り。正しくはBasic認証はBase64でエンコードされるだけで暗号化されない。

430. 問430．Digest認証は、パスワードそのものではなくハッシュ化した値を送信するためBasic認証より安全とされる。

     正解：○（正しい）

     解説：Basic認証はIDとパスワードをBase64で符号化するだけなので、盗聴されれば容易に復元できる。Digest認証はサーバーが渡すnonceとパスワードからハッシュ値を計算して送るため、通信路にパスワードそのものが流れない。ただし現在はHTTPSで通信全体を暗号化するのが基本。

431. 問431．HTTPSはSSL/TLSによって通信内容を暗号化するHTTP通信である。

     正解：○（正しい）

     解説：HTTPS はHTTPをSSL/TLSの上で通信させる方式で、盗聴を防ぐ暗号化、改ざんを検知する完全性の確認、サーバー証明書による接続先の真正性確認の3つを同時に実現する。現在は個人情報を扱わないページも含め常時HTTPS化が標準になっている。

432. 問432．HTTPSの標準ポート番号は80である。

     正解：×（誤り）

     解説：誤り。HTTPSの標準ポートは443で、80はHTTPのポート。URLでポートを省略した場合、スキームに応じて自動的にこの既定値が使われる。

433. 問433．Content-Typeヘッダは、送受信するデータのメディアタイプ(MIMEタイプ)を示す。

     正解：○（正しい）

     解説：Content-Typeはボディがどんな種類のデータかをtext/html、application/json、image/pngのように示すヘッダ。ブラウザはこの値を見て表示方法を決めるため、指定を誤ると意図しない解釈をされる。文字コードはcharsetパラメータで併記する。

434. 問434．Authorizationヘッダは、認証情報をサーバーへ送るレスポンスヘッダである。

     正解：×（誤り）

     解説：誤り。正しくはAuthorizationは認証情報を送るリクエストヘッダである。

435. 問435．URIはリソースを識別するための統一的な識別子の総称であり、URLはその一種である。

     正解：○（正しい）

     解説：URIはリソースを識別するための総称で、その下位概念として「どこにあるか（場所）」で識別するURLと、「何であるか（名前）」で識別するURNがある。日常的にはURLという語が使われるが、仕様上の上位概念はURIである点を押さえる。

436. 問436．http://example.com:8080/path?key=value のうち、8080はポート番号を表す。

     正解：○（正しい）

     解説：URIはスキーム（http）、ホスト（example.com）、ポート（8080）、パス（/path）、クエリ（key=value）などの部品からなる。ホスト名の後のコロンに続く数値がポート番号で、省略時はスキームの既定値（HTTPは80、HTTPSは443）が使われる。

437. 問437．HTML5の文字エンコーディング指定は <meta charset="UTF-8"> のように記述する。

     正解：○（正しい）

     解説：HTML5では従来の長いhttp-equiv形式に代えて<meta charset="UTF-8">と簡潔に書ける。文字コードの指定はできるだけhead要素の先頭付近に置く必要があり、遅れるとブラウザが誤った文字コードで解釈を始めて文字化けの原因になる。

438. 問438．html要素のlang属性は、文書の自然言語を指定するために使用される。

     正解：○（正しい）

     解説：lang属性は文書の自然言語（日本語ならja）を示す。スクリーンリーダーが正しい言語で読み上げる、ブラウザが翻訳を提案する、検索エンジンが言語を判別するといった処理の手がかりになるため、アクセシビリティの観点からも指定が推奨される。

439. 問439．文字参照 &lt; は大なり記号(>)を表す。

     正解：×（誤り）

     解説：誤り。&lt; は小なり記号（<）を表し、大なり記号（>）は &gt; である。lはless（より小さい）、gはgreater（より大きい）の頭文字と覚えるとよい。タグの開始と誤解されないよう、本文中の不等号は文字参照で書く。

440. 問440．文字参照 &nbsp; は改行しないスペース(ノーブレークスペース)を表す。

     正解：○（正しい）

     解説：&nbsp;（non-breaking space）はそこで行が折り返されない空白を表す。「10 kg」のように数値と単位を離したくない場合などに使う。通常の空白と違い連続しても1つにまとめられないため、レイアウト目的での多用は避ける。

441. 問441．文字参照 &yen; はアンパサンド(&)を表す。

     正解：×（誤り）

     解説：誤り。&yen; は円記号（¥）を表し、アンパサンド（&）は &amp; である。&は文字参照そのものの開始記号なので、本文中で&を表示したい場合は必ず &amp; と書く必要がある。

442. 問442．title要素はbody要素内に記述する。

     正解：×（誤り）

     解説：誤り。title要素はhead要素内に記述する。文書のタイトルはブラウザのタブや検索結果、ブックマークの名前として使われるメタ情報であり、ページ本文として表示されるコンテンツではないため。

443. 問443．link要素は、外部CSSファイルなどの関連リソースを文書に関連付ける際に用いられる。

     正解：○（正しい）

     解説：link要素は現在の文書と外部リソースとの関係をrel属性で示す。rel="stylesheet"で外部CSSを読み込むほか、rel="icon"でファビコン、rel="canonical"で正規URLを指定するなど用途が広い。終了タグを持たない空要素である。

444. 問444．meta要素は終了タグを持つ通常要素である。

     正解：×（誤り）

     解説：誤り。meta要素は内容を持たない空要素で、終了タグを書かない。同じく空要素にはlink・img・br・hr・inputなどがあり、いずれも属性だけで情報を表す。

445. 問445．PNGは可逆圧縮の画像フォーマットであり、画質を劣化させずに圧縮できる。

     正解：○（正しい）

     解説：PNGは可逆圧縮の画像形式で、圧縮しても画質が劣化しない。透過（アルファチャンネル）にも対応する。

446. 問446．JPEGは可逆圧縮であり、保存を繰り返しても画質が劣化しない。

     正解：×（誤り）

     解説：誤り。JPEGは人間の目に感じにくい情報を捨てて圧縮する非可逆圧縮なので、編集して保存し直すたびに劣化が蓄積する。可逆圧縮で劣化しないのはPNGやGIFのほうである。

447. 問447．GIFは最大256色までしか扱えない画像フォーマットである。

     正解：○（正しい）

     解説：GIFは1ピクセルを8ビットで表すインデックスカラー方式のため、同時に使える色は最大256色。色数が少ないイラストやアイコン、単純なアニメーションには向くが、写真のように階調が豊かな画像には適さない。

448. 問448．JPEGは透過(透明)情報を保持できる。

     正解：×（誤り）

     解説：誤り。JPEGは透過情報を持てない。透過を扱えるのは、1色を透明として指定できるGIFと、アルファチャンネルで滑らかな半透明まで表現できるPNGである。

449. 問449．PNGはアルファチャンネルによる半透明表現に対応している。

     正解：○（正しい）

     解説：PNGは各ピクセルに不透明度を表すアルファチャンネルを持てるため、影やぼかしのように徐々に透ける表現ができる。GIFが1色を完全に透明とするか否かの二択しか扱えないのに対し、境界がなめらかになるのが利点。

450. 問450．インタレースは、画像を一度に全体表示してから一部を消す表示方式である。

     正解：×（誤り）

     解説：誤り。インタレース（PNGではAdam7）は、まず粗い全体像を表示し、読み込みが進むにつれて段階的に鮮明にしていく方式。回線が遅くても全体の雰囲気を早く把握できる利点がある。

451. 問451．Ajaxは、ページ全体を再読み込みせずにサーバーと非同期通信を行う技術である。

     正解：○（正しい）

     解説：AjaxはJavaScriptからXMLHttpRequestやFetch APIでサーバーと非同期に通信し、受け取った結果でページの一部だけを書き換える技術。ページ全体を再読み込みしないので待ち時間が短く、画面のちらつきもない。地図の操作や入力候補の表示が典型例。

452. 問452．Data URIスキームを使うと、画像などのデータをHTMLやCSS内に直接埋め込める。

     正解：○（正しい）

     解説：Data URIは data:image/png;base64,... のようにデータ本体をURIとして直接書く仕組み。小さな画像やアイコンを埋め込めばHTTPリクエストを減らせる一方、Base64化でデータ量が約1.3倍に増え、キャッシュも効きにくくなるため、大きなファイルには向かない。

453. 問453．DOMは、HTML文書を木構造として表現しプログラムから操作可能にする仕組みである。

     正解：○（正しい）

     解説：DOMはHTML文書を要素・属性・テキストをノードとする木構造として表現し、JavaScriptから取得・追加・変更・削除できるようにする仕組み。この木構造があるからこそ、CSSのセレクタで要素を指定したり、スクリプトで動的にページを書き換えたりできる。

454. 問454．MVCアーキテクチャのViewは、データベースとのやり取りやビジネスロジックを担当する。

     正解：×（誤り）

     解説：誤り。Viewが担当するのは表示（ユーザーインタフェース）で、データとビジネスロジックを担うのはModel。Controllerは入力を受け取ってModelとViewを仲介する。責務を分けることで、見た目の変更がロジックに影響しないようにするのが狙い。

455. 問455．カスタムデータ属性は data-* の形式で記述し、任意のデータをHTML要素に持たせられる。

     正解：○（正しい）

     解説：data-price="1000" のように data- で始まる任意の属性を定義でき、JavaScriptからは dataset.price として取り出せる。独自属性を勝手に作ると仕様違反になるが、data-*なら妥当なHTMLのまま要素にデータを持たせられる。

456. 問456．cookieはWebサイトをまたいで全ドメインのデータを自由に共有できる仕組みである。

     正解：×（誤り）

     解説：誤り。正しくはcookieはドメインやパスの制約があり任意のドメインで共有できない。

457. 問457．PNGはGIFと同様に256色までしか扱えない。

     正解：×（誤り）

     解説：誤り。正しくはPNGはフルカラー(24/32ビット)に対応し256色制限はない。

458. 問458．style要素はbody要素内にしか記述できず、head内には書けない。

     正解：×（誤り）

     解説：誤り。正しくはstyle要素は通常head内に記述する(条件付きでbody内も可)。

459. 問459．HTTPで「リソースが見つからない」ことを示すステータスコードはどれか。

     • ア．200
     • イ．301
     • ウ．404
     • エ．500

     正解：ウ．404

     解説：404 Not Foundは、サーバーには接続できたがそのURIに対応するリソースが存在しない状態。200は成功、301は恒久的な移動、500はサーバー内部エラーで、いずれも意味が異なる。4xxはクライアント側に原因があるエラーを表す。

460. 問460．サーバー内部でエラーが発生したことを示すステータスコードはどれか。

     • ア．500
     • イ．403
     • ウ．302
     • エ．400

     正解：ア．500

     解説：500 Internal Server Errorは、サーバー側のプログラムや設定の問題で処理を完了できなかったことを示す。5xxはサーバー側の原因、4xxはクライアント側の原因という区別で覚える。403は権限不足、400はリクエストの構文誤り、302は一時的な移動。

461. 問461．リソースが恒久的に別URIへ移動したことを示すステータスコードはどれか。

     • ア．302
     • イ．304
     • ウ．200
     • エ．301

     正解：エ．301

     解説：301 Moved Permanentlyが恒久的な移動。ブラウザや検索エンジンは以後URIを置き換えて扱い、検索評価も引き継がれる。302は一時的な移動なので元のURIが維持され、304は未更新、200は成功を表す。

462. 問462．キャッシュが有効で再取得が不要なことを示すステータスコードはどれか。

     • ア．200
     • イ．304
     • ウ．404
     • エ．403

     正解：イ．304

     解説：304 Not Modifiedは、条件付きリクエストに対して前回から変更がないことを示す応答。ボディを返さないため通信量を節約でき、クライアントは手元のキャッシュをそのまま利用する。200は本体を返す成功、404は不存在、403は権限拒否。

463. 問463．HTTPSが標準で使用するポート番号はどれか。

     • ア．80
     • イ．8080
     • ウ．443
     • エ．21

     正解：ウ．443

     解説：HTTPS（SSL/TLS）の標準ポート番号は443である。なお平文のHTTPは80番を使用する。

464. 問464．サーバーからリソースを取得する目的で使われるHTTPメソッドはどれか。

     • ア．GET
     • イ．POST
     • ウ．DELETE
     • エ．PUT

     正解：ア．GET

     解説：GETはリソースの取得に用いるメソッドで、サーバーの状態を変えない安全なメソッドとされる。POSTはデータの送信・登録、PUTは置き換え、DELETEは削除に用いるもので、いずれも取得を目的とはしていない。

465. 問465．レスポンスのヘッダ情報のみを取得し、ボディを返さないHTTPメソッドはどれか。

     • ア．GET
     • イ．HEAD
     • ウ．OPTIONS
     • エ．POST

     正解：イ．HEAD

     解説：HEADはGETと同じヘッダだけを返しボディを含まない。本体をダウンロードせずに更新日時・サイズ・リンクの生死を確認したいときに使う。OPTIONSは利用可能なメソッドの問い合わせ、POSTはデータ送信で目的が異なる。

466. 問466．指定したリソースの削除を要求するHTTPメソッドはどれか。

     • ア．PUT
     • イ．POST
     • ウ．HEAD
     • エ．DELETE

     正解：エ．DELETE

     解説：DELETEメソッドは、指定したリソースの削除をサーバーに要求するHTTPメソッドである。

467. 問467．送受信データのメディアタイプ(MIMEタイプ)を示すHTTPヘッダはどれか。

     • ア．Content-Type
     • イ．Accept
     • ウ．Cache-Control
     • エ．Authorization

     正解：ア．Content-Type

     解説：Content-Typeはボディのメディアタイプ（text/html、application/jsonなど）を示すヘッダ。Acceptはクライアントが受け取れる形式を伝えるリクエスト側のヘッダ、Cache-Controlはキャッシュ制御、Authorizationは認証情報の送信に使う。

468. 問468．クライアントが受理可能なメディアタイプをサーバーへ伝えるリクエストヘッダはどれか。

     • ア．Authorization
     • イ．Accept
     • ウ．Content-Type
     • エ．Set-Cookie

     正解：イ．Accept

     解説：Acceptはクライアントが処理できるメディアタイプをサーバーに伝えるリクエストヘッダで、サーバーはこれをもとに返す形式を選ぶ（コンテントネゴシエーション）。Content-Typeは実際に送るボディの形式を示すもので、向きと役割が異なる。

469. 問469．認証情報をサーバーへ送るために使われるリクエストヘッダはどれか。

     • ア．Accept
     • イ．Cache-Control
     • ウ．Authorization
     • エ．Location

     正解：ウ．Authorization

     解説：Authorizationはクライアントが認証情報をサーバーへ送るリクエストヘッダで、Basic認証やBearerトークンの受け渡しに使う。Acceptは受理可能な形式、Cache-Controlはキャッシュ制御、Locationはリダイレクト先を示すレスポンスヘッダである。

470. 問470．キャッシュの動作を制御するために用いられるHTTPヘッダはどれか。

     • ア．Accept
     • イ．Content-Type
     • ウ．Authorization
     • エ．Cache-Control

     正解：エ．Cache-Control

     解説：Cache-Controlはmax-ageやno-store、no-cacheといった指示子でキャッシュの可否と有効期間を制御するヘッダ。リクエスト・レスポンスの双方で使え、HTTP/1.0のExpiresより細かく指定できるため現在の標準となっている。

471. 問471．Basic認証で送信される認証情報の符号化方式はどれか。

     • ア．AES暗号化
     • イ．Base64エンコード
     • ウ．MD5ハッシュ
     • エ．RSA暗号化

     正解：イ．Base64エンコード

     解説：Basic認証は「ID:パスワード」をBase64でエンコードしてAuthorizationヘッダに載せるだけで、暗号化ではない。Base64は誰でも復元できるので、平文で送っているのとほぼ同じ。必ずHTTPSと併用する必要がある。

472. 問472．バイナリデータをテキストとして扱えるよう変換する符号化方式はどれか。

     • ア．URLエンコード
     • イ．ROT13
     • ウ．Base64
     • エ．Gzip

     正解：ウ．Base64

     解説：Base64はバイナリデータを6ビットずつ区切り、A〜Z・a〜z・0〜9・+・/の64種類の文字に置き換える方式。テキストしか扱えない経路（メールやHTTPヘッダ、Data URI）でバイナリを運ぶために使う。暗号化ではないため秘匿性はなく、データ量は約1.3倍に増える。

473. 問473．ページ全体を再読み込みせず非同期にサーバーと通信する技術はどれか。

     • ア．CGI
     • イ．SSI
     • ウ．RSS
     • エ．Ajax

     正解：エ．Ajax

     解説：Ajaxはページ全体を再読み込みせず、非同期にサーバーと通信してページの一部だけを更新する技術。

474. 問474．非可逆圧縮で、写真などに適し透過に対応しない画像フォーマットはどれか。

     • ア．JPEG
     • イ．PNG
     • ウ．GIF
     • エ．BMP

     正解：ア．JPEG

     解説：JPEGは人間の目に感じにくい情報を捨てて圧縮する非可逆方式で、階調の豊かな写真を小さいサイズにできる反面、透過は扱えず、保存を繰り返すと劣化が蓄積する。PNGは可逆で透過対応、GIFは256色、BMPは基本的に無圧縮。

475. 問475．可逆圧縮かつアルファチャンネルによる半透明に対応する画像フォーマットはどれか。

     • ア．JPEG
     • イ．PNG
     • ウ．BMP
     • エ．JPEG 2000

     正解：イ．PNG

     解説：PNGは可逆圧縮なので何度保存しても劣化せず、アルファチャンネルにより滑らかな半透明を表現できる。JPEGは非可逆で透過非対応、BMPは無圧縮が基本、JPEG 2000はブラウザの対応が限られており、いずれも条件を満たさない。

476. 問476．最大256色までで、アニメーションにも対応する画像フォーマットはどれか。

     • ア．PNG
     • イ．JPEG
     • ウ．GIF
     • エ．BMP

     正解：ウ．GIF

     解説：GIFは8ビットのインデックスカラーで最大256色、複数フレームを持たせてアニメーションを表現できる。PNGは色数が多く可逆だが標準では単一画像（APNGは別仕様）、JPEGは写真向けで透過もアニメーションも非対応、BMPは無圧縮の静止画。

477. 問477．一般に圧縮を行わずファイルサイズが大きくなりやすい画像フォーマットはどれか。

     • ア．JPEG
     • イ．GIF
     • ウ．PNG
     • エ．BMP

     正解：エ．BMP

     解説：BMPはピクセルの色情報をほぼそのまま並べる無圧縮形式が基本なので、同じ画像でも他の形式よりファイルサイズが大きくなる。JPEG・GIF・PNGはいずれも圧縮を行うため、Web配信ではこれらが使われる。

478. 問478．入力値を悪用して不正なSQL文を実行させる攻撃はどれか。

     • ア．SQLインジェクション
     • イ．XSS
     • ウ．CSRF
     • エ．ディレクトリトラバーサル

     正解：ア．SQLインジェクション

     解説：入力値がそのままSQL文に連結されることを悪用し、条件を常に真にしたり別のSQLを実行させたりして、情報の窃取や改ざんを行う攻撃。対策はプレースホルダ（プリペアドステートメント）を使って値と命令を分離することで、単純な文字のエスケープだけに頼るのは危険とされる。

479. 問479．Webページに悪意あるスクリプトを埋め込み閲覧者のブラウザで実行させる攻撃はどれか。

     • ア．SQLインジェクション
     • イ．クロスサイトスクリプティング
     • ウ．CSRF
     • エ．セッションハイジャック

     正解：イ．クロスサイトスクリプティング

     解説：利用者の入力がそのままHTMLとして出力されることを悪用し、閲覧者のブラウザ上で攻撃者のスクリプトを実行させる攻撃。cookieの窃取や偽の入力フォーム表示につながる。対策は出力時のエスケープが基本で、cookieにHttpOnly属性を付けることも被害の緩和に有効。

480. 問480．利用者の意図しないリクエストを送信させ、なりすまし操作を行わせる攻撃はどれか。

     • ア．XSS
     • イ．SQLインジェクション
     • ウ．CSRF
     • エ．DoS

     正解：ウ．CSRF

     解説：ログイン済みの利用者に、攻撃者が用意した罠のページから意図しないリクエストを送信させ、本人になりすまして操作を行わせる攻撃。ブラウザがcookieを自動送信する性質を悪用する。対策はトークンを埋め込んで正規の画面からの送信か検証すること、cookieにSameSite属性を付けることなど。

481. 問481．相対パスなどを悪用し公開範囲外のファイルへアクセスする攻撃はどれか。

     • ア．XSS
     • イ．CSRF
     • ウ．SQLインジェクション
     • エ．ディレクトリトラバーサル

     正解：エ．ディレクトリトラバーサル

     解説：ファイル名のパラメータに「../」などの相対パスを混ぜ、公開範囲の外にある設定ファイルやパスワードファイルへアクセスする攻撃。対策はパスをそのまま受け取らず、正規化したうえで許可された範囲内かを検証すること。

482. 問482．HTML文書をツリー構造で表現しプログラムから操作可能にする仕組みはどれか。

     • ア．DOM
     • イ．SAX
     • ウ．JSON
     • エ．XSLT

     正解：ア．DOM

     解説：DOM（Document Object Model）はHTML文書をツリー構造で表現し、プログラムから要素を操作可能にする仕組み。

483. 問483．アプリケーションをModel・View・Controllerに分離する設計手法はどれか。

     • ア．MVC
     • イ．MVVM
     • ウ．MVP
     • エ．SPA

     正解：ア．MVC

     解説：MVCはデータとビジネスロジックを担うModel、表示を担うView、入力を受けて両者を仲介するControllerに責務を分ける設計手法。役割を分離することで、見た目の変更がロジックに波及せず、テストや分業がしやすくなる。MVVMやMVPはその派生形。

484. 問484．任意の独自データをHTML要素に持たせるために用いる属性はどれか。

     • ア．aria-*
     • イ．data-*属性
     • ウ．role属性
     • エ．rel属性

     正解：イ．data-*属性

     解説：data-*属性は仕様として認められたカスタムデータ属性で、JavaScriptからdatasetで読み書きできる。role属性やaria-*属性はアクセシビリティのために意味や状態を伝えるもの、rel属性はリンク先との関係を示すもので、いずれも任意のデータ置き場ではない。

485. 問485．アンパサンド(&)を表す文字参照はどれか。

     • ア．&lt;
     • イ．&gt;
     • ウ．&amp;
     • エ．&nbsp;

     正解：ウ．&amp;

     解説：アンパサンド（&）を表す文字参照は &amp; である。なお < と > はそれぞれ &lt; と &gt; で表す。

486. 問486．複数のリクエストにまたがり利用者の状態を保持する仕組みはどれか。

     • ア．キャッシュ
     • イ．リダイレクト
     • ウ．プロキシ
     • エ．セッション

     正解：エ．セッション

     解説：HTTPはステートレスなので、サーバー側に利用者ごとの情報を保存し、cookieなどで渡したセッションIDと結び付けて状態を維持する。これがセッションで、ログイン状態やカート内容の保持に使われる。キャッシュ・リダイレクト・プロキシはいずれも状態保持の仕組みではない。

487. 問487．HTML内に意味(セマンティクス)を付与してデータを構造化する仕組みはどれか。

     • ア．マイクロデータ
     • イ．Data URI
     • ウ．Ajax
     • エ．Base64

     正解：ア．マイクロデータ

     解説：マイクロデータはitemscope・itemtype・itempropといった属性でHTML内の要素に意味を与え、検索エンジンなどが人名・住所・商品価格といった情報を機械的に読み取れるようにする仕組み。同じ目的の手法にRDFaやJSON-LDがある。

488. 問488．HTML5で文字エンコーディングを指定する正しい記述はどれか。

     • ア．<charset>UTF-8</charset>
     • イ．<meta charset="UTF-8">
     • ウ．<meta encoding="UTF-8">
     • エ．<html charset="UTF-8">

     正解：イ．<meta charset="UTF-8">

     解説：HTML5では<meta charset="UTF-8">と簡潔に書く。charsetという専用の要素は存在せず、meta要素のencoding属性やhtml要素のcharset属性も定義されていない。文字化けを防ぐため、この記述はhead要素のできるだけ先頭に置く。