HTML5プロフェッショナル認定試験 レベル1 全分野の一問一答
📖 HTML5プロフェッショナル認定試験 レベル1「全分野」の全488問と解説(一覧)
HTML5プロフェッショナル認定試験 レベル1の全分野に関する一問一答(全488問)の正解と解説の一覧です。上の一問一答で実際に解いてから、ここで復習・確認できます。
-
問1.Canvas APIはピクセル単位のビットマップ画像を動的に描画するためのAPIである。
正解:○(正しい)
解説:Canvasは2Dコンテキストでビットマップ(ラスター)描画を行うAPIである。
-
問2.SVGは拡大・縮小しても画質が劣化しないベクター形式のグラフィックスを扱う。
正解:○(正しい)
解説:SVGはベクター形式のため拡大縮小しても劣化しない。
-
問3.Canvasで描画した図形は、描画後もそれぞれが個別のDOM要素として保持される。
正解:×(誤り)
解説:誤り。正しくは、Canvasはピクセルへ直接描画するため個々の図形はDOM要素として保持されない。要素単位で扱えるのはSVG。
-
問4.SVGはピクセルへ直接描画する方式のため、描画した図形はDOM要素として保持されず個別に操作できない。
正解:×(誤り)
解説:誤り。正しくは、SVGはXMLベースでDOMツリーに含まれ、要素単位でCSSやJavaScriptから個別操作できる。ピクセルへ直接描画しDOM要素を保持しないのはCanvas。
-
問5.多数の図形を頻繁に再描画するゲームなどではCanvasが、図形数が少なく拡大縮小を伴う図表ではSVGが適している。
正解:○(正しい)
解説:高頻度描画はCanvas、ベクター図表はSVGが適する。
-
問6.Canvasはベクター形式のため、拡大しても画像が荒くならない。
正解:×(誤り)
解説:誤り。正しくは、Canvasはビットマップ(ラスター)形式のため拡大すると荒くなる。ベクター形式はSVG。
-
問7.video要素やaudio要素はプラグインなしでメディアを再生できる。
正解:○(正しい)
解説:HTML5のvideo/audio要素はプラグイン不要でメディア再生が可能。
-
問8.HLSやMPEG-DASHは、ネットワーク状況に応じて画質を切り替えるアダプティブストリーミングの技術である。
正解:○(正しい)
解説:HLS/MPEG-DASHは回線状況に応じ画質を切り替えるアダプティブビットレート配信技術。
-
問9.Media Source Extensions(MSE)は、DRMで保護された暗号化メディアの復号と再生制御を担うAPIである。
正解:×(誤り)
解説:誤り。正しくは、MSEはJavaScriptで生成したメディアセグメントをvideo要素へ供給する仕組みである。DRM保護メディアの復号・再生制御を担うのはEncrypted Media Extensions(EME)。
-
問10.Encrypted Media Extensions(EME)は、DRMで保護された暗号化メディアの再生を可能にするAPIである。
正解:○(正しい)
解説:EMEはDRM保護コンテンツの復号・再生制御を扱うAPI。
-
問11.MPEG-DASHは特定のコーデックにのみ対応する規格であり、コーデックに依存しない設計ではない。
正解:×(誤り)
解説:誤り。正しくは、MPEG-DASHはコーデックに依存しない(コーデック非依存の)国際標準のアダプティブストリーミング規格である。
-
問12.Geolocation APIはユーザーの現在の地理的位置(緯度・経度)を取得するためのAPIである。
正解:○(正しい)
解説:Geolocation APIは緯度経度など位置情報を取得する。
-
問13.Geolocation APIは、ユーザーの許可を得なくても無条件に位置情報を取得できる。
正解:×(誤り)
解説:誤り。正しくは、Geolocation APIは位置情報取得にユーザーの許可(同意)が必要である。
-
問14.DeviceOrientation Eventは、端末の現在の地理的位置(緯度・経度)を取得するためのイベントである。
正解:×(誤り)
解説:誤り。正しくは、DeviceOrientation Eventは端末の物理的な傾き・向きを取得する。緯度・経度など地理的位置を取得するのはGeolocation API。
-
問15.Touch Eventsはタッチスクリーン上の指の接触に関するイベントを扱う。
正解:○(正しい)
解説:Touch Eventsはタッチ操作に関するイベントを扱う。
-
問16.Pointer Eventsは、マウス・タッチ・ペンなど複数の入力デバイスを統一的に扱えるイベントモデルである。
正解:○(正しい)
解説:Pointer Eventsはマウス・タッチ・ペンを統一的に扱える。
-
問17.Generic Sensor APIは、マウス・タッチ・ペンなど複数の入力デバイスを統一的に扱うためのイベントモデルである。
正解:×(誤り)
解説:誤り。正しくは、Generic Sensor APIは加速度センサーやジャイロスコープなど各種センサーへ共通アクセスする枠組みである。複数の入力デバイスを統一的に扱うのはPointer Events。
-
問18.DOM3 Events(UI Events)は、キーボードやマウスなどのUI操作に関するイベントモデルを規定する。
正解:○(正しい)
解説:DOM3 Events(UI Events)はUI操作イベントを規定する。
-
問19.localStorageに保存したデータは、ブラウザを閉じると自動的に消去される。
正解:×(誤り)
解説:誤り。正しくは、localStorageは明示的に削除しない限りブラウザを閉じても永続的に保持される。閉じると消えるのはsessionStorage。
-
問20.sessionStorageに保存したデータは、そのタブ(セッション)が閉じられると破棄される。
正解:○(正しい)
解説:sessionStorageはセッション(タブ)終了時に破棄される。
-
問21.Web Storageは同一オリジンの範囲でデータが共有・参照される。
正解:○(正しい)
解説:Web Storageは同一オリジン単位でデータが管理される。
-
問22.Web Storage(localStorage/sessionStorage)は、インデックスによる検索やトランザクションに対応した構造化データベースである。
正解:×(誤り)
解説:誤り。正しくは、Web Storageはキーと値のペアで文字列を保存する単純なストレージである。インデックス検索やトランザクションに対応した構造化DBはIndexedDB。
-
問23.Web Storageはサーバーへのリクエストごとに自動送信される点でCookieと同じである。
正解:×(誤り)
解説:誤り。正しくは、Web Storageはリクエストに自動送信されない。リクエストへ自動付与されるのはCookie。
-
問24.Indexed Database API(IndexedDB)は構造化データを大容量に保存できるクライアント側データベースである。
正解:○(正しい)
解説:IndexedDBは構造化データの大容量保存に対応するクライアントDB。
-
問25.IndexedDBはキー・バリューだけでなくインデックスによる検索が可能なトランザクション型のデータベースである。
正解:○(正しい)
解説:IndexedDBはインデックス検索やトランザクションをサポートする。
-
問26.Web Workersは、メインスレッドとは別のスレッドでJavaScriptをバックグラウンド実行できる。
正解:○(正しい)
解説:Web Workersはバックグラウンドスレッドで処理を実行する。
-
問27.Web WorkersはDOMへ直接アクセスして画面要素を操作できる。
正解:×(誤り)
解説:誤り。正しくは、Web WorkersはDOMへ直接アクセスできない。UI操作はメインスレッドへメッセージで委譲する。
-
問28.Service Workerはネットワークリクエストを横取り(プロキシ)し、キャッシュを使ったオフライン動作を実現できる。
正解:○(正しい)
解説:Service Workerはリクエストを仲介しキャッシュでオフライン対応を可能にする。
-
問29.Service Workerは常にメインスレッド上でWebページと同一のライフサイクルで動作し、ページが閉じられると必ず終了する。
正解:×(誤り)
解説:誤り。正しくは、Service Workerはページとは独立したライフサイクルを持ち、ページが閉じられてもバックグラウンドで動作し続けることがある。
-
問30.Push APIは、構造化データを大容量にクライアント側へ保存するためのデータベースを提供する仕組みである。
正解:×(誤り)
解説:誤り。正しくは、Push APIはService Workerを介してサーバーからのプッシュ通知を受け取る仕組みである。大容量の構造化データ保存を担うのはIndexedDB。
-
問31.Service WorkerはHTTP(非暗号化)でも、どのページでも自由に登録できる。
正解:×(誤り)
解説:誤り。正しくは、Service Workerは原則HTTPS(またはlocalhost)が必要で、セキュアコンテキストでのみ登録できる。
-
問32.XMLHttpRequest(XHR)は、ブラウザ同士がP2Pで音声・映像をリアルタイムにやり取りするためのAPIである。
正解:×(誤り)
解説:誤り。正しくは、XHRはページ遷移なしの非同期通信(Ajax)を実現する仕組みである。ブラウザ間P2Pのリアルタイム通信を担うのはWebRTC。
-
問33.Fetch APIはPromiseベースで設計された、HTTPリクエストを行うための新しいAPIである。
正解:○(正しい)
解説:Fetch APIはPromiseベースのHTTP通信API。
-
問34.WebSocketは、一度確立した接続上でサーバーとクライアントが双方向に通信できる。
正解:○(正しい)
解説:WebSocketは双方向(全二重)通信を可能にする。
-
問35.WebSocketの通信はリクエストごとに毎回新しいコネクションを張り直す方式である。
正解:×(誤り)
解説:誤り。正しくは、WebSocketは一度確立した接続を維持して双方向通信を行う(毎回張り直さない)。
-
問36.Server-Sent Events(SSE)は、確立した接続上でサーバーとクライアントが双方向(全二重)に通信する仕組みである。
正解:×(誤り)
解説:誤り。正しくは、SSEはサーバーからクライアントへの単方向プッシュを行う仕組みである。双方向(全二重)通信を担うのはWebSocket。
-
問37.Server-Sent Eventsはクライアントからサーバーへ任意のデータを送信するための双方向通信技術である。
正解:×(誤り)
解説:誤り。正しくは、SSEはサーバーからクライアントへの単方向通信であり、双方向はWebSocketが担う。
-
問38.WebRTCは、ブラウザ同士がP2Pで音声・映像・データをリアルタイムにやり取りできるAPIである。
正解:○(正しい)
解説:WebRTCはブラウザ間P2Pのリアルタイム通信を実現する。
-
問39.WebRTCはサーバーを必ず経由してすべての音声・映像データを中継する設計である。
正解:×(誤り)
解説:誤り。正しくは、WebRTCは原則ブラウザ間のP2Pでメディアをやり取りする(接続確立にシグナリングは使うが、メディアは直接交換が基本)。
-
問40.Fetch APIで取得したレスポンスのbodyをJSONとして読み取るには、Promiseを返すメソッドを用いる。
正解:○(正しい)
解説:Fetchのレスポンスはjson()などPromiseを返すメソッドでボディを読み取る。
-
問41.WebSocketで使用するURLスキームはhttpまたはhttpsである。
正解:×(誤り)
解説:誤り。正しくは、WebSocketはws://(暗号化はwss://)スキームを用いる。http/httpsはHTTP通信用のスキーム。
-
問42.Web Workersは画像処理や大量計算などの重い処理を、UIをブロックせずに実行するのに役立つ。
正解:○(正しい)
解説:Web Workersは重い処理を別スレッドで行いUIの停止を防ぐ。
-
問43.IndexedDBはWeb Storageに比べて保存できるデータ量が一般に小さい。
正解:×(誤り)
解説:誤り。正しくは、IndexedDBはWeb Storageより大容量のデータ保存に適している。
-
問44.Geolocation APIでは、位置情報の変化を継続的に監視する機能も利用できる。
正解:○(正しい)
解説:Geolocation APIは位置の継続監視(watch)機能も提供する。
-
問45.Canvasに描画した内容は画像データとして書き出すことが一切できない。
正解:×(誤り)
解説:誤り。正しくは、Canvasは描画内容をtoDataURLなどで画像データ(データURL等)として書き出すことができる。
-
問46.ベクター形式で図形を記述し、拡大縮小しても劣化しないグラフィックスAPIはどれか。
- ア.Canvas API
- イ.SVG
- ウ.WebGL
- エ.Media Source Extensions
正解:イ.SVG
解説:SVGはXMLベースのベクター形式で拡大縮小に強い。
-
問47.ピクセル単位のビットマップ描画を行うために用いられるAPIはどれか。
- ア.Canvas API
- イ.SVG
- ウ.Geolocation API
- エ.WebSocket
正解:ア.Canvas API
解説:Canvasはビットマップ(ラスター)描画を行う。
-
問48.ネットワーク状況に応じて画質を切り替えるアダプティブストリーミングの技術はどれか。
- ア.Web Storage
- イ.IndexedDB
- ウ.Pointer Events
- エ.MPEG-DASH
正解:エ.MPEG-DASH
解説:HLSやMPEG-DASHは回線状況で画質を切り替える配信技術。
-
問49.DRMで保護された暗号化メディアの再生を扱うAPIはどれか。
- ア.Media Source Extensions
- イ.WebRTC
- ウ.Encrypted Media Extensions
- エ.Fetch API
正解:ウ.Encrypted Media Extensions
解説:EMEは暗号化(DRM保護)メディアの再生制御を担う。
-
問50.JavaScriptで生成したメディアセグメントをvideo要素へ供給する仕組みを提供するAPIはどれか。
- ア.Media Source Extensions
- イ.Encrypted Media Extensions
- ウ.Geolocation API
- エ.Push API
正解:ア.Media Source Extensions
解説:MSEはJSからメディアストリームをvideo要素に供給する。
-
問51.端末の現在の地理的位置(緯度・経度)を取得するAPIはどれか。
- ア.DeviceOrientation Event
- イ.Generic Sensor API
- ウ.Touch Events
- エ.Geolocation API
正解:エ.Geolocation API
解説:Geolocation APIは位置情報(緯度経度)を取得する。
-
問52.端末の物理的な傾き・向きの情報を取得するAPIはどれか。
- ア.Geolocation API
- イ.Pointer Events
- ウ.DeviceOrientation Event
- エ.WebSocket
正解:ウ.DeviceOrientation Event
解説:DeviceOrientation Eventは端末の傾き・向きを取得する。
-
問53.マウス・タッチ・ペンなど複数の入力デバイスを統一的に扱えるイベントモデルはどれか。
- ア.Pointer Events
- イ.Touch Events
- ウ.DOM3 Events
- エ.DeviceOrientation Event
正解:ア.Pointer Events
解説:Pointer Eventsは多様な入力を統一的に扱える。
-
問54.加速度センサーやジャイロスコープなど各種センサーへ共通の方法でアクセスする枠組みはどれか。
- ア.Touch Events
- イ.Geolocation API
- ウ.Generic Sensor API
- エ.Push API
正解:ウ.Generic Sensor API
解説:Generic Sensor APIはセンサーへの共通アクセス基盤を提供する。
-
問55.ブラウザを閉じても明示的に削除するまでデータが永続的に保持されるストレージはどれか。
- ア.sessionStorage
- イ.Cookie(セッション)
- ウ.メモリキャッシュ
- エ.localStorage
正解:エ.localStorage
解説:localStorageは永続的にデータを保持する。
-
問56.タブ(セッション)が閉じられるとデータが破棄されるストレージはどれか。
- ア.localStorage
- イ.IndexedDB
- ウ.sessionStorage
- エ.Cache Storage
正解:ウ.sessionStorage
解説:sessionStorageはセッション終了時にデータが破棄される。
-
問57.構造化データを大容量にクライアント側へ保存できるデータベースAPIはどれか。
- ア.Web Storage
- イ.Web Workers
- ウ.Server-Sent Events
- エ.Indexed Database API
正解:エ.Indexed Database API
解説:IndexedDBは大容量の構造化データを保存できる。
-
問58.メインスレッドとは別のスレッドでJavaScriptをバックグラウンド実行する仕組みはどれか。
- ア.Service Workers
- イ.Push API
- ウ.Fetch API
- エ.Web Workers
正解:エ.Web Workers
解説:Web Workersは別スレッドでスクリプトを実行する。
-
問59.ネットワークリクエストを横取りしキャッシュを使ったオフライン動作を実現するのはどれか。
- ア.Web Workers
- イ.XMLHttpRequest
- ウ.Service Workers
- エ.WebSocket
正解:ウ.Service Workers
解説:Service Workerはリクエストを仲介しオフライン対応を行う。
-
問60.サーバーからのプッシュ通知をService Worker経由で受信する仕組みを提供するAPIはどれか。
- ア.Push API
- イ.Notifications API
- ウ.Fetch API
- エ.Web Storage
正解:ア.Push API
解説:Push APIはService Workerを介して通知を受信する。
-
問61.ページ全体を再読み込みせずにサーバーと非同期通信を行う、古くからあるAPIはどれか。
- ア.Fetch API
- イ.WebSocket
- ウ.XMLHttpRequest
- エ.Server-Sent Events
正解:ウ.XMLHttpRequest
解説:XMLHttpRequestはAjaxの基盤となる非同期通信API。
-
問62.Promiseベースで設計された、HTTPリクエストを行う新しいAPIはどれか。
- ア.XMLHttpRequest
- イ.WebSocket
- ウ.WebRTC
- エ.Fetch API
正解:エ.Fetch API
解説:Fetch APIはPromiseベースのHTTP通信API。
-
問63.確立した接続上でサーバーとクライアントが双方向(全二重)に通信できるAPIはどれか。
- ア.Server-Sent Events
- イ.Fetch API
- ウ.WebSocket
- エ.XMLHttpRequest
正解:ウ.WebSocket
解説:WebSocketは双方向・全二重通信を実現する。
-
問64.サーバーからクライアントへの単方向データ送信を継続的に行う仕組みはどれか。
- ア.Server-Sent Events
- イ.WebSocket
- ウ.WebRTC
- エ.Fetch API
正解:ア.Server-Sent Events
解説:Server-Sent Eventsはサーバー→クライアント単方向のプッシュを行う。
-
問65.ブラウザ同士がP2Pで音声・映像・データをリアルタイムにやり取りできるAPIはどれか。
- ア.WebSocket
- イ.Server-Sent Events
- ウ.Push API
- エ.WebRTC
正解:エ.WebRTC
解説:WebRTCはブラウザ間P2Pのリアルタイム通信を実現する。
-
問66.次のうち、双方向のリアルタイム通信に適したAPIはどれか。
- ア.Server-Sent Events
- イ.WebSocket
- ウ.Geolocation API
- エ.Web Storage
正解:イ.WebSocket
解説:WebSocketは双方向のリアルタイム通信に適する。SSEは単方向。
-
問67.オフライン時にもアプリを動作させるためのキャッシュ・プロキシの中心となる技術はどれか。
- ア.Service Workers
- イ.Web Workers
- ウ.Web Storage
- エ.Fetch API
正解:ア.Service Workers
解説:Service Workerがオフライン対応のキャッシュ・プロキシを担う。
-
問68.DOM要素として図形を保持し、CSSやスクリプトで個別操作しやすいのはどれか。
- ア.Canvas
- イ.SVG
- ウ.WebGL
- エ.MSE
正解:イ.SVG
解説:SVGの図形はDOMに含まれ個別操作しやすい。
-
問69.高頻度に大量の図形を再描画するゲーム描画に適しているのはどれか。
- ア.SVG
- イ.Canvas
- ウ.DOM3 Events
- エ.Push API
正解:イ.Canvas
解説:高頻度・大量描画はビットマップのCanvasが有利。
-
問70.キーボードやマウスなどのUI操作イベントモデルを規定する仕様はどれか。
- ア.Touch Events
- イ.DOM3 Events
- ウ.Generic Sensor API
- エ.Pointer Events
正解:イ.DOM3 Events
解説:DOM3 Events(UI Events)はUI操作イベントを規定する。
-
問71.タッチスクリーン上の指の接触に特化したイベントを扱うのはどれか。
- ア.Pointer Events
- イ.Touch Events
- ウ.DeviceOrientation Event
- エ.DOM3 Events
正解:イ.Touch Events
解説:Touch Eventsはタッチ操作に特化したイベントを扱う。
-
問72.Web Storageに関する説明として正しいものはどれか。
- ア.リクエストごとにサーバーへ自動送信される
- イ.同一オリジン単位でキーと値を保存する
- ウ.構造化データのインデックス検索ができる
- エ.別スレッドでスクリプトを実行する
正解:イ.同一オリジン単位でキーと値を保存する
解説:Web Storageは同一オリジン単位でキー・バリューを保存する。
-
問73.Service Workerの登録に関する説明として正しいものはどれか。
- ア.どのHTTPページでも自由に登録できる
- イ.原則HTTPS等のセキュアコンテキストが必要
- ウ.DOMを直接操作するために使う
- エ.Cookieの代替として自動送信される
正解:イ.原則HTTPS等のセキュアコンテキストが必要
解説:Service Workerは原則HTTPS等のセキュアコンテキストが必要。
-
問74.Fetch APIの説明として誤っているものはどれか。
- ア.Promiseベースで設計されている
- イ.レスポンスのbodyを非同期に読み取る
- ウ.JSON形式のレスポンスしか扱えない
- エ.HTTPリクエストを発行できる
正解:ウ.JSON形式のレスポンスしか扱えない
解説:FetchはJSON以外にテキストやBlobなど多様な形式を扱える。
-
問75.Web Workersの説明として誤っているものはどれか。
- ア.バックグラウンドスレッドで実行される
- イ.DOMへ直接アクセスできる
- ウ.重い計算でUIをブロックしにくい
- エ.メインスレッドとメッセージでやり取りする
正解:イ.DOMへ直接アクセスできる
解説:Web WorkersはDOMへ直接アクセスできない。
-
問76.タイプセレクタ(要素セレクタ)は、指定した名前のHTML要素すべてにスタイルを適用する。
正解:○(正しい)
解説:pやdivなど要素名を指定し、その種類の全要素を対象とするのがタイプセレクタである。
-
問77.CSSのコメントは、//で始め行末までが対象となる。
正解:×(誤り)
解説:誤り。正しくは、CSSのコメントは/* ... */で囲む形式である。
-
問78.クラスセレクタは、セレクタ名の前にシャープ記号(#)を付けて記述する。
正解:×(誤り)
解説:誤り。正しくは、クラスセレクタはピリオド(.)を前に付ける。#はIDセレクタである。
-
問79.!importantを付けた宣言は、通常の詳細度の計算を上書きして優先的に適用される。
正解:○(正しい)
解説:!importantは詳細度やソース順に優先して適用される特別な指定である。
-
問80.:visited疑似クラスは、まだ訪問していないリンクを選択する。
正解:×(誤り)
解説:誤り。正しくは、:visitedは訪問済みのリンクを選択する。未訪問は:linkである。
-
問81.background(背景)プロパティは、子要素に継承される。
正解:×(誤り)
解説:誤り。正しくは、backgroundは継承しないプロパティである。
-
問82.@import規則は、内部スタイルシート(<style>)の中では使用できない。
正解:×(誤り)
解説:誤り。正しくは、@importはstyle要素内でも先頭であれば使用できる。
-
問83.外部スタイルシートをHTMLに適用するには、head要素内で<link rel="stylesheet" href="style.css">のように記述する。
正解:○(正しい)
解説:link要素のrel属性にstylesheetを指定し、hrefでCSSファイルを参照する正しい記述である。
-
問84.同じid属性値を1つのHTML文書内で複数の要素に付けてもよい。
正解:×(誤り)
解説:誤り。正しくは、id属性値は文書内で一意でなければならない。
-
問85.:last-child疑似クラスは、兄弟要素の中で最後の子要素を選択する。
正解:○(正しい)
解説::last-childは親の中で最後の子要素にマッチする。
-
問86.隣接兄弟結合子(+)は、指定要素の直後にある同じ親を持つ兄弟要素を選択する。
正解:○(正しい)
解説:"h2 + p"はh2の直後にある最初のp(隣接兄弟)を選択する。
-
問87.border(境界線)プロパティは、子要素に継承されるプロパティである。
正解:×(誤り)
解説:誤り。正しくは、borderは継承しないプロパティである。
-
問88.@import規則は、スタイルシート内で他のすべてのCSS規則よりも後ろに記述しなければならない。
正解:×(誤り)
解説:誤り。正しくは、@importは@charsetを除く他のすべての規則よりも前(先頭)に記述する必要がある。
-
問89.::first-line疑似要素は、ブロック要素の最初の行にスタイルを適用する。
正解:○(正しい)
解説:::first-lineはブロックレベル要素のテキスト最初の1行を対象とする。
-
問90.HTML文書内に直接CSSを記述する内部スタイルシートは、<style>要素を使い通常はhead要素内に置く。
正解:○(正しい)
解説:style要素にCSSを記述し、head内に配置するのが一般的である。
-
問91.link要素はbody要素内にのみ記述できる。
正解:×(誤り)
解説:誤り。正しくは、スタイルシート読み込みのlink要素は通常head要素内に記述する。
-
問92.::before疑似要素は、要素の内容の前にコンテンツを生成して挿入する。
正解:○(正しい)
解説:::beforeはcontentプロパティと組み合わせ要素内容の前に生成内容を挿入する。
-
問93.:link疑似クラスは、まだ訪問していないリンクを選択する。
正解:○(正しい)
解説::linkは未訪問のリンク(a要素)にマッチする疑似クラスである。
-
問94.font-sizeプロパティは、子要素に継承されないプロパティである。
正解:×(誤り)
解説:誤り。正しくは、font-sizeはテキスト関連で継承するプロパティである。
-
問95.a:hover, a:focusのように疑似クラスを含むセレクタはグループ化(カンマ区切り)できない。
正解:×(誤り)
解説:誤り。正しくは、疑似クラスを含むセレクタもカンマで区切ってグループ化できる。
-
問96.インラインスタイル(style属性)は、IDセレクタによる指定よりも詳細度が低い。
正解:×(誤り)
解説:誤り。正しくは、インラインスタイルはIDセレクタより詳細度が高い。
-
問97.複数のセレクタにまとめて同じスタイルを適用するには、セレクタをカンマ(,)で区切る。
正解:○(正しい)
解説:"h1, h2, h3"のようにカンマで区切るとグループ化され同じ宣言が適用される。
-
問98.:first-child疑似クラスは、兄弟要素の中で最後の子要素を選択する。
正解:×(誤り)
解説:誤り。正しくは、:first-childは最初の子要素を選択する。最後はlast-childである。
-
問99.ユニバーサルセレクタ(*)は、ルート要素にのみマッチする。
正解:×(誤り)
解説:誤り。正しくは、*はすべての要素にマッチするセレクタである。
-
問100.子結合子(>)は、指定要素の直接の子要素のみを選択する。
正解:○(正しい)
解説:"ul > li"のように>は直接の子要素だけにマッチする。
-
問101.:nth-child(2n+1)は偶数番目の子要素を選択する。
正解:×(誤り)
解説:誤り。正しくは、2n+1はn=0,1,2…で1,3,5…となり奇数番目を選択する。
-
問102.インラインスタイル(style属性)では、セレクタを記述する必要がない。
正解:○(正しい)
解説:style属性は対象要素自身に適用されるため、セレクタは不要で宣言のみを書く。
-
問103.子孫結合子は、セレクタ間を半角スペースで区切って表す。
正解:○(正しい)
解説:"div p"のようにスペースで区切るのが子孫結合子である。
-
問104.:checked疑似クラスは、チェックされたチェックボックスやラジオボタンを選択する。
正解:○(正しい)
解説:チェックや選択状態の入力要素にマッチするのが:checkedである。
-
問105.詳細度が同じ宣言が複数ある場合、後に記述された宣言が優先される(ソース順)。
正解:○(正しい)
解説:詳細度が等しい場合は後から書かれた規則が勝つ(カスケードのソース順)。
-
問106.間接兄弟結合子(~)は、指定要素の直後の1つの兄弟要素だけを選択する。
正解:×(誤り)
解説:誤り。正しくは、~は同じ親を持つ後続のすべての兄弟要素を選択する。
-
問107.:nth-child(2n)は、偶数番目の子要素を選択する。
正解:○(正しい)
解説:2nはn=0,1,2…で2,4,6…となり偶数番目の子要素にマッチする。
-
問108.[href$=".pdf"]は、href属性の値が.pdfで終わる要素を選択する。
正解:○(正しい)
解説:$=は属性値が指定文字列で終わる要素にマッチする。
-
問109.[class*="btn"]は、class属性の値にbtnという文字列を含む要素を選択する。
正解:○(正しい)
解説:*=は属性値に指定文字列を部分的に含む要素にマッチする。
-
問110.[href^="https"]は、href属性の値がhttpsで終わる要素を選択する。
正解:×(誤り)
解説:誤り。正しくは、^=は値が指定文字列で始まる要素を選択する。終わるのは$=である。
-
問111.ユニバーサルセレクタはアスタリスク(*)で表し、すべての要素を対象とする。
正解:○(正しい)
解説:*はすべての要素にマッチするユニバーサル(全称)セレクタである。
-
問112.font-familyプロパティは、子要素に継承される。
正解:○(正しい)
解説:font-familyはテキスト関連のため継承するプロパティである。
-
問113.特定の要素にのみスタイルを適用するインラインスタイルは、要素のstyle属性に記述する。
正解:○(正しい)
解説:style属性に直接プロパティを書くインラインスタイルの説明として正しい。
-
問114.text-alignプロパティは継承しないため、親で指定しても子の文字配置には影響しない。
正解:×(誤り)
解説:誤り。正しくは、text-alignは継承するプロパティである。
-
問115.margin(外側の余白)プロパティは、子要素に継承される。
正解:×(誤り)
解説:誤り。正しくは、marginはボックス関連のため継承しないプロパティである。
-
問116.CSSの詳細度において、IDセレクタはクラスセレクタよりも優先度が高い。
正解:○(正しい)
解説:詳細度はID>クラス/属性/疑似クラス>要素の順で高く、IDが優先される。
-
問117.同一の宣言ブロック内で同じプロパティを2回指定した場合、先に書いた値が優先される。
正解:×(誤り)
解説:誤り。正しくは、同一ブロック内では後に書いた値が優先される。
-
問118.IDセレクタは、セレクタ名の前にシャープ記号(#)を付けて記述する。
正解:○(正しい)
解説:#idname のようにシャープを付けるのがIDセレクタの正しい記述である。
-
問119.:not(.active)は、activeクラスを持つ要素のみを選択する。
正解:×(誤り)
解説:誤り。正しくは、:not()は括弧内の条件に合致しない要素を選択する否定疑似クラスである。
-
問120.::first-letter疑似要素は、ブロック要素の最初の単語にスタイルを適用する。
正解:×(誤り)
解説:誤り。正しくは、::first-letterは最初の1文字に適用される。
-
問121.次のうち、クラスセレクタの正しい記述はどれか。
- ア..menu
- イ.#menu
- ウ.menu
- エ.*menu
正解:ア..menu
解説:クラスセレクタはピリオドを前に付ける。.menuが正しい。
-
問122.次のうち、属性値が指定文字列で「始まる」要素を選択する属性セレクタはどれか。
- ア.[href^="a"]
- イ.[href*="a"]
- ウ.[href$="a"]
- エ.[href~="a"]
正解:ア.[href^="a"]
解説:^=は値が指定文字列で始まる要素を選択する。
-
問123.次のうち、要素の最初の1文字にスタイルを適用する疑似要素はどれか。
- ア.::first-letter
- イ.::before
- ウ.::after
- エ.::first-line
正解:ア.::first-letter
解説:::first-letterが最初の1文字を対象とする疑似要素である。
-
問124.次のうち、子結合子を表す記号はどれか。
- ア.>
- イ.+
- ウ.~
- エ.
正解:ア.>
解説:子結合子は>(大なり記号)で表し、直接の子要素のみを選択する。
-
問125.詳細度が最も高いのはどれか。
- ア.インラインスタイル(style属性)
- イ.クラスセレクタ
- ウ.IDセレクタ
- エ.要素セレクタ
正解:ア.インラインスタイル(style属性)
解説:インラインスタイルが最も詳細度が高い。次いでID、クラス、要素の順。
-
問126.次のセレクタのうち、隣接兄弟結合子を使っているものはどれか。
- ア.h2 + p
- イ.h2 p
- ウ.h2 > p
- エ.h2 ~ p
正解:ア.h2 + p
解説:h2 + p の+が隣接兄弟結合子である。
-
問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">
解説:rel=stylesheetとhrefでCSSを参照するのが正しい。
-
問128.次のうち、継承しないプロパティはどれか。
- ア.margin
- イ.color
- ウ.font-size
- エ.line-height
正解:ア.margin
解説:marginはボックス関連で継承しない。color/font-size/line-heightは継承する。
-
問129.div.box p { } のセレクタの詳細度を構成する内訳として正しいのはどれか。
- ア.ID1・要素2
- イ.クラス1・要素2
- ウ.クラス2・要素1
- エ.ID1・クラス1
正解:イ.クラス1・要素2
解説:クラス1個(.box)・要素2個(div,p)で、クラス1・要素2となる。
-
問130.次のうち、奇数番目の子要素を選択する記述として正しいものはどれか。
- ア.:nth-child(even)
- イ.:nth-child(odd)
- ウ.:nth-child(2n)
- エ.:last-child
正解:イ.:nth-child(odd)
解説::nth-child(odd)または(2n+1)が奇数番目を選択する。
-
問131.#main .item(ID1・クラス1)と .item.active(クラス2)が同じ要素にcolorを指定している。どちらが優先されるか。
- ア..item.active
- イ.#main .item
- ウ.ソース順で常に後者
- エ.両方無効
正解:イ.#main .item
解説:#main .item はID1+クラス1、.item.active はクラス2。IDを含む前者が優先される。
-
問132.次のうち、否定を表す疑似クラスはどれか。
- ア.:checked
- イ.:not()
- ウ.:hover
- エ.:nth-child()
正解:イ.:not()
解説::not()は括弧内の条件に合致しない要素を選択する否定疑似クラスである。
-
問133.ユニバーサルセレクタを表す記号はどれか。
- ア.#
- イ.*
- ウ..
- エ.~
正解:イ.*
解説:*(アスタリスク)がすべての要素にマッチするユニバーサルセレクタである。
-
問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順が推奨される。
-
問135.次のうち、内部スタイルシートを記述する要素はどれか。
- ア.<link>
- イ.<style>
- ウ.<script>
- エ.<css>
正解:イ.<style>
解説:内部スタイルシートはstyle要素にCSSを記述する。
-
問136.p#intro { } のセレクタの詳細度を構成する内訳として正しいものはどれか。
- ア.クラス1・要素1
- イ.ID1・要素1
- ウ.ID2
- エ.要素2
正解:イ.ID1・要素1
解説:#introがID1個、pが要素1個でID1・要素1となる。
-
問137.次のうち、属性値に指定文字列を「部分的に含む」要素を選択する属性セレクタはどれか。
- ア.[class^="x"]
- イ.[class$="x"]
- ウ.[class*="x"]
- エ.[class="x"]
正解:ウ.[class*="x"]
解説:*=は値に指定文字列を含む要素を選択する。
-
問138.次のうち、間接(一般)兄弟結合子を表す記号はどれか。
- ア.+
- イ.>
- ウ.~
- エ.
正解:ウ.~
解説:~(チルダ)が間接兄弟結合子で、後続の兄弟要素すべてを選択する。
-
問139.以下の指定で最終的にp要素のcolorはどうなるか。p { color: blue !important; } p { color: red; }
- ア.red
- イ.継承値
- ウ.blue
- エ.無効
正解:ウ.blue
解説:!important付きのblueが優先され、青になる。
-
問140.次のうち、要素内容の前に生成内容を挿入する疑似要素はどれか。
- ア.::after
- イ.::first-line
- ウ.::before
- エ.::first-letter
正解:ウ.::before
解説:::beforeが要素内容の前に生成内容を挿入する。
-
問141.li:nth-child(3) が選択するのはどの要素か。
- ア.2番目のli
- イ.最初のli
- ウ.3番目のli
- エ.最後のli
正解:ウ.3番目のli
解説::nth-child(3)は親の中で3番目の子要素を選択する。
-
問142.複数のセレクタにまとめてスタイルを適用する(グループ化する)際の区切り文字はどれか。
- ア.セミコロン(;)
- イ.スペース
- ウ.カンマ(,)
- エ.ピリオド(.)
正解:ウ.カンマ(,)
解説:グループ化はカンマ(,)でセレクタを区切る。
-
問143.次の継承プロパティに関する記述のうち正しいものはどれか。
- ア.borderは継承する
- イ.marginは継承する
- ウ.colorは継承する
- エ.paddingは継承する
正解:ウ.colorは継承する
解説:colorなどテキスト関連は継承し、margin/border/paddingは継承しない。
-
問144.input[type="text"] が選択するのはどの要素か。
- ア.すべてのinput
- イ.input以外の要素
- ウ.type属性がcheckboxのinput
- エ.type属性がtextのinput
正解:エ.type属性がtextのinput
解説:type属性の値がtextであるinput要素を選択する。
-
問145.#nav { color: red; } と nav { color: blue !important; } が同じnav要素に適用される場合、色はどうなるか。
- ア.red
- イ.無効
- ウ.ソース順で後者
- エ.blue
正解:エ.blue
解説:!importantはIDの詳細度をも上回るため、blueが適用される。
-
問146.次のうち、訪問済みのリンクを選択する疑似クラスはどれか。
- ア.:link
- イ.:active
- ウ.:hover
- エ.:visited
正解:エ.:visited
解説::visitedが訪問済みリンクを選択する。
-
問147.ul li a のセレクタが選択するのはどの要素か。
- ア.すべてのa要素
- イ.ul要素
- ウ.li要素のみ
- エ.ul内のliの子孫であるa要素
正解:エ.ul内のliの子孫であるa要素
解説:ul内のli内にあるa要素(子孫)を選択する。
-
問148.詳細度が同じ2つの規則がある場合の優先決定方法として正しいものはどれか。
- ア.ランダムに決まる
- イ.先に書いた規則が優先
- ウ.両方無効になる
- エ.後に書いた規則が優先
正解:エ.後に書いた規則が優先
解説:詳細度が等しい場合は後に記述された規則(ソース順で後)が優先される。
-
問149.button:hover の指定が適用されるのはどんな時か。
- ア.クリックされた時
- イ.フォーカスを得た時
- ウ.読み込み完了時
- エ.ポインタが上に乗っている時
正解:エ.ポインタが上に乗っている時
解説::hoverはマウスポインタがbutton上にある時に適用される。
-
問150.section > p { } が選択するのはどの要素か。
- ア.section内の全階層のp
- イ.sectionの親のp
- ウ.sectionの兄弟のp
- エ.sectionの直接の子であるp
正解:エ.sectionの直接の子であるp
解説:子結合子>はsectionの直接の子であるp要素のみを選択する。
-
問151.box-sizingプロパティの初期値はcontent-boxであり、この場合widthプロパティで指定した値はコンテンツ領域の幅のみを表す。
正解:○(正しい)
解説:box-sizingの初期値はcontent-boxで、widthはコンテンツ領域の幅を指す。paddingやborderは加算される。
-
問152.marginプロパティにはパーセント値を指定できない。
正解:×(誤り)
解説:誤り。正しくは、marginにはパーセント値を指定でき、その基準は包含ブロックの幅となる。
-
問153.display:noneを指定した要素は、レイアウト上の領域を占有せず、画面に表示されない。
正解:○(正しい)
解説:display:noneは要素を完全に非表示にし、ボックスも生成されず領域を占有しない。
-
問154.display:inlineを指定した要素には、widthとheightプロパティの指定が効果を持つ。
正解:×(誤り)
解説:誤り。正しくは、display:inlineの要素にはwidth・heightは適用されない。inline-blockやblockなら適用される。
-
問155.display:inline-blockを指定した要素には、widthやheightの指定が一切効かない。
正解:×(誤り)
解説:誤り。正しくは、inline-blockは横並び配置を保ちつつwidth・heightの指定が有効になる。
-
問156.position:absoluteを指定した要素は、最も近い位置指定された祖先要素を基準に配置される。
正解:○(正しい)
解説:absoluteはposition:static以外の最も近い祖先を基準に配置される。なければ初期包含ブロック基準。
-
問157.position:relativeを指定すると、要素は通常のレイアウト位置から、その分の領域も詰めて移動する。
正解:×(誤り)
解説:誤り。正しくは、relativeは元の領域を保持したままtop/left等でオフセットされる。元の位置のスペースは残る。
-
問158.positionプロパティの初期値はstaticである。
正解:○(正しい)
解説:positionの初期値はstaticで、通常のフローに従い配置される。top等は無効。
-
問159.floatプロパティで要素を左右に回り込ませた後、その回り込みを解除するにはclearプロパティを使う。
正解:○(正しい)
解説:clearプロパティ(left/right/both)でfloatによる回り込みを解除できる。
-
問160.overflow:scrollを指定すると、内容がはみ出すときだけスクロールバーが表示される。
正解:×(誤り)
解説:誤り。正しくは、scrollは常時スクロールバーを表示する。はみ出す時のみ表示するのはauto。
-
問161.max-widthプロパティを指定すると、要素の幅がその値を超えないように制限される。
正解:○(正しい)
解説:max-widthは最大幅を制限する。widthがこれを超えると、max-widthの値が優先される。
-
問162.borderプロパティはborder-width、border-style、border-colorをまとめて指定できるショートハンドである。
正解:○(正しい)
解説:borderは幅・スタイル・色をまとめて指定するショートハンドプロパティ。
-
問163.border-styleの値にsolidを指定すると、点線の罫線が描画される。
正解:×(誤り)
解説:誤り。正しくは、solidは実線。点線はdotted、破線はdashedで描画される。
-
問164.box-shadowプロパティのキーワードinsetを指定すると、影が要素の内側に描画される。
正解:○(正しい)
解説:insetを付けると外側ではなく内側に影が落ちる(内向きの影)。
-
問165.opacityプロパティの値1は完全に透明、0は完全に不透明を意味する。
正解:×(誤り)
解説:誤り。正しくは、opacityは0が完全透明、1が完全不透明。
-
問166.background-colorとbackground-imageを同時に指定した場合、背景色が背景画像より手前に表示される。
正解:×(誤り)
解説:誤り。正しくは、背景画像が背景色より手前(上)に描画される。背景色は最背面。
-
問167.background-repeatの値no-repeatを指定すると、背景画像は繰り返されず1回だけ表示される。
正解:○(正しい)
解説:no-repeatは背景画像のタイル繰り返しを行わず1枚だけ表示する。
-
問168.background-attachmentの初期値はfixedであり、背景画像はビューポートに固定される。
正解:×(誤り)
解説:誤り。正しくは、background-attachmentの初期値はscrollで、背景は要素と共にスクロールする。固定はfixed。
-
問169.linear-gradient()は放射状(円形)のグラデーションを生成する関数である。
正解:×(誤り)
解説:誤り。正しくは、linear-gradientは線形(直線方向)のグラデーション。放射状はradial-gradient。
-
問170.font-weightプロパティのboldは太字を、normalは標準の太さを表す。
正解:○(正しい)
解説:font-weight:boldは太字、normalは通常。数値400がnormal、700がboldに相当。
-
問171.font-familyに複数のフォントを指定した場合、最後に書いたフォントが最優先で適用される。
正解:×(誤り)
解説:誤り。正しくは、font-familyは先頭から順に探し、最初に利用可能なものが適用される。
-
問172.text-align:centerを指定すると、インラインコンテンツが水平方向の中央に揃えられる。
正解:○(正しい)
解説:text-align:centerはテキスト等のインライン内容を中央揃えにする。
-
問173.text-decoration:line-throughを指定すると、テキストに下線が引かれる。
正解:×(誤り)
解説:誤り。正しくは、line-throughは打ち消し線。下線はunderlineで引く。
-
問174.text-transform:uppercaseを指定すると、英字がすべて小文字に変換されて表示される。
正解:×(誤り)
解説:誤り。正しくは、uppercaseは大文字に変換する。小文字化はlowercase。
-
問175.text-shadowプロパティを使うと、テキストに影を付けることができる。
正解:○(正しい)
解説:text-shadowは水平・垂直オフセット、ぼかし、色でテキストに影を付ける。
-
問176.letter-spacingプロパティは、文字と文字の間隔(字間)を調整する。
正解:○(正しい)
解説:letter-spacingは字間を、word-spacingは単語間の間隔を調整する。
-
問177.vertical-alignプロパティはブロックレベル要素全体を上下中央に配置するためのものである。
正解:×(誤り)
解説:誤り。正しくは、vertical-alignはインライン要素やテーブルセル内の縦方向の揃えを指定する。ブロック全体の中央寄せ用ではない。
-
問178.directionプロパティの初期値はrtlであり、テキストは右から左へ記述される。
正解:×(誤り)
解説:誤り。正しくは、directionの初期値はltr(左から右)。右から左はrtl。
-
問179.list-style-typeにcircleを指定すると、リストマーカーが黒丸(●)になる。
正解:×(誤り)
解説:誤り。正しくは、circleは白丸(○)。黒丸(●)はdisc。
-
問180.list-style-type:noneを指定すると、リストのマーカーが表示されなくなる。
正解:○(正しい)
解説:noneはリストマーカー(記号や番号)を非表示にする。
-
問181.list-style-positionの値outsideは、マーカーをリスト項目のテキストの内側に配置する。
正解:×(誤り)
解説:誤り。正しくは、outsideはマーカーをボックスの外側に配置する。内側はinside。
-
問182.border-collapse:collapseを指定すると、テーブルの隣接するセルの罫線が1本に結合される。
正解:○(正しい)
解説:collapseは隣接セルのボーダーを重ねて1本にまとめる。separateは分離。
-
問183.caption-sideプロパティはテーブルのキャプション(caption要素)の表示位置を指定する。
正解:○(正しい)
解説:caption-sideはキャプションをtop(上)かbottom(下)に配置する。
-
問184.empty-cellsプロパティは、内容が空のセルの罫線や背景を表示するかどうかを制御する。
正解:○(正しい)
解説:empty-cells:show/hideで空セルの枠線・背景の表示有無を制御する(separate時)。
-
問185.transform-originプロパティは、変形(transform)の基準点を指定する。
正解:○(正しい)
解説:transform-originは回転・拡大などの基準点。初期値は要素中央(50% 50%)。
-
問186.@keyframesルールは、アニメーションの途中経過(キーフレーム)を定義するために使う。
正解:○(正しい)
解説:@keyframesでアニメーションの各段階(0%〜100%やfrom/to)の状態を定義する。
-
問187.animation-iteration-countにloopを指定すると、アニメーションが無限に繰り返される。
正解:×(誤り)
解説:誤り。正しくは、無限ループの指定値はinfinite。loopという値は存在しない。
-
問188.column-countプロパティは、要素の内容を分割する段組み(カラム)の数を指定する。
正解:○(正しい)
解説:column-countはマルチカラムレイアウトの列数を指定する。
-
問189.column-ruleプロパティは、段組みの列と列の間に引く罫線のスタイルをまとめて指定する。
正解:○(正しい)
解説:column-ruleはカラム間の罫線の幅・スタイル・色をまとめて指定するショートハンド。
-
問190.flex-directionの初期値はcolumnであり、フレックスアイテムは縦方向に並ぶ。
正解:×(誤り)
解説:誤り。正しくは、flex-directionの初期値はrowで、アイテムは横方向(主軸が水平)に並ぶ。
-
問191.flex-wrapの初期値はwrapであり、フレックスアイテムは収まらないと自動的に折り返される。
正解:×(誤り)
解説:誤り。正しくは、flex-wrapの初期値はnowrapで折り返さない。折り返すにはwrapを指定する。
-
問192.justify-content:space-betweenを指定すると、最初と最後のアイテムが両端に寄せられ、間が均等に配分される。
正解:○(正しい)
解説:space-betweenは両端のアイテムを端に置き、アイテム間を等間隔にする。
-
問193.隣接するブロックレベル要素の上下のmarginは、重なって大きい方の値が採用されることがある(マージンの相殺)。
正解:○(正しい)
解説:上下marginは相殺(margin collapsing)が起こり、大きい方の値になる。
-
問194.font-sizeの単位pxは、親要素のフォントサイズを基準とした相対値である。
正解:×(誤り)
解説:誤り。正しくは、pxは絶対的な長さの単位。親フォントサイズ基準の相対単位はem。
-
問195.animation-fill-modeにbackwardsを指定すると、アニメーション終了後に最後のキーフレームの状態が維持される。
正解:×(誤り)
解説:誤り。正しくは、終了後に最終状態を維持するのはforwards。backwardsは開始前に最初の状態を適用する。
-
問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.display:noneとvisibility:hiddenの違いとして正しいものはどれか。
- ア.display:noneは領域を占有しないが、visibility:hiddenは領域を確保する
- イ.どちらも領域を確保する
- ウ.どちらも領域を占有しない
- エ.visibility:hiddenは領域を占有しないが、display:noneは領域を確保する
正解:ア.display:noneは領域を占有しないが、visibility:hiddenは領域を確保する
解説:display:noneは領域を占有しないが、visibility:hiddenは見えなくても領域を確保する。
-
問198.放射状(円形)のグラデーションを生成するCSS関数はどれか。
- ア.radial-gradient()
- イ.linear-gradient()
- ウ.circle-gradient()
- エ.round-gradient()
正解:ア.radial-gradient()
解説:radial-gradientが放射状グラデーション。linear-gradientは線形。
-
問199.position:absoluteを指定した要素の配置基準となるのはどの要素か。
- ア.position:static以外が指定された最も近い祖先要素
- イ.常にbody要素
- ウ.直近の親要素(positionに関係なく)
- エ.常にビューポート
正解:ア.position:static以外が指定された最も近い祖先要素
解説:absoluteはposition:static以外で最も近い祖先を基準にする。なければ初期包含ブロック。
-
問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.テキストをすべて大文字に変換して表示するプロパティと値はどれか。
- ア.text-transform: uppercase
- イ.text-transform: capitalize
- ウ.text-transform: lowercase
- エ.font-variant: small-caps
正解:ア.text-transform: uppercase
解説:text-transform:uppercaseで大文字化。lowercaseは小文字、capitalizeは各単語頭文字を大文字化。
-
問202.フレックスボックスで主軸(横方向のデフォルト)に沿った子要素の配置を制御するプロパティはどれか。
- ア.justify-content
- イ.align-items
- ウ.align-content
- エ.flex-direction
正解:ア.justify-content
解説:justify-contentが主軸方向の配置を制御。align-itemsは交差軸方向。
-
問203.transformで要素を時計回りに45度回転させる正しい記述はどれか。
- ア.transform: rotate(45deg)
- イ.transform: skew(45deg)
- ウ.transform: translate(45deg)
- エ.transform: scale(45deg)
正解:ア.transform: rotate(45deg)
解説:rotate(45deg)で回転。translateは移動、scaleは拡大縮小、skewは傾斜。
-
問204.アニメーションを無限に繰り返すためにanimation-iteration-countに指定する値はどれか。
- ア.loop
- イ.infinite
- ウ.repeat
- エ.always
正解:イ.infinite
解説:infiniteで無限ループ。数値は繰り返し回数を表す。
-
問205.次のうち、テーブルの隣接セルの罫線を1本に結合するプロパティと値はどれか。
- ア.border-spacing: 0
- イ.border-collapse: collapse
- ウ.border-collapse: separate
- エ.empty-cells: hide
正解:イ.border-collapse: collapse
解説:border-collapse:collapseで罫線を結合。separateは分離。
-
問206.段組み(マルチカラム)の列数を指定するプロパティはどれか。
- ア.column-width
- イ.column-count
- ウ.column-gap
- エ.columns-number
正解:イ.column-count
解説:column-countで列数を指定。column-widthは列幅、column-gapは列間隔。
-
問207.box-shadowプロパティで影を要素の内側に描画するために付けるキーワードはどれか。
- ア.inner
- イ.inset
- ウ.inside
- エ.input
正解:イ.inset
解説:insetで内側の影になる。指定なしは外側の影。
-
問208.opacity:0.5を指定した要素の状態として正しいものはどれか。
- ア.完全に不透明
- イ.半透明(50%の不透明度)
- ウ.完全に透明
- エ.非表示で領域も消える
正解:イ.半透明(50%の不透明度)
解説:opacity:0.5は半透明。0が完全透明、1が完全不透明。
-
問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.スクロールしても背景画像をビューポートに固定するbackground-attachmentの値はどれか。
- ア.scroll
- イ.fixed
- ウ.local
- エ.static
正解:イ.fixed
解説:fixedで背景をビューポート固定。scrollは要素と共にスクロール。
-
問211.font-familyに「'Arial', 'Helvetica', sans-serif」と指定した場合、最初に適用されるフォントの決まり方として正しいものはどれか。
- ア.最後に書いたものが優先される
- イ.先頭から順に探し、最初に利用できるものが適用される
- ウ.ランダムに選ばれる
- エ.すべて同時に重ねて適用される
正解:イ.先頭から順に探し、最初に利用できるものが適用される
解説:先頭から順に探し、最初に利用可能なフォントが適用される。
-
問212.背景画像をタイル状に繰り返さず1回だけ表示するbackground-repeatの値はどれか。
- ア.repeat
- イ.repeat-x
- ウ.no-repeat
- エ.space
正解:ウ.no-repeat
解説:no-repeatで繰り返しなし。repeatは縦横、repeat-x/yは一方向に繰り返す。
-
問213.transformの変形における基準点を変更するプロパティはどれか。
- ア.transform-base
- イ.transform-point
- ウ.transform-origin
- エ.transform-center
正解:ウ.transform-origin
解説:transform-originで基準点を指定。初期値は中央(50% 50%)。
-
問214.はみ出した内容を切り取り、スクロールバーも表示しないoverflowの値はどれか。
- ア.visible
- イ.scroll
- ウ.hidden
- エ.auto
正解:ウ.hidden
解説:hiddenははみ出しを切り取り表示しない。scrollは常にバー、autoは必要時のみ。
-
問215.flex-directionプロパティの初期値はどれか。
- ア.column
- イ.row-reverse
- ウ.row
- エ.column-reverse
正解:ウ.row
解説:初期値はrowで、主軸が水平方向(横並び)になる。
-
問216.CSSのカウンタ機能で連番を表示する際、値を1ずつ増加させるプロパティはどれか。
- ア.counter-reset
- イ.counter-set
- ウ.counter-increment
- エ.content
正解:ウ.counter-increment
解説:counter-incrementでカウンタを加算。counter-resetは初期化。
-
問217.テキストに下線を引くプロパティと値の組み合わせはどれか。
- ア.text-decoration: line-through
- イ.text-decoration: overline
- ウ.text-decoration: underline
- エ.text-style: underline
正解:ウ.text-decoration: underline
解説:text-decoration:underlineで下線。line-throughは打ち消し線、overlineは上線。
-
問218.テーブルのキャプションの表示位置(上下)を指定するプロパティはどれか。
- ア.caption-position
- イ.caption-align
- ウ.caption-side
- エ.table-caption
正解:ウ.caption-side
解説:caption-sideでtop/bottomを指定する。
-
問219.position:relativeを指定し、top:10px・left:20pxとした要素の挙動として正しいものはどれか。
- ア.元の領域は詰められ、後続要素が前に詰まる
- イ.ビューポート基準で配置される
- ウ.親要素の左上に固定される
- エ.元の位置を基準に下10px・右20pxずれ、元の領域は残る
正解:エ.元の位置を基準に下10px・右20pxずれ、元の領域は残る
解説:relativeは元の位置から相対的にずれ、元の領域(スペース)はそのまま残る。
-
問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.box-sizingプロパティの初期値はどれか。
- ア.border-box
- イ.padding-box
- ウ.margin-box
- エ.content-box
正解:エ.content-box
解説:初期値はcontent-boxで、widthはコンテンツ領域のみを表す。
-
問222.アニメーション終了後に最後のキーフレームの状態を維持するanimation-fill-modeの値はどれか。
- ア.backwards
- イ.none
- ウ.both
- エ.forwards
正解:エ.forwards
解説:forwardsは終了後に最終状態を保持。backwardsは開始前に最初の状態を適用。
-
問223.floatによる回り込みを解除するために使うプロパティはどれか。
- ア.clip
- イ.clip-path
- ウ.clearfix
- エ.clear
正解:エ.clear
解説:clearプロパティ(left/right/both)でfloatの回り込みを解除する。
-
問224.白丸(○)のリストマーカーを指定するlist-style-typeの値はどれか。
- ア.disc
- イ.square
- ウ.decimal
- エ.circle
正解:エ.circle
解説:circleが白丸。discは黒丸、squareは四角。
-
問225.z-indexプロパティが効果を発揮するための前提条件として正しいものはどれか。
- ア.positionがstaticであること
- イ.displayがinlineであること
- ウ.floatが指定されていること
- エ.positionがstatic以外に指定されていること
正解:エ.positionがstatic以外に指定されていること
解説:z-indexはposition:static以外(relative/absolute/fixed等)が指定された要素にのみ効く。
-
問226.section要素は、文書やアプリケーションの一般的なセクションを表し、通常は見出しを伴う。
正解:○(正しい)
解説:section要素は文書やアプリケーションの汎用的なセクションを表し、原則として見出し(h1-h6)を持つことが推奨される。
-
問227.article要素は、それ単独で完結し、独立して再配布・再利用可能なコンテンツを表す。
正解:○(正しい)
解説:article要素はブログ記事やニュース記事など、単独で完結し独立して配布可能なコンテンツを表す。
-
問228.nav要素は、ページ内のすべてのリンクを必ず囲まなければならない。
正解:×(誤り)
解説:誤り。正しくは、nav要素は主要なナビゲーションリンクのまとまりに用いるもので、ページ内のすべてのリンクを囲む必要はない。
-
問229.aside要素は、文書の主要コンテンツそのものを表すために用いる要素である。
正解:×(誤り)
解説:誤り。正しくは、aside要素は本文と間接的にしか関連しない補足情報(サイドバー、広告、関連リンク等)を表す。主要コンテンツを表すのはmain要素。
-
問230.main要素は、1つの文書内に複数個配置してよい。
正解:×(誤り)
解説:誤り。正しくは、main要素は文書の主要コンテンツを表し、hidden属性のないものは文書内に1つだけ配置できる。
-
問231.figure要素はキャプションを伴う画像・図表・コードなどを表し、figcaption要素でそのキャプションを示す。
正解:○(正しい)
解説:figure要素は自己完結的な図表・画像・コード等を表し、figcaptionでキャプションを付与する。
-
問232.figcaption要素は、figure要素の2番目の子要素としてのみ配置できる。
正解:×(誤り)
解説:誤り。正しくは、figcaptionはfigureの最初または最後の子要素として配置する。
-
問233.header要素は、ページ全体に1つしか配置できない。
正解:×(誤り)
解説:誤り。正しくは、header要素はsectionやarticleなどの内部にも配置でき、複数置くことができる。
-
問234.footer要素には、著作者情報や著作権、関連文書へのリンクなどを含めることができる。
正解:○(正しい)
解説:footer要素は直近のセクションのフッターを表し、著作者情報・著作権・関連リンク等を含められる。
-
問235.見出し要素はh1からh6まであり、数字が大きいほど上位(重要)な見出しを表す。
正解:×(誤り)
解説:誤り。正しくは、h1が最上位で数字が大きいほど下位の見出しを表す。
-
問236.p要素は段落を表すグルーピングコンテンツである。
正解:○(正しい)
解説:p要素は1つの段落(パラグラフ)を表すグルーピングコンテンツである。
-
問237.ul要素は順序を持たないリスト、ol要素は順序を持つリストを表す。
正解:○(正しい)
解説:ulは順序なしリスト、olは順序付きリストを表し、いずれも項目はli要素で記述する。
-
問238.dl要素は説明リスト(記述リスト)を表し、用語をdt、説明をddで記述する。
正解:○(正しい)
解説:dlは説明リストを表し、用語をdt、その説明をddで対応付ける。
-
問239.blockquote要素は、インライン(行内)の短い引用を表すための要素である。
正解:×(誤り)
解説:誤り。正しくは、blockquoteは他出典からのブロックレベルの引用を表す。インラインの短い引用はq要素を用いる。
-
問240.pre要素は、空白や改行などの整形をそのまま保持して表示する。
正解:○(正しい)
解説:pre要素は整形済みテキストを表し、ソース中の空白・改行をそのまま反映して表示する。
-
問241.strong要素は単に文字を太字で表示するためだけの要素である。
正解:×(誤り)
解説:誤り。正しくは、strongは内容の強い重要性・重大性・緊急性を示す意味的な要素である。
-
問242.em要素は、テキストの強調(ストレス)を表し、文の意味に影響する強調点を示す。
正解:○(正しい)
解説:em要素は発話上の強勢(ストレスエンファシス)を表し、ネストすると強調度が増す。
-
問243.b要素は、内容の強い重要性や緊急性を意味的に示すための要素である。
正解:×(誤り)
解説:誤り。正しくは、b要素は重要性や強調の意味を持たず、注意を引きたい語句を慣用的に示す。強い重要性を示すのはstrong要素。
-
問244.i要素は、発話上の強勢による強調(ストレスエンファシス)を表すための要素である。
正解:×(誤り)
解説:誤り。正しくは、i要素は別の声・気分、専門用語、外国語句など通常と異なるテキストを表す。強勢による強調を表すのはem要素。
-
問245.mark要素は、参照のために関連性を持ってハイライト(強調表示)された部分を表す。
正解:○(正しい)
解説:mark要素は文脈上参照のために目立たせた(ハイライトした)テキスト範囲を表す。
-
問246.small要素は、文字を物理的に小さく表示することだけを目的とした要素で、意味は持たない。
正解:×(誤り)
解説:誤り。正しくは、small要素は但し書き・免責・著作権などのサイドコメント(細目)を意味的に表す要素である。
-
問247.abbr要素は作品(著書・論文・楽曲など)のタイトルを表すための要素である。
正解:×(誤り)
解説:誤り。正しくは、abbr要素は略語・頭字語を表し、title属性で完全形を示せる要素である。作品のタイトルを表すのはcite要素。
-
問248.cite要素は、引用された人物の名前を表すための要素である。
正解:×(誤り)
解説:誤り。正しくは、cite要素は作品(著書・論文・楽曲など)のタイトルを表す要素である。
-
問249.q要素は、インライン(短い)引用を表し、ブラウザは通常引用符を自動付加する。
正解:○(正しい)
解説:q要素はインラインの短い引用を表し、多くのブラウザが引用符を自動表示する。
-
問250.code要素は、整形済みテキストとしてソース中の空白や改行をそのまま保持して表示する要素である。
正解:×(誤り)
解説:誤り。正しくは、code要素はコード断片を表すフレージングコンテンツであり、空白・改行をそのまま保持表示するのはpre要素の役割である。
-
問251.time要素のdatetime属性には、機械可読な日時を指定する。
正解:○(正しい)
解説:time要素は日時を表し、datetime属性に機械可読形式の日付・時刻を記述する。
-
問252.sub要素は上付き文字、sup要素は下付き文字を表す。
正解:×(誤り)
解説:誤り。正しくは、subが下付き文字、supが上付き文字を表す。
-
問253.span要素は、それ自体に固有の意味を持たない汎用的なインライン要素である。
正解:○(正しい)
解説:span要素は意味を持たない汎用インラインコンテナで、属性やスタイル付与に用いる。
-
問254.ruby要素はルビ(読み仮名など)を表し、rt要素でルビ文字、rp要素で非対応ブラウザ用の括弧を示す。
正解:○(正しい)
解説:ruby要素はルビ注釈を表し、rtでルビテキスト、rpでルビ非対応時に表示する括弧を示す。
-
問255.ins要素は文書から削除された内容、del要素は文書に追加された内容を表す。
正解:×(誤り)
解説:誤り。正しくは、ins要素が追加されたテキスト、del要素が削除されたテキストを表す(説明が逆)。
-
問256.a要素のrel属性にnofollowを指定すると、検索エンジンにそのリンクをたどらない・支持しないことを示せる。
正解:○(正しい)
解説:rel="nofollow"はリンク先を是認しない旨を示し、検索エンジンの評価伝播を抑制する。
-
問257.rel属性のnoopenerを指定すると、検索エンジンにそのリンクをたどらせないことを示せる。
正解:×(誤り)
解説:誤り。正しくは、rel="noopener"は新規ウィンドウから元ページのwindow.openerを参照できなくする指定である。検索エンジンにリンクをたどらせないのはrel="nofollow"。
-
問258.lang属性は要素内のコンテンツの言語を指定する属性である。
正解:○(正しい)
解説:lang属性は要素のコンテンツの言語コード(例:ja, en)を指定する。
-
問259.dir属性は、要素内のコンテンツの言語を指定する属性で、値にja・enなどを指定する。
正解:×(誤り)
解説:誤り。正しくは、dir属性は書字方向(ltr・rtl・auto)を指定する属性であり、言語を指定するのはlang属性である。
-
問260.table要素の表のキャプションはth要素で指定する。
正解:×(誤り)
解説:誤り。正しくは、表のキャプションはcaption要素で指定し、table内の最初の子要素として置く。
-
問261.th要素のscope属性には、その見出しが行・列のどちらに対応するかをrow・colなどで指定する。
正解:○(正しい)
解説:scope属性は見出しセルの適用範囲を示し、col(列)、row(行)、colgroup、rowgroupを指定できる。
-
問262.thead・tbody・tfootは、それぞれ表のフッター行・本体行・ヘッダー行のグループを表す。
正解:×(誤り)
解説:誤り。正しくは、theadが表頭(ヘッダー行)、tbodyが表本体、tfootが表脚(フッター行)のグループを表す(theadとtfootの説明が逆)。
-
問263.colgroup要素は表の列のグループを表し、col要素で各列に属性を適用できる。
正解:○(正しい)
解説:colgroupは列のまとまりを定義し、内部のcol要素で列単位の属性指定が可能。
-
問264.td要素はデータセル、th要素は見出しセルを表す。
正解:○(正しい)
解説:tdは表のデータセル、thは見出しセルを表す。
-
問265.video要素のcontrols属性を指定すると、再生・一時停止・音量などの標準コントロールが表示される。
正解:○(正しい)
解説:controls属性を付けるとブラウザ標準の再生コントロールUIが表示される。
-
問266.audio要素のautoplay属性を指定すると、再生終了後に自動で先頭へ戻って繰り返し再生される。
正解:×(誤り)
解説:誤り。正しくは、autoplay属性は読み込み後に自動再生を開始させる属性である。再生終了後に先頭へ戻って繰り返すのはloop属性。
-
問267.video要素のposter属性は、動画再生前に表示するプレビュー画像を指定する。
正解:○(正しい)
解説:poster属性は再生前に表示する代表画像(サムネイル)のURLを指定する。
-
問268.audio要素にposter属性を指定すると、音声のジャケット画像を表示できる。
正解:×(誤り)
解説:誤り。正しくは、poster属性はvideo要素の属性であり、audio要素には存在しない。
-
問269.loop属性を指定すると、メディアは初期状態でミュート(消音)された状態になる。
正解:×(誤り)
解説:誤り。正しくは、loop属性はメディアを末尾まで再生後に先頭から繰り返す属性である。初期状態をミュートにするのはmuted属性。
-
問270.muted属性を指定すると、メディアは初期状態でミュート(消音)される。
正解:○(正しい)
解説:muted属性はメディアの初期音量をミュート状態にする。
-
問271.preload属性には、none・metadata・autoなどの値を指定できる。
正解:○(正しい)
解説:preload属性は事前読み込みのヒントで、none・metadata・auto(または空文字)を指定できる。
-
問272.source要素は、video・audio要素内で複数の代替メディアリソースを指定するために使う。
正解:○(正しい)
解説:source要素は複数の代替ソースを列挙し、ブラウザが対応する最初のものを選択して使用する。
-
問273.track要素は、video・audio要素に複数の代替メディアリソース(動画・音声ファイル)を指定するために使う。
正解:×(誤り)
解説:誤り。正しくは、track要素は字幕・キャプション等のテキストトラックを追加する要素である。複数の代替メディアリソースを指定するのはsource要素。
-
問274.WebVTTは、HTML5のtrack要素で用いられる字幕・キャプション用のテキストフォーマットである。
正解:○(正しい)
解説:WebVTT(.vtt)はtrack要素で参照される字幕・キャプション記述のための標準フォーマット。
-
問275.H.264は音声コーデックであり、映像の圧縮には使われない。
正解:×(誤り)
解説:誤り。正しくは、H.264は映像(ビデオ)コーデックであり、音声コーデックではない。
-
問276.AACおよびOpusは音声(オーディオ)コーデックである。
正解:○(正しい)
解説:AACとOpusはいずれも音声圧縮用のコーデックである。
-
問277.VP9は音声(オーディオ)コーデックであり、映像の圧縮には用いられない。
正解:×(誤り)
解説:誤り。正しくは、VP9はGoogleが開発した映像(ビデオ)コーデックであり、音声コーデックではない。
-
問278.a要素のdownload属性を指定すると、リンク先を表示するのではなくダウンロードさせることを示せる。
正解:○(正しい)
解説:download属性はリンク先をナビゲートせずファイルとしてダウンロードする指示を与える。
-
問279.a要素のtarget="_self"は、リンクを新しいタブまたはウィンドウで開くことを示す。
正解:×(誤り)
解説:誤り。正しくは、target="_self"は現在のコンテキストでリンクを開く(既定値)。新しいタブ/ウィンドウで開くのはtarget="_blank"。
-
問280.form要素のaction属性は、フォーム送信先のURLを指定する。
正解:○(正しい)
解説:action属性はフォームデータを送信する処理先URLを指定する。
-
問281.input要素のtype="email"は、メールアドレス形式の入力欄を表し、入力値の形式検証が行われる。
正解:○(正しい)
解説:type="email"はメール用入力欄で、ブラウザが基本的なメール形式の妥当性検証を行う。
-
問282.input要素のtype="number"では、min・max・step属性で入力範囲や刻みを指定できる。
正解:○(正しい)
解説:type="number"は数値入力欄で、min/max/stepで許容範囲と増減幅を指定できる。
-
問283.input要素のtype="range"は、カラーピッカーを表示して色を選択する入力欄を表す。
正解:×(誤り)
解説:誤り。正しくは、type="range"はスライダーで範囲内の数値を選ばせる入力欄である。カラーピッカーを表示するのはtype="color"。
-
問284.input要素のtype="color"は、色を選択するためのカラーピッカーを表示する。
正解:○(正しい)
解説:type="color"はカラーピッカーUIを表示し、色(16進カラー値)を入力させる。
-
問285.input要素のtype="file"は、画面に表示されないがフォーム送信時に値を送る非表示の入力欄である。
正解:×(誤り)
解説:誤り。正しくは、type="file"はファイル選択UIを表示する入力欄である。画面に表示されず値を送る非表示の入力欄はtype="hidden"。
-
問286.required属性は、その入力欄が空のままでもフォーム送信を許可することを示す。
正解:×(誤り)
解説:誤り。正しくは、required属性は入力必須を意味し、空のまま送信しようとすると検証エラーになる。
-
問287.placeholder属性は、入力値が満たすべき正規表現を指定するための属性である。
正解:×(誤り)
解説:誤り。正しくは、placeholder属性は入力前に薄く表示される入力例・ヒント文を指定する。入力値の正規表現を指定するのはpattern属性。
-
問288.pattern属性は、input要素の入力値が満たすべき正規表現を指定する。
正解:○(正しい)
解説:pattern属性は入力値が一致すべき正規表現を指定し、検証に用いる。
-
問289.label要素のfor属性には、関連付けるフォーム部品のname値を指定する。
正解:×(誤り)
解説:誤り。正しくは、label要素のfor属性には対象コントロールのid値を指定する(name値ではない)。
-
問290.fieldset要素は関連するフォーム部品をグループ化し、caption要素でそのグループの見出しを示す。
正解:×(誤り)
解説:誤り。正しくは、fieldsetのグループの見出しはlegend要素で示す。caption要素は表(table)のキャプション用である。
-
問291.select要素は選択肢のリストを提供し、各選択肢はoption要素で記述する。
正解:○(正しい)
解説:select要素はドロップダウン等の選択リストを作り、option要素で各選択肢を定義する。
-
問292.textarea要素は複数行のテキスト入力欄を提供する。
正解:○(正しい)
解説:textarea要素は複数行にわたる自由なテキスト入力を受け付ける。
-
問293.iframe要素は、複数行のテキストを入力するための自由入力欄を提供する要素である。
正解:×(誤り)
解説:誤り。正しくは、iframe要素は別のHTML文書を埋め込むインラインフレームである。複数行のテキスト入力欄を提供するのはtextarea要素。
-
問294.details要素は開閉できる情報の開示ウィジェットを作り、summary要素でその見出し(開閉ラベル)を示す。
正解:○(正しい)
解説:details要素はディスクロージャー(開閉)部品を作り、summaryが常時表示の見出しになる。
-
問295.details要素にopen属性を指定すると、初期状態で内容が閉じた(折りたたまれた)状態になる。
正解:×(誤り)
解説:誤り。正しくは、open属性を付けるとdetailsは初期状態で展開(内容が見える)状態になる。open未指定時が閉じた状態である。
-
問296.maxlength属性は、テキスト入力に許容される最大文字数を指定する。
正解:○(正しい)
解説:maxlength属性は入力可能な最大文字数を制限する。
-
問297.button要素のtype属性のデフォルト値(form内)はresetである。
正解:×(誤り)
解説:誤り。正しくは、form内のbutton要素はtype未指定の場合、既定でsubmit(送信)として動作する(resetではない)。
-
問298.input要素のtype="file"は、ユーザーがファイルを選択してアップロードするための入力欄を表す。
正解:○(正しい)
解説:type="file"はファイル選択UIを表示し、ファイルのアップロードに用いる。
-
問299.次のうち、自己完結し独立して再配布可能なコンテンツを表す要素はどれか。
- ア.article
- イ.section
- ウ.aside
- エ.div
正解:ア.article
解説:article要素は独立して配布・再利用可能な自己完結したコンテンツを表す。
-
問300.主要なナビゲーションリンクのまとまりを表す要素はどれか。
- ア.menu
- イ.nav
- ウ.aside
- エ.header
正解:イ.nav
解説:nav要素は主要なナビゲーションリンクのセクションを表す。
-
問301.文書の主要コンテンツを表し、hidden属性のないものは原則1文書に1つだけ置ける要素はどれか。
- ア.section
- イ.article
- ウ.main
- エ.body
正解:ウ.main
解説:main要素は文書の主要コンテンツを表し、表示されるものは1つだけ配置できる。
-
問302.figure要素に付けるキャプションを表す要素はどれか。
- ア.caption
- イ.legend
- ウ.figcaption
- エ.summary
正解:ウ.figcaption
解説:figcaption要素はfigureのキャプションを表す。
-
問303.テキストの強い重要性・重大性・緊急性を表す要素はどれか。
- ア.b
- イ.em
- ウ.strong
- エ.mark
正解:ウ.strong
解説:strong要素は内容の強い重要性・重大性・緊急性を意味的に示す。
-
問304.文脈上の強勢(ストレスエンファシス)による強調を表す要素はどれか。
- ア.em
- イ.i
- ウ.strong
- エ.cite
正解:ア.em
解説:em要素は発話上の強勢による強調を表す。
-
問305.参照のために目立たせた(ハイライトした)テキスト範囲を表す要素はどれか。
- ア.b
- イ.mark
- ウ.strong
- エ.span
正解:イ.mark
解説:mark要素は参照目的でハイライト表示した範囲を表す。
-
問306.作品(著書・論文・楽曲など)のタイトルを表す要素はどれか。
- ア.q
- イ.blockquote
- ウ.cite
- エ.abbr
正解:ウ.cite
解説:cite要素は著書・論文・楽曲などの作品のタイトルを表す。人名そのものを表す要素ではない点に注意。
-
問307.略語を表し、title属性で完全形を示せる要素はどれか。
- ア.abbr
- イ.acronym
- ウ.cite
- エ.small
正解:ア.abbr
解説:abbr要素は略語・頭字語を表し、titleで完全な語句を示せる。
-
問308.インラインの短い引用を表し、ブラウザが引用符を自動付加する要素はどれか。
- ア.blockquote
- イ.cite
- ウ.q
- エ.ins
正解:ウ.q
解説:q要素はインライン引用を表し、引用符が自動表示される。
-
問309.上付き文字(指数や順序記号など)を表す要素はどれか。
- ア.sub
- イ.sup
- ウ.small
- エ.ins
正解:イ.sup
解説:sup要素は上付き文字を表す。subは下付き文字。
-
問310.日時を表し、datetime属性に機械可読な日付を指定する要素はどれか。
- ア.data
- イ.time
- ウ.date
- エ.abbr
正解:イ.time
解説:time要素は日時を表し、datetime属性で機械可読な値を与える。
-
問311.ルビのルビ文字(読み)を表す要素はどれか。
- ア.rb
- イ.rp
- ウ.rt
- エ.ruby
正解:ウ.rt
解説:rt要素はrubyのルビテキスト(読み)を表す。
-
問312.ルビ非対応のブラウザで表示される括弧を指定する要素はどれか。
- ア.rt
- イ.rp
- ウ.rb
- エ.ruby
正解:イ.rp
解説:rp要素はルビ非対応環境で表示される括弧(フォールバック)を指定する。
-
問313.文書に追加された(挿入された)内容を表す要素はどれか。
- ア.add
- イ.ins
- ウ.del
- エ.new
正解:イ.ins
解説:ins要素は追加・挿入されたテキストを表す。delは削除。
-
問314.表のキャプションを指定する要素はどれか。
- ア.caption
- イ.legend
- ウ.figcaption
- エ.thead
正解:ア.caption
解説:caption要素は表のタイトル(キャプション)を表し、tableの最初の子に置く。
-
問315.見出しセル(th)の適用範囲を行・列で指定する属性はどれか。
- ア.span
- イ.headers
- ウ.scope
- エ.axis
正解:ウ.scope
解説:scope属性はthの適用範囲(col/row/colgroup/rowgroup)を指定する。
-
問316.表の本体行のグループを表す要素はどれか。
- ア.thead
- イ.tbody
- ウ.tfoot
- エ.tr
正解:イ.tbody
解説:tbody要素は表の本体(データ行)のグループを表す。
-
問317.video要素で再生前に表示する代表画像を指定する属性はどれか。
- ア.poster
- イ.src
- ウ.preview
- エ.thumbnail
正解:ア.poster
解説:poster属性は再生前のサムネイル画像を指定する。
-
問318.メディアの事前読み込みのヒントを与える属性はどれか。
- ア.buffer
- イ.preload
- ウ.cache
- エ.loading
正解:イ.preload
解説:preload属性はnone/metadata/autoで事前読み込みの程度を指示する。
-
問319.video・audio要素で複数の代替メディアリソースを列挙する要素はどれか。
- ア.track
- イ.media
- ウ.source
- エ.embed
正解:ウ.source
解説:source要素は複数の代替ソースを指定し、対応する最初のものが使われる。
-
問320.video・audioに字幕やキャプションを追加する要素はどれか。
- ア.caption
- イ.subtitle
- ウ.track
- エ.cue
正解:ウ.track
解説:track要素は字幕・キャプション等のテキストトラックを追加する。
-
問321.track要素で用いる、字幕記述用の標準フォーマットはどれか。
- ア.SRT
- イ.WebVTT
- ウ.TTML
- エ.ASS
正解:イ.WebVTT
解説:WebVTTはtrack要素で参照される字幕・キャプションの標準フォーマット。
-
問322.次のうち音声(オーディオ)コーデックはどれか。
- ア.H.264
- イ.VP9
- ウ.Opus
- エ.WebM
正解:ウ.Opus
解説:Opusは音声コーデック。H.264とVP9は映像、WebMはコンテナ。
-
問323.次のうち映像(ビデオ)コーデックはどれか。
- ア.AAC
- イ.H.264
- ウ.Opus
- エ.MP4
正解:イ.H.264
解説:H.264は映像コーデック。AAC/Opusは音声、MP4はコンテナ。
-
問324.a要素でリンク先を新しいタブ/ウィンドウで開くために指定する属性値はどれか。
- ア.target="_self"
- イ.target="_blank"
- ウ.target="_parent"
- エ.target="_top"
正解:イ.target="_blank"
解説:target="_blank"でリンクを新規ブラウジングコンテキストに開く。
-
問325.a要素でリンク先をダウンロードさせることを示す属性はどれか。
- ア.save
- イ.download
- ウ.href
- エ.rel
正解:イ.download
解説:download属性はリンク先をファイルとしてダウンロードさせる。
-
問326.フォームデータの送信先URLを指定するform要素の属性はどれか。
- ア.method
- イ.action
- ウ.target
- エ.src
正解:イ.action
解説:action属性がフォームの送信先URLを指定する。
-
問327.スライダー形式で数値を選択させるinputのtypeはどれか。
- ア.number
- イ.range
- ウ.slider
- エ.scroll
正解:イ.range
解説:type="range"はスライダーで範囲内の値を選択させる。
-
問328.カラーピッカーを表示するinputのtypeはどれか。
- ア.color
- イ.palette
- ウ.colour
- エ.picker
正解:ア.color
解説:type="color"はカラーピッカーUIを表示する。
-
問329.画面に表示されず値を送信するinputのtypeはどれか。
- ア.secret
- イ.hidden
- ウ.invisible
- エ.none
正解:イ.hidden
解説:type="hidden"は非表示で値を保持・送信する入力欄。
-
問330.入力が必須であることを示すinput要素の属性はどれか。
- ア.required
- イ.mandatory
- ウ.needed
- エ.must
正解:ア.required
解説:required属性は入力必須を示し、空のままだと送信できない。
-
問331.input要素で入力値が満たすべき正規表現を指定する属性はどれか。
- ア.regex
- イ.match
- ウ.pattern
- エ.validate
正解:ウ.pattern
解説:pattern属性で入力値の正規表現による検証を指定する。
-
問332.関連するフォーム部品をグループ化する要素はどれか。
- ア.group
- イ.fieldset
- ウ.section
- エ.optgroup
正解:イ.fieldset
解説:fieldset要素はフォーム部品をグループ化する。legendはその見出し。
-
問333.fieldsetのグループに見出し(キャプション)を付ける要素はどれか。
- ア.caption
- イ.legend
- ウ.label
- エ.summary
正解:イ.legend
解説:legend要素はfieldsetのキャプションを表す。
-
問334.開閉できる情報の開示部品を作る要素はどれか。
- ア.details
- イ.summary
- ウ.dialog
- エ.disclosure
正解:ア.details
解説:details要素は開閉可能なディスクロージャー部品を作る。
-
問335.details要素で常時表示される見出し(開閉ラベル)を示す要素はどれか。
- ア.caption
- イ.legend
- ウ.summary
- エ.title
正解:ウ.summary
解説:summary要素はdetailsの見出しとして常時表示され、クリックで開閉する。
-
問336.テキスト入力の最大文字数を制限する属性はどれか。
- ア.size
- イ.maxlength
- ウ.limit
- エ.maxsize
正解:イ.maxlength
解説:maxlength属性は入力可能な最大文字数を制限する。
-
問337.複数行のテキスト入力欄を提供する要素はどれか。
- ア.input
- イ.textarea
- ウ.textfield
- エ.textbox
正解:イ.textarea
解説:textarea要素は複数行のテキスト入力欄を提供する。
-
問338.label要素を特定のフォーム部品と関連付けるために用いる属性はどれか。
- ア.id
- イ.name
- ウ.for
- エ.ref
正解:ウ.for
解説:for属性に対象部品のidを指定してlabelと関連付ける。
-
問339.レスポンシブWebデザインでは、グリッドの幅を%などの相対値で指定する「フルードグリッド」が用いられる。
正解:○(正しい)
解説:フルードグリッドは画面幅に応じて伸縮するよう、列幅を%等の相対値で指定する手法である。
-
問340.フルードイメージを実現するため、画像に「max-width: 100%;」を指定するのが一般的である。
正解:○(正しい)
解説:img{max-width:100%}により親要素を超えない範囲で画像が縮小し、レイアウト崩れを防ぐ。
-
問341.可変(リキッド)レイアウトは、ウィンドウ幅に応じてコンテンツの幅が伸縮するレイアウトである。
正解:○(正しい)
解説:リキッドレイアウトは%等の相対値で幅を指定し、ウィンドウ幅に応じて伸縮する。
-
問342.リセットCSSは、ブラウザごとに異なるデフォルトスタイルを打ち消し、ほぼ無装飾の状態に揃えることを目的とする。
正解:○(正しい)
解説:リセットCSSはmarginやpadding等のデフォルト値を0等にリセットし、ブラウザ間の差異をなくす。
-
問343.CSSスプライトは、複数の画像を1枚にまとめ、background-positionで表示位置をずらして使う手法である。
正解:○(正しい)
解説:CSSスプライトは画像を1枚に統合しHTTPリクエスト数を減らす手法で、位置はbackground-positionで調整する。
-
問344.高解像度(Retina)ディスプレイ向けには、2倍などの大きな画像を用意して縮小表示するとぼやけを防げる。
正解:○(正しい)
解説:高解像度端末ではdprが高く、2倍画像を用意して縮小表示することで鮮明に表示できる。
-
問345.img要素のsizes属性は、各表示条件における画像の表示サイズをブラウザに伝え、srcsetからの選択を補助する。
正解:○(正しい)
解説:sizesはメディア条件ごとの表示幅を示し、ブラウザがsrcsetから適切な画像を選ぶ材料となる。
-
問346.srcsetの「2x」のようなx記述子は、デバイスピクセル比(dpr)に基づいて画像を切り替える指定である。
正解:○(正しい)
解説:x記述子(1x/2x等)はデバイスピクセル比に応じて画像を選択させる指定方法である。
-
問347.ビューポートを指定するmeta要素は「<meta name="viewport" content="width=device-width, initial-scale=1">」のように記述する。
正解:○(正しい)
解説:width=device-widthで端末幅に合わせ、initial-scale=1で初期倍率を等倍にする標準的記述である。
-
問348.viewportのcontentで「width=device-width」と指定すると、ビューポートの幅を端末の画面幅に合わせる。
正解:○(正しい)
解説:width=device-widthはビューポート幅をデバイスの画面幅(CSSピクセル)に一致させる指定である。
-
問349.viewportの「initial-scale」は、ページ読み込み時の初期ズーム倍率を指定するプロパティである。
正解:○(正しい)
解説:initial-scaleはページ表示開始時の拡大率を指定し、1で等倍となる。
-
問350.viewportの「user-scalable」をnoにすると、ピンチ操作などでの拡大・縮小を禁止できる。
正解:○(正しい)
解説:user-scalable=noでユーザーのズーム操作が無効化される(アクセシビリティ上は非推奨)。
-
問351.デバイスピクセル比(dpr)とは、1つのCSSピクセルに対応する物理(デバイス)ピクセルの数を示す比率である。
正解:○(正しい)
解説:dprはCSSピクセル1に対する物理ピクセル数の比で、Retina端末では2や3となる。
-
問352.ファビコンは、ブラウザのタブやブックマークに表示されるサイトのアイコンである。
正解:○(正しい)
解説:ファビコンはタブ・ブックマーク・履歴などに表示される小さなサイトアイコンである。
-
問353.apple-touch-icon-precomposedは、iOSが自動で付ける光沢などの効果を適用させずにアイコンを表示させる指定である。
正解:○(正しい)
解説:precomposed版はOSによる光沢加工を無効にし、用意した画像をそのまま表示させる。
-
問354.apple-mobile-web-app-capableをyesにすると、iOSでホーム画面から起動した際にスタンドアロンモード(ブラウザUIなし)で表示できる。
正解:○(正しい)
解説:このmetaをyesにすると、ホーム画面起動時にブラウザUIを隠したフルスクリーン表示になる。
-
問355.電話番号へのリンクは「<a href="tel:0312345678">」のようにtelスキームを用いて記述する。
正解:○(正しい)
解説:tel:スキームを使うと、対応端末でタップにより発信できる電話番号リンクになる。
-
問356.script要素のasync属性を付けると、スクリプトは非同期にダウンロードされ、完了次第すぐに実行される。
正解:○(正しい)
解説:asyncはダウンロードを非同期で行い、完了次第HTML解析を止めて実行する(順序は保証されない)。
-
問357.script要素のdefer属性を付けると、スクリプトはHTMLの解析完了後に記述順で実行される。
正解:○(正しい)
解説:deferはダウンロードを並行で行い、HTML解析完了後に記述順で実行される。
-
問358.async属性は外部スクリプト(src属性付き)に対して有効であり、インラインスクリプトには効果がない。
正解:○(正しい)
解説:asyncはsrcを持つ外部スクリプトにのみ作用し、インラインスクリプトには無効である。
-
問359.メディアクエリは「@media」というアットルールを使って、特定の条件下でのみ適用するスタイルを記述する。
正解:○(正しい)
解説:@media条件{...}の形でメディアクエリを記述し、条件に合うときだけスタイルを適用する。
-
問360.メディアタイプ「screen」は、画面(ディスプレイ)向けの表示を対象とする。
正解:○(正しい)
解説:screenはPCやスマートフォンなどのスクリーン表示を対象とするメディアタイプである。
-
問361.メディアタイプ「all」は、すべてのメディアタイプを対象とする。
正解:○(正しい)
解説:allはすべてのデバイス・メディアを対象とするメディアタイプである。
-
問362.固定(フィックス)レイアウトは、ウィンドウ幅に応じてコンテンツ幅がpx等の固定値から伸縮する。
正解:×(誤り)
解説:誤り。正しくは、固定レイアウトは幅を固定値で指定し、ウィンドウ幅が変わってもコンテンツ幅は変化しない。
-
問363.ノーマライズCSS(Normalize.css)は、ブラウザのデフォルトスタイルをすべて0にリセットすることを目的としている。
正解:×(誤り)
解説:誤り。正しくは、Normalize.cssは有用な既定値を残しつつブラウザ間の差異だけを揃える手法で、すべてを0にはしない。
-
問364.CSSスプライトを使うとHTTPリクエスト数が増えるため、表示速度はむしろ低下する。
正解:×(誤り)
解説:誤り。正しくは、複数画像を1枚に束ねることでリクエスト数は削減され、表示は高速化される。
-
問365.img要素のsrcset属性は、ページに表示する音声ファイルのビットレート候補を指定する属性である。
正解:×(誤り)
解説:誤り。正しくは、srcsetは複数の画像候補を解像度や幅とともに指定し最適な画像を選ばせる属性である。
-
問366.srcsetの「w記述子」は、各画像のファイルサイズをキロバイト単位で示すものである。
正解:×(誤り)
解説:誤り。正しくは、w記述子は画像の実際の横幅をピクセル単位で示すものである。
-
問367.viewportの「maximum-scale」は、ユーザーが拡大できる最小の倍率を指定する。
正解:×(誤り)
解説:誤り。正しくは、maximum-scaleはユーザーが拡大できる最大倍率を指定する。最小はminimum-scaleである。
-
問368.viewportの「device-width」は、サーバー側で設定した固定のページ幅を表すキーワードである。
正解:×(誤り)
解説:誤り。正しくは、device-widthは端末の画面幅(デバイス幅)を表すキーワードである。
-
問369.apple-touch-iconは、印刷時に用紙の余白に表示する透かしアイコンを指定するためのものである。
正解:×(誤り)
解説:誤り。正しくは、apple-touch-iconはiOSでホーム画面に追加した際に使われるアイコンを指定するものである。
-
問370.defer属性を付けた複数のスクリプトは、記述順とは無関係にダウンロード完了が早い順で実行される。
正解:×(誤り)
解説:誤り。正しくは、deferのスクリプトはHTML中の記述順で実行される。順不同なのはasyncである。
-
問371.メディアタイプ「print」は、画面表示のみを対象とし印刷時には適用されない。
正解:×(誤り)
解説:誤り。正しくは、printは印刷出力および印刷プレビューに適用されるメディアタイプである。
-
問372.メディア特性「max-width: 600px」は、ビューポート幅が600px以上のときに条件が真となる。
正解:×(誤り)
解説:誤り。正しくは、max-widthは指定値以下の幅で真となる。以上で真になるのはmin-widthである。
-
問373.メディア特性「orientation: landscape」は、幅が高さより大きい縦長表示のときに真となる。
正解:×(誤り)
解説:誤り。正しくは、landscapeは幅が高さより大きい横長表示で真となる。縦長はportraitである。
-
問374.メディアクエリでカンマ(,)は、すべての条件を満たさなければならない論理積(AND)の意味を持つ。
正解:×(誤り)
解説:誤り。正しくは、カンマは論理和(OR)で、いずれかの条件を満たせば適用される。
-
問375.解像度単位「dpi」は、1センチメートルあたりのドット数を表す。
正解:×(誤り)
解説:誤り。正しくは、dpiはdots per inchで1インチあたりのドット数を表す。cm単位はdpcmである。
-
問376.viewportで「initial-scale=1.0」と指定すると、ページが2倍に拡大された状態で初期表示される。
正解:×(誤り)
解説:誤り。正しくは、initial-scale=1.0は等倍(拡大なし)で初期表示する指定である。
-
問377.async属性を付けたスクリプトの実行順序は、複数ある場合でも記述順に従って保証される。
正解:×(誤り)
解説:誤り。正しくは、asyncはダウンロード完了順で実行され、記述順は保証されない。順序保証はdeferである。
-
問378.tel:リンクは、発信機能のないPCを含むすべての環境で必ず電話発信ダイアログを表示する。
正解:×(誤り)
解説:誤り。正しくは、tel:の挙動は環境依存で、発信機能のないPC等ではダイアログが出ないことがある。
-
問379.メディアクエリの長さ値は単位を省略しても、自動的にpxとして解釈される。
正解:×(誤り)
解説:誤り。正しくは、長さの値には単位が必須で、省略すると無効になる(0を除く)。
-
問380.レスポンシブWebデザインでは、デバイスごとに別々のURLとHTMLを用意するのが必須である。
正解:×(誤り)
解説:誤り。正しくは、レスポンシブは1つのHTMLをCSSで切り替える手法で、別URL別HTMLは必須ではない。
-
問381.viewportの「minimum-scale」は、ユーザーが拡大できる最大の倍率を指定する。
正解:×(誤り)
解説:誤り。正しくは、minimum-scaleは縮小できる最小倍率を指定する。最大はmaximum-scaleである。
-
問382.メディア特性「min-width」は、ビューポート幅が指定値以下のときに条件が真となる。
正解:×(誤り)
解説:誤り。正しくは、min-widthは指定値以上の幅で真となる。以下で真になるのはmax-widthである。
-
問383.フルードグリッドでは、列幅をすべてpxの固定値で指定して画面幅に依存しないようにする。
正解:×(誤り)
解説:誤り。正しくは、フルードグリッドは列幅を%等の相対値で指定し画面幅に応じ伸縮させる。
-
問384.次のうち、フルードイメージを実現するために画像に指定するCSSとして最も適切なものはどれか。
- ア.max-width: 100%;
- イ.min-width: 100%;
- ウ.width: 100px;
- エ.display: none;
正解:ア.max-width: 100%;
解説:max-width:100%で親要素を超えず、縮小可能なフルードイメージになる。
-
問385.viewportを指定するmeta要素のname属性の値として正しいものはどれか。
- ア.screen
- イ.viewport
- ウ.device
- エ.display
正解:イ.viewport
解説:viewportのmeta要素はname="viewport"で指定する。
-
問386.ページ読み込み時の初期表示倍率を等倍にするviewportの記述として正しいものはどれか。
- ア.maximum-scale=1
- イ.minimum-scale=1
- ウ.initial-scale=1
- エ.user-scalable=1
正解:ウ.initial-scale=1
解説:initial-scale=1で初期表示倍率を等倍にできる。
-
問387.ビューポートの幅を端末の画面幅に合わせるためのviewport記述はどれか。
- ア.height=device-height
- イ.width=auto
- ウ.scale=device
- エ.width=device-width
正解:エ.width=device-width
解説:width=device-widthでビューポート幅を端末の画面幅に合わせる。
-
問388.ユーザーによる拡大・縮小操作を禁止するviewportの記述はどれか。
- ア.user-scalable=no
- イ.zoom=no
- ウ.scalable=false
- エ.scale=fixed
正解:ア.user-scalable=no
解説:user-scalable=noでユーザーのズーム操作を無効化できる。
-
問389.メディアクエリを記述するためのアットルールはどれか。
- ア.@import
- イ.@media
- ウ.@screen
- エ.@query
正解:イ.@media
解説:@mediaを使ってメディアクエリを記述する。
-
問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.印刷時に適用するスタイルを指定するメディアタイプはどれか。
- ア.handheld
- イ.screen
- ウ.speech
- エ.print
正解:エ.print
解説:printメディアタイプで印刷・印刷プレビュー時のスタイルを指定する。
-
問392.縦長(高さが幅以上)の表示状態を表すメディア特性の値はどれか。
- ア.orientation: portrait
- イ.orientation: landscape
- ウ.orientation: vertical
- エ.orientation: column
正解:ア.orientation: portrait
解説:orientation:portraitが縦長表示を表す。
-
問393.複数のメディア特性をすべて満たす場合に適用する論理演算子はどれか。
- ア., (カンマ)
- イ.and
- ウ.or
- エ.not
正解:イ.and
解説:andは論理積で、結合した全条件を満たすときに適用される。
-
問394.メディアクエリにおいてカンマ(,)が表す論理関係はどれか。
- ア.論理積(AND)
- イ.否定(NOT)
- ウ.論理和(OR)
- エ.排他的論理和(XOR)
正解:ウ.論理和(OR)
解説:カンマは論理和(OR)で、いずれかの条件を満たせば適用される。
-
問395.メディアクエリ非対応の古いブラウザへの誤適用を防ぐために用いるキーワードはどれか。
- ア.not
- イ.and
- ウ.all
- エ.only
正解:エ.only
解説:onlyは古いブラウザの誤適用を防ぐためのキーワードである。
-
問396.解像度を表すメディア特性として正しいものはどれか。
- ア.resolution
- イ.density
- ウ.dpr
- エ.sharpness
正解:ア.resolution
解説:resolutionがデバイスのピクセル密度を表すメディア特性である。
-
問397.次の解像度単位のうち「1インチあたりのドット数」を表すものはどれか。
- ア.dpcm
- イ.dpi
- ウ.dppx
- エ.cpi
正解:イ.dpi
解説:dpiはdots per inchで1インチあたりのドット数を表す。
-
問398.「1CSSピクセルあたりのドット数」を表し、1dppx=96dpiに相当する解像度単位はどれか。
- ア.dpi
- イ.dpcm
- ウ.dppx
- エ.cm
正解:ウ.dppx
解説:dppxは1pxあたりのドット数で、1dppx=96dpiに対応する。
-
問399.img要素で複数の画像候補を解像度や幅とともに指定する属性はどれか。
- ア.src
- イ.sizes
- ウ.media
- エ.srcset
正解:エ.srcset
解説:srcsetが画像候補リストを解像度・幅とともに指定する属性である。
-
問400.img要素で各表示条件における画像の表示サイズをブラウザに伝える属性はどれか。
- ア.sizes
- イ.src
- ウ.alt
- エ.width
正解:ア.sizes
解説:sizesは表示条件ごとの画像表示幅を示し、srcsetの選択を補助する。
-
問401.srcsetでデバイスピクセル比に基づいて画像を切り替える記述子はどれか。
- ア.w記述子
- イ.x記述子
- ウ.h記述子
- エ.d記述子
正解:イ.x記述子
解説:x記述子(2x等)はデバイスピクセル比に応じて画像を切り替える。
-
問402.iOSでホーム画面に追加した際のアイコンを指定するlinkのrel値はどれか。
- ア.stylesheet
- イ.shortcut icon
- ウ.apple-touch-icon
- エ.home-icon
正解:ウ.apple-touch-icon
解説:apple-touch-iconがホーム画面追加時のアイコンを指定するrel値である。
-
問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.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.電話番号へのリンクを作成する際に用いるURLスキームはどれか。
- ア.phone:
- イ.tel:
- ウ.call:
- エ.dial:
正解:イ.tel:
解説:tel:スキームで電話発信用のリンクを作成する。
-
問406.script要素で、HTML解析完了後に記述順で実行させたい場合に付ける属性はどれか。
- ア.async
- イ.sync
- ウ.defer
- エ.blocking
正解:ウ.defer
解説:deferはHTML解析完了後に記述順でスクリプトを実行する。
-
問407.script要素のasync属性に関する説明として正しいものはどれか。
- ア.HTML解析完了後に必ず記述順で実行される
- イ.インラインスクリプトでも実行順を制御できる
- ウ.ダウンロード完了まで実行を必ず遅延し記述順を保つ
- エ.非同期にダウンロードされ、完了次第すぐ実行され順序は保証されない
正解:エ.非同期にダウンロードされ、完了次第すぐ実行され順序は保証されない
解説:asyncは非同期DLし、完了次第実行、複数時の実行順は保証されない。
-
問408.ブラウザのタブやブックマークに表示されるサイトアイコンの呼称はどれか。
- ア.ファビコン
- イ.サムネイル
- ウ.スプライト
- エ.ロゴマーク
正解:ア.ファビコン
解説:これらに表示される小さなアイコンをファビコンと呼ぶ。
-
問409.複数の画像を1枚にまとめHTTPリクエストを減らす手法の名称はどれか。
- ア.フルードイメージ
- イ.CSSスプライト
- ウ.レイジーロード
- エ.画像マップ
正解:イ.CSSスプライト
解説:CSSスプライトは画像を1枚に統合しリクエスト数を削減する手法である。
-
問410.ブラウザ間のデフォルトスタイル差をなくしつつ有用な既定値を残す手法はどれか。
- ア.リセットCSS
- イ.CSSスプライト
- ウ.ノーマライズCSS
- エ.インラインCSS
正解:ウ.ノーマライズCSS
解説:ノーマライズCSSは有用な既定値を残しつつブラウザ差を揃える。
-
問411.ウィンドウ幅に応じてコンテンツ幅が%等で伸縮するレイアウトの呼称はどれか。
- ア.固定レイアウト
- イ.印刷レイアウト
- ウ.グリッド固定レイアウト
- エ.リキッドレイアウト
正解:エ.リキッドレイアウト
解説:リキッド(フルード)レイアウトは幅が相対値で伸縮するレイアウトである。
-
問412.フルードグリッドでターゲット幅の%値を求める計算式として正しいものはどれか。
- ア.対象幅 ÷ 親要素幅 × 100
- イ.対象幅 × 親要素幅 ÷ 100
- ウ.親要素幅 ÷ 対象幅 × 100
- エ.対象幅 ÷ 100 × 親要素幅
正解:ア.対象幅 ÷ 親要素幅 × 100
解説:フルードグリッドは target ÷ context × 100(%)で求める。
-
問413.viewportで縮小できる最小倍率を指定するプロパティはどれか。
- ア.initial-scale
- イ.minimum-scale
- ウ.maximum-scale
- エ.user-scalable
正解:イ.minimum-scale
解説:minimum-scaleはユーザーが縮小できる下限倍率を指定する。
-
問414.HTTPのGETメソッドは、サーバーからリソースを取得するために使用される。
正解:○(正しい)
解説:GETは指定したリソースの取得に用いる代表的なメソッドである。
-
問415.HTTPのHEADメソッドは、レスポンスボディ(本体)を含めてヘッダ情報を取得する。
正解:×(誤り)
解説:誤り。正しくはHEADはボディを含めず、ヘッダ情報のみを取得する。
-
問416.HTTPのPUTメソッドは、指定したURIにリソースを置き換える(または作成する)際に使用される。
正解:○(正しい)
解説:PUTは指定URIへのリソースの作成・置換に用いる。
-
問417.ステータスコード404は、サーバー内部でエラーが発生したことを示す。
正解:×(誤り)
解説:誤り。正しくは404はリソースが見つからない(Not Found)を示し、サーバー内部エラーは500である。
-
問418.ステータスコード301は、リソースが恒久的に別のURIへ移動したことを示す。
正解:○(正しい)
解説:301 Moved Permanentlyは恒久的なリダイレクトを示す。
-
問419.ステータスコード302は、リソースが恒久的に移動したことを示す。
正解:×(誤り)
解説:誤り。正しくは302はFound(一時的な移動)を示し、恒久的な移動は301である。
-
問420.ステータスコード304は、リソースが未更新でありキャッシュが利用可能であることを示す。
正解:○(正しい)
解説:304 Not Modifiedはキャッシュが有効で再取得不要を示す。
-
問421.ステータスコード500は、クライアントのリクエストが不正であることを示す。
正解:×(誤り)
解説:誤り。正しくは500はサーバー内部エラーを示し、不正なリクエストは400である。
-
問422.ステータスコード403は、サーバーがリクエストを理解したが認可されず処理を拒否したことを示す。
正解:○(正しい)
解説:403 Forbiddenはアクセス権限がなく拒否されたことを示す。
-
問423.ステータスコードの4xx系はサーバー側のエラーを表す。
正解:×(誤り)
解説:誤り。正しくは4xxはクライアントエラー、5xxがサーバーエラーを表す。
-
問424.HTTP/2では、1つのTCP接続上で複数のリクエスト/レスポンスを多重化できる。
正解:○(正しい)
解説:HTTP/2はストリームの多重化により並行通信が可能である。
-
問425.HTTP/1.1はバイナリ形式、HTTP/2はテキスト形式でメッセージをやり取りする。
正解:×(誤り)
解説:誤り。正しくはHTTP/1.1がテキスト形式、HTTP/2がバイナリ形式である。
-
問426.HTTP/1.1ではKeep-Aliveにより1つのTCP接続を継続して使い回すことができる。
正解:○(正しい)
解説:HTTP/1.1は持続的接続(Keep-Alive)を標準でサポートする。
-
問427.HTTPはステートフルなプロトコルであり、各リクエスト間で状態を自動的に保持する。
正解:×(誤り)
解説:誤り。正しくはHTTPはステートレスで、状態は自動的に保持しない。
-
問428.cookieはサーバーがSet-Cookieヘッダで発行し、クライアントはCookieヘッダで送り返す。
正解:○(正しい)
解説:レスポンスのSet-CookieとリクエストのCookieで授受される。
-
問429.Basic認証では、ユーザー名とパスワードが暗号化されて送信される。
正解:×(誤り)
解説:誤り。正しくはBasic認証はBase64でエンコードされるだけで暗号化されない。
-
問430.Digest認証は、パスワードそのものではなくハッシュ化した値を送信するためBasic認証より安全とされる。
正解:○(正しい)
解説:Digest認証はMD5などのハッシュ値を用いるため平文送信を避けられる。
-
問431.HTTPSはSSL/TLSによって通信内容を暗号化するHTTP通信である。
正解:○(正しい)
解説:HTTPSはTLS/SSL上でHTTP通信を行い暗号化する。
-
問432.HTTPSの標準ポート番号は80である。
正解:×(誤り)
解説:誤り。正しくはHTTPSの標準ポートは443で、80はHTTPである。
-
問433.Content-Typeヘッダは、送受信するデータのメディアタイプ(MIMEタイプ)を示す。
正解:○(正しい)
解説:Content-Typeはボディのメディアタイプを指定するヘッダである。
-
問434.Authorizationヘッダは、認証情報をサーバーへ送るレスポンスヘッダである。
正解:×(誤り)
解説:誤り。正しくはAuthorizationは認証情報を送るリクエストヘッダである。
-
問435.URIはリソースを識別するための統一的な識別子の総称であり、URLはその一種である。
正解:○(正しい)
解説:URLはURI(統一資源識別子)の部分集合にあたる。
-
問436.http://example.com:8080/path?key=value のうち、8080はポート番号を表す。
正解:○(正しい)
解説:ホスト名の後のコロンに続く数値はポート番号である。
-
問437.HTML5の文字エンコーディング指定は <meta charset="UTF-8"> のように記述する。
正解:○(正しい)
解説:HTML5ではmeta要素のcharset属性で文字コードを指定する。
-
問438.html要素のlang属性は、文書の自然言語を指定するために使用される。
正解:○(正しい)
解説:lang属性は文書の言語(例 ja)を示す。
-
問439.文字参照 < は大なり記号(>)を表す。
正解:×(誤り)
解説:誤り。正しくは < は小なり(<)を表し、大なり(>)は > である。
-
問440.文字参照 は改行しないスペース(ノーブレークスペース)を表す。
正解:○(正しい)
解説: は折り返さない空白文字を表す。
-
問441.文字参照 ¥ はアンパサンド(&)を表す。
正解:×(誤り)
解説:誤り。正しくは ¥ は円記号(¥)を表し、&は & である。
-
問442.title要素はbody要素内に記述する。
正解:×(誤り)
解説:誤り。正しくはtitle要素はhead要素内に記述する。
-
問443.link要素は、外部CSSファイルなどの関連リソースを文書に関連付ける際に用いられる。
正解:○(正しい)
解説:link要素は外部スタイルシートなどとの関連付けに使う。
-
問444.meta要素は終了タグを持つ通常要素である。
正解:×(誤り)
解説:誤り。正しくはmeta要素は終了タグを持たない空要素である。
-
問445.PNGは可逆圧縮の画像フォーマットであり、画質を劣化させずに圧縮できる。
正解:○(正しい)
解説:PNGは可逆圧縮の画像形式で、圧縮しても画質が劣化しない。透過(アルファチャンネル)にも対応する。
-
問446.JPEGは可逆圧縮であり、保存を繰り返しても画質が劣化しない。
正解:×(誤り)
解説:誤り。正しくはJPEGは非可逆圧縮で、保存を繰り返すと画質が劣化する。
-
問447.GIFは最大256色までしか扱えない画像フォーマットである。
正解:○(正しい)
解説:GIFは8ビット(256色)までのインデックスカラーである。
-
問448.JPEGは透過(透明)情報を保持できる。
正解:×(誤り)
解説:誤り。正しくはJPEGは透過に非対応で、透過はPNGやGIFが対応する。
-
問449.PNGはアルファチャンネルによる半透明表現に対応している。
正解:○(正しい)
解説:PNGはアルファチャンネルで滑らかな半透明を表現できる。
-
問450.インタレースは、画像を一度に全体表示してから一部を消す表示方式である。
正解:×(誤り)
解説:誤り。正しくはインタレースは粗い画像から段階的に鮮明化する表示方式である。
-
問451.Ajaxは、ページ全体を再読み込みせずにサーバーと非同期通信を行う技術である。
正解:○(正しい)
解説:Ajaxは非同期通信で画面の部分更新を実現する。
-
問452.Data URIスキームを使うと、画像などのデータをHTMLやCSS内に直接埋め込める。
正解:○(正しい)
解説:Data URIはデータを文書内にインライン埋め込みできる。
-
問453.DOMは、HTML文書を木構造として表現しプログラムから操作可能にする仕組みである。
正解:○(正しい)
解説:DOMは文書をツリー構造で表しスクリプトから操作できる。
-
問454.MVCアーキテクチャのViewは、データベースとのやり取りやビジネスロジックを担当する。
正解:×(誤り)
解説:誤り。正しくはViewは表示を担当し、データやロジックはModelが担う。
-
問455.カスタムデータ属性は data-* の形式で記述し、任意のデータをHTML要素に持たせられる。
正解:○(正しい)
解説:data-*属性は独自データを要素に付与できる。
-
問456.cookieはWebサイトをまたいで全ドメインのデータを自由に共有できる仕組みである。
正解:×(誤り)
解説:誤り。正しくはcookieはドメインやパスの制約があり任意のドメインで共有できない。
-
問457.PNGはGIFと同様に256色までしか扱えない。
正解:×(誤り)
解説:誤り。正しくはPNGはフルカラー(24/32ビット)に対応し256色制限はない。
-
問458.style要素はbody要素内にしか記述できず、head内には書けない。
正解:×(誤り)
解説:誤り。正しくはstyle要素は通常head内に記述する(条件付きでbody内も可)。
-
問459.HTTPで「リソースが見つからない」ことを示すステータスコードはどれか。
- ア.200
- イ.301
- ウ.404
- エ.500
正解:ウ.404
解説:404 Not Foundはリソースが見つからないことを示す。
-
問460.サーバー内部でエラーが発生したことを示すステータスコードはどれか。
- ア.500
- イ.403
- ウ.302
- エ.400
正解:ア.500
解説:500 Internal Server Errorはサーバー内部エラーを示す。
-
問461.リソースが恒久的に別URIへ移動したことを示すステータスコードはどれか。
- ア.302
- イ.304
- ウ.200
- エ.301
正解:エ.301
解説:301 Moved Permanentlyは恒久的な移動を示す。
-
問462.キャッシュが有効で再取得が不要なことを示すステータスコードはどれか。
- ア.200
- イ.304
- ウ.404
- エ.403
正解:イ.304
解説:304 Not Modifiedは未更新でキャッシュ利用可を示す。
-
問463.HTTPSが標準で使用するポート番号はどれか。
- ア.80
- イ.8080
- ウ.443
- エ.21
正解:ウ.443
解説:HTTPS(SSL/TLS)の標準ポート番号は443である。なお平文のHTTPは80番を使用する。
-
問464.サーバーからリソースを取得する目的で使われるHTTPメソッドはどれか。
- ア.GET
- イ.POST
- ウ.DELETE
- エ.PUT
正解:ア.GET
解説:GETはリソース取得に用いるメソッドである。
-
問465.レスポンスのヘッダ情報のみを取得し、ボディを返さないHTTPメソッドはどれか。
- ア.GET
- イ.HEAD
- ウ.OPTIONS
- エ.POST
正解:イ.HEAD
解説:HEADはボディを含めずヘッダのみを取得する。
-
問466.指定したリソースの削除を要求するHTTPメソッドはどれか。
- ア.PUT
- イ.POST
- ウ.HEAD
- エ.DELETE
正解:エ.DELETE
解説:DELETEメソッドは、指定したリソースの削除をサーバーに要求するHTTPメソッドである。
-
問467.送受信データのメディアタイプ(MIMEタイプ)を示すHTTPヘッダはどれか。
- ア.Content-Type
- イ.Accept
- ウ.Cache-Control
- エ.Authorization
正解:ア.Content-Type
解説:Content-Typeはボディのメディアタイプを示す。
-
問468.クライアントが受理可能なメディアタイプをサーバーへ伝えるリクエストヘッダはどれか。
- ア.Authorization
- イ.Accept
- ウ.Content-Type
- エ.Set-Cookie
正解:イ.Accept
解説:Acceptは受理可能なコンテンツタイプを示す。
-
問469.認証情報をサーバーへ送るために使われるリクエストヘッダはどれか。
- ア.Accept
- イ.Cache-Control
- ウ.Authorization
- エ.Location
正解:ウ.Authorization
解説:Authorizationは認証情報を送るリクエストヘッダである。
-
問470.キャッシュの動作を制御するために用いられるHTTPヘッダはどれか。
- ア.Accept
- イ.Content-Type
- ウ.Authorization
- エ.Cache-Control
正解:エ.Cache-Control
解説:Cache-Controlはキャッシュ制御に用いる。
-
問471.Basic認証で送信される認証情報の符号化方式はどれか。
- ア.AES暗号化
- イ.Base64エンコード
- ウ.MD5ハッシュ
- エ.RSA暗号化
正解:イ.Base64エンコード
解説:Basic認証はBase64でエンコードされる(暗号化ではない)。
-
問472.バイナリデータをテキストとして扱えるよう変換する符号化方式はどれか。
- ア.URLエンコード
- イ.ROT13
- ウ.Base64
- エ.Gzip
正解:ウ.Base64
解説:Base64はバイナリを64種の文字でテキスト化する。
-
問473.ページ全体を再読み込みせず非同期にサーバーと通信する技術はどれか。
- ア.CGI
- イ.SSI
- ウ.RSS
- エ.Ajax
正解:エ.Ajax
解説:Ajaxはページ全体を再読み込みせず、非同期にサーバーと通信してページの一部だけを更新する技術。
-
問474.非可逆圧縮で、写真などに適し透過に対応しない画像フォーマットはどれか。
- ア.JPEG
- イ.PNG
- ウ.GIF
- エ.BMP
正解:ア.JPEG
解説:JPEGは非可逆圧縮で写真向き、透過非対応である。
-
問475.可逆圧縮かつアルファチャンネルによる半透明に対応する画像フォーマットはどれか。
- ア.JPEG
- イ.PNG
- ウ.BMP
- エ.JPEG 2000
正解:イ.PNG
解説:PNGは可逆圧縮でアルファチャンネルに対応する。
-
問476.最大256色までで、アニメーションにも対応する画像フォーマットはどれか。
- ア.PNG
- イ.JPEG
- ウ.GIF
- エ.BMP
正解:ウ.GIF
解説:GIFは256色でアニメーションに対応する。
-
問477.一般に圧縮を行わずファイルサイズが大きくなりやすい画像フォーマットはどれか。
- ア.JPEG
- イ.GIF
- ウ.PNG
- エ.BMP
正解:エ.BMP
解説:BMPは無圧縮が一般的でサイズが大きい。
-
問478.入力値を悪用して不正なSQL文を実行させる攻撃はどれか。
- ア.SQLインジェクション
- イ.XSS
- ウ.CSRF
- エ.ディレクトリトラバーサル
正解:ア.SQLインジェクション
解説:SQLインジェクションは入力経由でDBに不正な問い合わせを行う。
-
問479.Webページに悪意あるスクリプトを埋め込み閲覧者のブラウザで実行させる攻撃はどれか。
- ア.SQLインジェクション
- イ.クロスサイトスクリプティング
- ウ.CSRF
- エ.セッションハイジャック
正解:イ.クロスサイトスクリプティング
解説:XSSは閲覧者ブラウザで不正スクリプトを実行させる。
-
問480.利用者の意図しないリクエストを送信させ、なりすまし操作を行わせる攻撃はどれか。
- ア.XSS
- イ.SQLインジェクション
- ウ.CSRF
- エ.DoS
正解:ウ.CSRF
解説:CSRFは認証済み利用者に意図しない操作をさせる。
-
問481.相対パスなどを悪用し公開範囲外のファイルへアクセスする攻撃はどれか。
- ア.XSS
- イ.CSRF
- ウ.SQLインジェクション
- エ.ディレクトリトラバーサル
正解:エ.ディレクトリトラバーサル
解説:ディレクトリトラバーサルはパス操作で非公開ファイルへアクセスする。
-
問482.HTML文書をツリー構造で表現しプログラムから操作可能にする仕組みはどれか。
- ア.DOM
- イ.SAX
- ウ.JSON
- エ.XSLT
正解:ア.DOM
解説:DOM(Document Object Model)はHTML文書をツリー構造で表現し、プログラムから要素を操作可能にする仕組み。
-
問483.アプリケーションをModel・View・Controllerに分離する設計手法はどれか。
- ア.MVC
- イ.MVVM
- ウ.MVP
- エ.SPA
正解:ア.MVC
解説:MVCはモデル・ビュー・コントローラに責務を分離する。
-
問484.任意の独自データをHTML要素に持たせるために用いる属性はどれか。
- ア.aria-*
- イ.data-*属性
- ウ.role属性
- エ.rel属性
正解:イ.data-*属性
解説:data-*はカスタムデータ属性で独自データを付与できる。
-
問485.アンパサンド(&)を表す文字参照はどれか。
- ア.<
- イ.>
- ウ.&
- エ.
正解:ウ.&
解説:アンパサンド(&)を表す文字参照は & である。なお < と > はそれぞれ < と > で表す。
-
問486.複数のリクエストにまたがり利用者の状態を保持する仕組みはどれか。
- ア.キャッシュ
- イ.リダイレクト
- ウ.プロキシ
- エ.セッション
正解:エ.セッション
解説:セッションはリクエストをまたいで状態を維持する。
-
問487.HTML内に意味(セマンティクス)を付与してデータを構造化する仕組みはどれか。
- ア.マイクロデータ
- イ.Data URI
- ウ.Ajax
- エ.Base64
正解:ア.マイクロデータ
解説:マイクロデータはitemscope等で文書に意味情報を付加する。
-
問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で文字コードを指定する。