【ウェブデザイン技能検定】3級学科試験対策オリジナル演習問題一覧
続きを見る
ウェブデザイン技能検定3級の対策オリジナル演習問題(全25問)となっています。本演習問題は、該当回に対応できるように作成しています。
過去問はウェブデザイン技能検定の公式HP より取得できます。
正誤判定⚪︎ ×問題:第1問~第10問
第1問
CSSで「color: #00ff00;」というカラーコードの指定を行うと、対象となる要素のテキストカラーは赤色で描写される。
▼ 解 答 ▼
解答:×
解説: カラーコード「#00ff00」は、RGB(赤・緑・青)の成分のうち緑(Green)のみが最大値であることを示しているため、文字の色は「緑色」になります。赤色にする場合は「#ff0000」と指定します。
第2問
データベース内のユーザー認証情報を安全に保護・管理するためには、パスワードを暗号化(ハッシュ化)せずに平文(プレーンテキスト)の状態で保存することが推奨される。
▼ 解 答 ▼
解答:×
解説:パスワードを平文で保存すると、万が一データベースが漏洩した際に第三者に悪用されるリスクが極めて高くなります。セキュリティの観点から、必ずソルトを付与した上でハッシュ化するなど、復元不可能な状態で保存する必要があります。
第3問
画像ファイル形式の一種であるGIF形式は、PNG形式やSVG形式と同様に、アルファチャンネル(256段階などの透明度)を利用した滑らかな半透明のグラデーション画像を作成できる。
▼ 解 答 ▼
解答:×
解説: GIF形式がサポートしている透明化は「特定の1色を完全に透明にする(透過GIF)」機能のみであり、グラデーションを伴うような「半透明(不透明度50%など)」の表現はできません。半透明を扱うにはPNG形式などを使用する必要があります。
第4問
id 属性はグローバル属性に分類されるため、HTMLの記述において原則としてすべての要素に付与することが可能である。
▼ 解 答 ▼
解答:○
解説:id 属性や class 属性、style 属性などは「グローバル属性」と呼ばれ、特定の要素に限らず、HTML5以降のすべてのHTML要素に指定することができます。
第5問
img 要素における alt 属性の本来の役割は、通信エラーやブラウザの設定などで画像が非表示になった際、その画像の「代わり」として機能する等価な代替テキストを記述することではなく、画像の周囲に表示する補足的なキャプション文を記述することである。
▼ 解 答 ▼
解答:×
解説: alt 属性は「Alternative(代替)」の略であり、画像が表示できない環境やスクリーンリーダーによる音声読み上げにおいて、画像の代わりを果たすテキストを記述するものです。補足説明やキャプションには figcaption 要素などを使用します。
第6問
運用が終了して長期間更新されていないウェブサイトや、不要になった古いページであっても、過去の情報資産をそのまま維持するために、アクセス可能な状態のままインターネット上に永続的に公開し続けるべきである。
▼ 解 答 ▼
解答:×
解説: 管理されていない古いページやサイトを放置すると、セキュリティホールの原因になったり、古い誤った情報をユーザーに提供し続けたりするリスクがあります。不要になったWeb資産は適切に閉鎖、またはアクセス制限をかけるべきです。
第7問
著作権法が定める著作者の権利(著作権)の具体的な内容として、著作物を無断で複製されないように保護する「複製権」が含まれている。
▼ 解 答 ▼
解答:○
解説: 複製権は著作権(財産権)の最も基本的な権利の一つであり、著作物を印刷、写真、複写、録音、録画などの方法によって物理的・デジタル的に複製する権利を著作者が独占することを定めています。
第8問
HTMLの video 要素で動画ファイルを埋め込む際、 controls 属性を付与することで、ブラウザ標準の再生・一時停止ボタンや音量調節バーなどの操作インターフェースが画面上に表示される。
▼ 解 答 ▼
解答:○
解説: controls 属性は論理属性(Boolean属性)であり、これが指定されるとブラウザはユーザーが動画をコントロールするためのUI(再生、一時停止、シークバー、音量など)を自動的に表示します。
第9問
有名なブランド、クレジットカード会社、またはインターネットバンキングなどの正規の組織を偽り、偽造されたWebページ(フィッシングサイト)にユーザーを誘導して、暗証番号やアカウントのログイン情報を不正に盗み出す犯罪行為を「フィッシング詐欺」と呼ぶ。
▼ 解 答 ▼
解答:○
解説: 記述の通りです。電子メールやSMS等で偽のリンクを送りつけ、本物そっくりの偽サイトでID・パスワード・クレジットカード番号などの個人情報を入力させて詐取する行為を指します。
第10問
デジタル画面を用いたデスクワーク(VDT作業)における作業者の心身への負担を抑えるには、事業者が適切な照明やディスプレイ配置などの環境整備を行うことや、連続して過度な長時間作業にならないよう適度な休憩を促すような作業管理を行うことが求められる。
▼ 解 答 ▼
解答:○
解説: 厚生労働省の「情報機器作業における労働衛生管理のためのガイドライン」に基づき、作業環境管理(照度やディスプレイの調整など)と作業管理(連続作業時間の制限や休止時間の確保など)を適正に行うことが重要視されています。
四者択一:第11問~第25問
第11問
ネットワーク通信の階層モデルである「OSI基本参照モデル」において、最上位に位置する「アプリケーション層(第7層)」で動作するプロトコルはどれか。
TCP
MAC
IP
HTTP
▼ 解 答 ▼
解答:4
解説:HTTPはアプリケーション層(第7層)で、WebブラウザとWebサーバーの間で、HTMLや画像などのデータをやり取りするために使われるプロトコルです。TCPはトランスポート層(第4層)で、データの信頼性を確保するためのプロトコルです。MACはデータリンク層(第2層)で、ネットワーク機器(LANカードなど)に一意に割り当てられた物理アドレスをさします。IPはネットワーク層(第3層)で、インターネット上でデータを目的地まで届ける(ルーティングする)ためのプロトコルです。
第12問
Webサイトにおいてクライアント(ブラウザ)側に一時的にデータを保存する「HTTP Cookie(クッキー)」の主な利用目的として、技術的に「当てはまらない」ものはどれか。
ユーザーのPC内にあるファイルのウィルス検出・スキャン
ECサイトのショッピングカートの状態保持などのセッション管理
ユーザーごとの言語設定や表示モードを維持するパーソナライズ
アクセス解析ツールを用いたユーザーのサイト内行動のトラッキング
▼ 解 答 ▼
解答:1
解説:CookieはWebブラウザが管理する小さなテキストデータであり、Webサーバーとの間で状態をやり取りするための仕組みです。サンドボックスの制限があるため、クライアント端末のローカルファイルにアクセスしてウィルススキャンを行うような特権的な操作は不可能です。
第13問
ウェブコンテンツのアクセシビリティ方針を定めたJIS規格「JIS X 8341-3:2016」の「入力支援」に関するガイドラインにおいて、重視されているアプローチはどれか。
利用者の操作エラーを未然に防ぎ、もし間違えた場合でも簡単に修正できるように支援する。
すべてのフォームに対してAIによる自動的なサジェスト(入力候補提示)を必須とする。
ブラウザのオートコンプリート(自動補完)機能を完全に無効化してセキュリティを高める。
すべての入力欄のラベルを非表示にし、プレースホルダーのみで入力補助を行う。
▼ 解 答 ▼
解答:1
解説:ユーザーが入力ミスを犯しにくくすること、およびミスが発生した際にそれを特定して修正を容易にすることが求められています。
第14問
インターネット通信で用いられるトランスポート層のプロトコルのうち、データの到達確認や並び替えを行わない代わりにオーバーヘッドが少なく、動画のリアルタイム配信やインターネットを用いた動画のリアルタイム配信やオンラインの音声通話システムにおいて、多少のデータ欠損(音飛びや映像の一瞬の乱れ)を許容する代わりに、通信の遅延(タイムラグ)を最小限に抑える目的で採用されているトランスポート層のプロトコルはどれか。以下より1つ選択しなさい。
TCP
UDP
TLS
HTTP
▼ 解 答 ▼
解答:2
解説:リアルタイム性が最優先される通信には、事前の接続確立(ハンドシェイク)や到達確認を省略してデータを一方的に送り出す「コネクションレス型」のプロトコルである UDP(User Datagram Protocol)が適しています。「TCP」は、データを送信する前に相手との接続を確立し、データが届いたかを1つずつ確認しながら通信し、データが途中で消えたり順番が入れ替わったりした場合は、再送要求や並び替えを自動で行います。「TLS」は、インターネット上の通信を暗号化するためのプロトコルで、トランスポート層の上の層(アプリケーション層との間)で動作するものであり、TCPと組み合わせて「HTTPS」などを実現します。「HTTP」は、WebブラウザとWebサーバーの間で、HTMLなどのデータをやり取りするためのプロトコルで、アプリケーション層のプロトコルであり、下位のトランスポート層には通常「TCP」を利用します。
第15問
HTML内で id="main-sidebar" と定義されている要素を、JavaScriptを使って画面上から非表示(display: none;)にしたい。記述として最も適切なものはどれか。
document.getElementsByTagName("main-sidebar").style.display = "none";
document.getElementById("main-sidebar").style.display = "none";
document.querySelectorId("#main-sidebar").style.display = "none";
document.getElement("#main-sidebar").style.display = "none";
▼ 解 答 ▼
解答:2
解説:特定のIDを持つ要素を1つ取得するには document.getElementById("ID名") を使用します(このとき引数に # は不要です)。取得した要素の style.display プロパティに "none" を代入することで非表示にできます。
第16問
HTML5以降のカテゴリ分類において、Webページの本文を構成する大半の「フローコンテンツ(Flow content)」に関する説明として最も適切なものはどれか。
h1~h6 などのヘッディングコンテンツはフローコンテンツに含まれない。
メタデータを格納する head 要素自体がフローコンテンツの代表例である。
一般的なテキスト段落を表す p 要素や画像を表す img 要素などがこれに該当する。
音声ファイルを扱う audio 要素のように、視覚的な形を持たないものは含まれない。
▼ 解 答 ▼
解答:3
解説:フローコンテンツは、ドキュメントのボディ(body 要素内)で主に使用される要素のほとんどが含まれる広範なカテゴリです。文章(p)、画像(img)、見出し(h1等)、音声(audio)もすべてフローコンテンツに属します。「セクションコンテンツ」は、article, section, nav など(フローコンテンツの一部)です。「ヘッディングコンテンツ」は、h1〜h6(フローコンテンツの一部)です。「フレージングコンテンツ」は、span, strong, em や通常のテキストなど、文章のパラグラフ内を構成するものです。
第17問
CSSの font-family プロパティで指定する総称ファミリ名(Generic FontFamily)のうち、ソースコードの表示などに適した「等幅フォント(固定幅フォント)」を指定するためのキーワードはどれか。
fixed-width
sans-serif
monospace
code-style
▼ 解 答 ▼
解答:3
解説:「monospace」を指定すると、すべての文字(英数字や記号など)が同じ幅で表示される「等幅フォント(固定幅フォント)」になります。文字の縦のラインが綺麗に揃うため、ソースコードやデータテーブルなどを表示する際に視認性が高くなり、非常に適しています。「sans-serif」は、ゴシック体のフォントを指定するキーワードで、Webサイトの一般的な本文や、モダンですっきりした印象を与えたい見出しなどに使われます。「fixed-width」は、CSSの総称ファミリ名の仕様としては存在しないキーワードです。「code-style」は、こちらもCSSの仕様には存在しないキーワードです。
第18問
親要素(div)の中に、幅(width)が指定された子要素(div)が配置されている。この子要素を親要素の枠内で「水平方向の中央」に配置したい。子要素に指定するCSSプロパティとして正しいものはどれか。
text-align: center;
margin-left: auto; margin-right: auto;
display: center;
padding: auto 0;
▼ 解 答 ▼
解答:2
解説:幅(width)が指定されたブロックレベル要素(この場合は子要素の div)を親要素の中で水平方向の中央に配置するには、左右のマージンを auto に設定します。これにより、ブラウザが左右の余白を均等に自動計算して分配するため、中央配置が実現します。「text-align: centerは」親要素に指定することで、その中にあるインライン要素やインラインブロック要素を中央寄せにするプロパティで、今回の中央寄せしたい子要素は div(ブロックレベル要素)であるため、このプロパティでは中央に寄りません。「display: center」は、CSSに display: centerという値は存在しません。「padding: auto 0」は、padding(内側の余白)に auto という値は指定できません。
第19問
コンピュータやWebサイト、アプリケーションなどにおいて、画面に表示される情報やデザイン、操作ボタン、メニューなど、利用者(ユーザー)と製品・サービスの間で情報をやり取りするための具体的な接触面や仕組みのことを何と呼ぶか。以下より1つ選択しなさい。
インタラクションデザイン
ユーザインタフェース
ユーザエクスペリエンス
インフォメーションアーキテクチャ
▼ 解 答 ▼
解答:2
解説:ユーザインタフェースは、画面に表示されるデザイン、ボタン、メニュー、フォントなど、ユーザーと製品・サービスが直接接触する画面や仕組みそのものを指します。インタラクションデザインは、ユーザーがシステムを操作した際の「製品側の反応や挙動(アニメーション、画面遷移など)」を設計することを指します。ユーザエクスペリエンスは、製品やサービスを利用することで得られる「ユーザーの体験(使いやすかった、感動した、便利だったなど)」の全体像を指し、ユーザインタフェースはその体験を構成する重要な要素の1つです。インフォメーションアーキテクチャは、Webサイトやアプリ内の情報を整理・分類し、ユーザーが迷わずに目的にたどり着けるようにする「情報構造の設計」のことです。
第20問
文字の色が「純粋な白(#ffffff)」であるとき、カラーコントラスト比が最も大きくなる背景色はどれか。
#eeeeee
#888888
#000000
#f0f0f0
▼ 解 答 ▼
解答:3
解説:コントラスト比が最も高くなる組み合わせは「白(#ffffff)」と「黒(#000000)」の組み合わせです。文字が白の場合、背景を完全な黒にすることでコントラスト比は最大になり、視認性が最も高くなります。「#888888」は中間的なグレー、「#eeeeee」は非常に明るいグレー、「#f0f0f0」は非常に明るいグレーです。
第21問
li 要素の構造の内側(子孫)に配置されている a 要素のみを対象としてスタイルを適用したい場合のCSSセレクタの記述として、適切なものはどれか。
li a
li.a
a li
a.li
▼ 解 答 ▼
解答:1
解説:特定の要素の内側にある要素を指定する(子孫セレクタ)には、親となる要素と子孫となる要素の間を「半角スペース」で区切って記述します。したがって li a と書くことで、li 要素内にある a 要素のみにスタイルが適用されます。
第22問
オンラインサービスのアカウントセキュリティを高めるために、作成する方法として「最も不適切(望ましくない)」なものはどれか。
他人に推測されにくいよう、自身の氏名・生年月日・スマートフォンの電話番号を組み合わせて設定する。
英数字や記号を混在させ、最低でも10文字以上の十分な長さを確保する。
大文字のアルファベット、小文字のアルファベット、数字をバランスよく含める。
複数の異なるウェブサービスで同じパスワードを使い回さず、それぞれ固有のものを設定する。
▼ 解 答 ▼
解答:1
解説:自身の氏名、誕生日、電話番号などの個人情報は、攻撃者が最も簡単に推測、または入手できる情報であるため、これらをパスワードの文字列に使用することはセキュリティ上非常に危険です。
第23問
HTMLドキュメントにおいて、重要なテキスト、あるいは重要な意味を持つ箇所(「警告」や「注意」など)であることをブラウザやスクリーンリーダーに示すために使用すべき、最も適切な要素はどれか。
strong 要素
b 要素
p 要素
mark 要素
▼ 解 答 ▼
解答:1
解説:strong要素は「内容の重要性、深刻さ、緊急性」を示します。用途として「警告」「注意」のほか、ユーザーが絶対に最初に見るべき重要なテキストに使用します。スクリーンリーダーなどの支援技術も、この要素を重要な箇所として強調して読み上げます。b要素は特別な重要性を持たせないまま、単にテキストを太字にして目立たせます。用途として記事のリード文や文書中のキーワードなど、見た目だけを周囲と区別したい場合に使用します。p要素は単なる段落を示します。用途として通常の文章を構成するためのもので、特定の重要性を示す意味は持っていません。markは要素は別の文脈から参照された箇所をハイライト(蛍光ペンで引いたような状態)して示します。用途として検索結果のキーワード一致部分や、ユーザーの操作に関連する箇所を一時的に目立たせるために使用します。
第24問
ウェブコンテンツのJIS規格(JIS X 8341-3:2016)における「達成基準 3.3.2」の規定の一部である。空欄( [ A ] )に当てはまる語句として最も適切なものはどれか。
3.3.2 ラベル又は説明の達成基準
コンテンツが利用者の [ A ] を要求する場合は、ラベル又は説明文が提供されている(レベルA)。
入力
決済
承諾
閲覧
▼ 解 答 ▼
解答:1
解説:ユーザーに「入力」を求めるフォームなどのコントロール要素(テキストボックスやチェックボックス等)がある場合、その入力欄が何であるかを示すラベルや説明文を適切に提供しなければならないと定められています。
第25問
HTML5以降のコンテンツカテゴリにおいて、「フレージングコンテンツ」に分類される要素(テキストおよびテキスト内のマークアップを行う要素)はどれか。
section 要素
span 要素
ul 要素
footer 要素
▼ 解 答 ▼
解答:2
解説:span 要素は、それ自体に特別な意味を持たない汎用的なインラインコンテナであり、テキストの一部をマークアップするために使用されるため「フレージングコンテンツ」に分類されます。一方、section、ul、footerは、いずれも文書の構造やブロックを定義する要素であり、フローコンテンツには属しますが、フレージングコンテンツには含まれません。
【ウェブデザイン技能検定】3級学科試験対策オリジナル演習問題一覧
続きを見る