-
-
【ウェブデザイン技能検定】3級学科試験対策オリジナル演習問題一覧
続きを見る
ウェブデザイン技能検定3級の対策オリジナル演習問題(全25問)となっています。本演習問題は、該当回に対応できるように作成しています。
過去問はウェブデザイン技能検定の公式HPより取得できます。
正誤判定⚪︎×問題:第1問~第10問
第1問
HTMLでは、h1要素の内部にstrong要素を記述することができる。
正解:○
解説:strong要素はフレージングコンテンツであり、h1要素の内容として記述できます。見出しの一部を強調する用途でも利用できます。
第2問
異なるウェブブラウザ環境(Google Chrome、Safari、Microsoft Edgeなど)を複数使用し、制作したウェブサイトがデザイン通りに表示され、機能が正常に動作するかを検証することを「クロスブラウザチェック」という。
正解:○
解説:ウェブページが、複数の異なるブラウザにおいて仕様書の通りに正しく表示され、問題なく動作するかどうかを確認する検証作業を「クロスブラウザチェック」と呼ぶ。
第3問
著作権は産業財産権の一種である。
正解:×
解説:著作権は「知的財産権」の一種ですが、「産業財産権」には含まれません。
第4問
デジタル画面を用いたデスクワーク(VDT作業)における作業者の心身への負担を抑えるには、事業者が適切な照明やディスプレイ配置などの環境整備を行うことや、連続して過度な長時間作業にならないよう適度な休憩を促すような作業管理を行うことが求められる。
正解:○
解説:厚生労働省の「情報機器作業における労働衛生管理のためのガイドライン」に基づき、作業環境管理(照度やディスプレイの調整など)と作業管理(連続作業時間の制限や休止時間の確保など)を適正に行うことが重要視されています。
第5問
JPEG形式は透明部分(透過)を設定できる画像フォーマットである。
正解:×
解説:JPEG形式は透過に対応していません。透過画像が必要な場合はPNGやGIFなどを利用します。
第6問
img要素に対してalt属性を設定していれば、alt属性で設定したテキストの内容が適切でなくてもアクセシビリティは十分確保される。
正解:×
解説:alt属性は設定するだけでは不十分です。画像の内容や役割を適切に伝える代替テキストを記述して初めてアクセシビリティ向上につながります。
第7問
PNG形式と比較した場合、GIF形式はフルカラー(約1,677万色)を扱える可逆圧縮画像形式である。
正解:×
解説:PNG形式の説明文です。GIF形式は最大256色までしか扱えません。可逆圧縮画像形式で約1,677万色を扱えるのはPNGです。
第8問
HTMLには、終了タグを省略できる要素が存在する。
正解:○
解説:li 要素や p 要素など、一部のHTML要素は条件付きで終了タグを省略できます。
第9問
Basic認証では通信内容が自動的に暗号化されるため、HTTPSを利用しなくても安全性が高い。
正解:×
解説:Basic認証では、通信内容は自動的に暗号化されません。そのため、HTTPSを利用しない(HTTPのままの)通信環境では、セキュリティ上の安全性が極めて低い状態になります。
第10問
HTMLのimg要素は、フレージングコンテンツに分類される要素である。
正解:○
解説:img要素は文章中に配置できるフレージングコンテンツであり、段落内などにも配置できます。
四者択一:第11問~第25問
第11問
自己増殖しながらネットワーク経由で他のコンピュータへ感染を広げる特徴をもつマルウェアはどれか。
- トロイの木馬
- ワーム
- ランサムウェア
- スパイウェア
正解:2
解説:ワーム:自己増殖能力を持ち、他のファイルやプログラムに感染することなく、単体でネットワーク経由で他のコンピュータへ拡大・感染を広げるのが最大の特徴です。
トロイの木馬:無害なプログラムや便利なファイルになりすましてコンピュータに侵入し、裏で悪質な処理を行います。単体での自己増殖能力はありません。
ランサムウェア:ファイルを暗号化したりシステムをロックしたりして閲覧不可にし、元に戻すことと引き換えに金銭(身代金)を要求するマルウェアです。
スパイウェア:ユーザーに気づかれないように個人情報や操作履歴(キーボード入力、パスワードなど)を収集し、外部へ送信するマルウェアです。
第12問
漏えいしたIDとパスワードの組み合わせを利用し、複数のWebサービスへのログインを試みる攻撃手法はどれか。
- ブルートフォース攻撃
- パスワードリスト攻撃
- パスワード推測攻撃
- DDOS攻撃
正解:2
解説:パスワードリスト攻撃は、他サービスから流出した認証情報を利用して不正ログインを試みる攻撃です。
第13問
OSI参照モデルにおいて、第2層に分類されるものはどれか。最も適切なものを1つ選びなさい。
- データリンク層
- ネットワーク層
- トランスポート層
- 物理層
正解:1
解説:第1層:物理層(物理的な接続や信号の変換)
第2層:データリンク層(隣接する機器間でのデータ伝送・MACアドレス等)
第3層:ネットワーク層(ネットワーク間のルーティング・IPアドレス等)
第4層:トランスポート層(信頼性の高い通信の確立・TCP/UDP等)
第5層:セッション層(通信の開始から終了までの管理)
第6層:プレゼンテーション層(データの形式変換・暗号化等)
第7層:アプリケーション層(具体的なネットワークサービス・HTTP/SMTP等)
第14問
視覚障害のある方が利用する「音声読み上げソフト(スクリーンリーダー)」などに配慮した、Webアクセシビリティとして最も適切なリンクテキストの表現はどれか。
- 詳細はこちら
- ここをクリック
- [PDF]
- ウェブデザイン技能検定の概要
正解:4
解説:音声読み上げソフトの利用者は、ページ内の「リンクだけ」を一挙にリストアップして目的のページを探す機能を使うことがあります。その際、「こちら」や「ここ」という単語だけだと、どこに移動するリンクなのか分かりません 。単体で読んでもリンク先のコンテンツが推測できる「ウェブデザイン技能検定の概要」が最も適切です 。
第15問
HTMLで、利用者が1行の文字列を入力するためのフォーム部品を作成する要素はどれか。
- textarea
- input
- form
- label
正解:2
解説:input要素は1行入力欄などさまざまな入力部品を作成できます。textareaは複数行入力用です。
第16問
HTMLのinput要素で、日付と時刻をまとめて入力できる入力欄を作成したい。type属性に指定する値として適切なものを1つ選びなさい。
- datetime-local
- datetime
- date-time
- localtime
正解:1
解説:type="datetime-local"を指定すると、タイムゾーンを含まない日付と時刻を入力するフォームを作成できます。HTML Living Standardで利用されている入力タイプです。
第17問
次のCSSを設定した場合、リンクにマウスポインターを重ねたときの文字色として正しいものを選びなさい。
CSS
a:hover { color: blue; }
a:active { color: yellow; }
a:link { color: yellow; }
a:visited { color: red; }
- 赤色
- 黄色
- 青色
- 黒色
正解:3
解説:a:hover(マウスポインターを重ねたとき):color: blue;(青色)
a:active(クリック中・押しているとき):color: yellow;(黄色)
a:link(未訪問のリンク):color: yellow;(黄色)
a:visited(訪問済みのリンク):color: red;(赤色)
問題文は「マウスポインターを重ねたとき」の状態について尋ねているため、a:hover に指定されている青色(blue)が適用されます。実際に意図通りに動作させるには、CSSの記述順序も重要になります。一般的には LVHA(:link → :visited → :hover → :active)の順で記述するのがルールとされています。今回のコードでは :hover の設定が機能する順序で書かれているため、問題なく青色が適用されます。
第18問
JIS X 8341-3(ウェブアクセシビリティ)の達成基準1.4.3では、次の文章中のAに入る語句として最も適切なものを選びなさい。
通常サイズの文字や文字画像を視覚的に表示する場合は、少なくとも 4.5:1 の A 比 を満たさなければならない。
- 明度
- 彩度
- コントラスト
- 解像度
正解:3
解説:達成基準1.4.3では、文字と背景とのコントラスト比を十分に確保することが求められています。通常の文字では4.5:1以上が基準です。
第19問
次のCSSが指定されているとき、id="top" が設定された p要素 の文字色として正しいものを選びなさい。
CSS
p#top {
color: black;
}
p {
color: blue;
}
#top {
color: red;
}
- 赤色
- 青色
- 黒色
- 白色
正解:3
解説:CSSでは、複数のセレクタが同じ要素に対してバッティング(競合)した場合、詳細度(優先度)が高いスタイルが適用されます。各セレクタの詳細度を計算すると以下のようになります。
p#top : 詳細度 101(idセレクタ ×1 + 要素セレクタ ×1)
#top : 詳細度 100(idセレクタ ×1)
p : 詳細度 1(要素セレクタ ×1)
最も詳細度(優先度)が高いのは p#top(101)であるため、そこに指定されている 黒色(color: black;) が適用されます。
第20問
HTMLの表(table)で、1行を表す要素はどれか。最も適切なものを1つ選びなさい。
- thead要素
- tr要素
- td要素
- col要素
正解:2
解説:trは表の1行を表します。tdはセル、colは列の属性指定、theadは表の見出し部分を表す要素です。
第21問
Unicodeに対応した文字コードとして適切なものを1つ選びなさい。
- Shift_JIS
- ISO-2030-JP
- UTF-8
- EUC-JP
正解:3
解説:UTF-8はUnicodeを表現する代表的な文字符号化方式であり、現在のWebページでも広く利用されています。
第22問
JIS X 8341-3(ウェブアクセシビリティ)の達成基準1.4.1では、次の文章中のAに入る語句として最も適切なものを選びなさい。
色は、情報を伝えたり、操作を促したり、要素を識別したりするためのA視覚的手段であってはならない。
- 唯一の
- 補足的な
- 一時的な
- 限定的な
正解:1
解説:色だけで情報を伝えないことが求められています。そのため、「唯一の」が適切です。
第23問
HTMLとCSSの説明として正しい組み合わせを選びなさい。
- HTML:データベース言語 CSS:プログラミング言語
- HTML:プログラミング言語 CSS:マークアップ言語
- HTML:マークアップ言語 CSS:スタイルシート言語
- HTML:スクリプト言語 CSS:マークアップ言語
正解:3
解説:HTMLは文書構造を記述するマークアップ言語、CSSは見た目を定義するスタイルシート言語である。
第24問
次のCSSを指定した場合の表示として、最も適切なものを1つ選びなさい。
CSS
p {
border-bottom: 1px dotted black;
}
- すべての要素に黒い点線の下線が表示される。
- p要素全体を囲む黒い点線の枠線が表示される。
- p要素の下側に黒点線の境界線が表示される。
- p要素には境界線は表示されない。
正解:3
解説:border-bottomは要素の下側だけに境界線を設定します。そのため、p要素の下辺に黒い点線が表示されます。
第25問
select要素内の選択肢をページ表示時から選択済みにしておきたい。このとき、対象となるoption要素に指定する属性はどれか。
- selected
- checked
- default
- active
正解:1
解説:selected属性を指定すると、そのoptionが初期選択状態になります。checkedはチェックボックスやラジオボタンで使用します。
-
-
【ウェブデザイン技能検定】3級学科試験対策オリジナル演習問題一覧
続きを見る