【H28第4回】ウェブデザイン技能検定3級過去問

この記事の前提条件

対象: ウェブデザイン技能検定3級を受験する方(平成28年度第4回 学科試験)
難易度: ★★☆
所要時間: 約20分

平成28年度第4回の学科問題を、全25問すべて理由つきで解説します。

目次 非表示

目次へ

1. 2択問題(正しい=1、間違い=2)

第1問: head要素はbody要素の前に記述する

答え: 1(正しい)。HTML文書の基本構造として、head要素はbody要素より前に記述します。

第2問: CSSのセレクタでtr:nth-child(even)と指定すると、そのスタイルは奇数個目のtr要素に適用される

答え: 2(誤り)even偶数番目の要素に適用されます。奇数番目に適用したい場合はoddを使います。

第3問: 完全に同一の画像であっても、使われる場所や制作者の意図によって適切な代替テキストは変化する

答え: 1(正しい)。代替テキストは画像そのものの内容だけでなく、その画像がその文脈でどんな役割を果たしているかによって適切な表現が変わります。同じ虫眼鏡アイコンでも、検索ボタンならば「検索」、単なる装飾ならば空(alt=””)が適切、というように変わります。

第4問: サイバーセキュリティ基本法の説明は正しいか

答え: 1(正しい)。設問の説明の通り、基本理念・国の責務・戦略・基本的施策などを定めた法律です。

第5問: ウェブページの背景に、GIFアニメーションを表示させることはできない

答え: 2(誤り)。CSSのbackground-imageにGIFアニメーションのファイルを指定すれば、背景としてアニメーション表示できます

第6問: VDT作業における作業休止時間の説明は正しいか(通常の休憩時間とは異なる)

答え: 1(正しい)。設問の説明の通り、作業休止時間は身体的な負担の蓄積を防ぐことを目的とした専用の時間であり、単なる休憩時間とは位置づけが異なります。

第7問: 「ラジオボタン」は、複数の選択項目から1項目だけ選択する場合に用いられる

答え: 1(正しい)。ラジオボタンは相互排他的な選択(1つだけ選べる)に使うUI部品です。複数選択したい場合はチェックボックスを使います。

第8問: ウェブブラウザなどの閲覧用ソフトウェアは、ユーザエージェントとも呼ばれる

答え: 1(正しい)。ブラウザは、ウェブコンテンツを取得して利用者に提示するソフトウェアの一種であり、ユーザエージェントに含まれます。

第9問: td要素は、表の見出しセルを作成する場合に使用する

答え: 2(誤り)。表の見出しセルにはth要素を使います。td要素は通常のデータセルに使う要素です。

第10問: HTML5では、1つの文書内で複数のh1要素を使用することは文法的に誤りとしている

答え: 2(誤り)。HTML5では、セクション(article・section等)ごとにそれぞれh1要素を使うことが認められており、1文書内に複数のh1要素があっても文法的な誤りにはなりません。

2. 選択問題

第11問: SSHの仕組みを使ってファイルを転送するプロトコルはどれか

  • ①SMTP
  • ②TLS
  • ③SFTP
  • ④HTTP

答え: ③。SFTP(SSH File Transfer Protocol)は、SSHの仕組みを利用して安全にファイル転送を行うプロトコルです。SMTPはメール送信、TLSは通信の暗号化技術、HTTPはウェブページの転送に使われます。

第12問: 文字色が#000000の場合、コントラスト比が最も高くなる背景色はどれか

  • ①#000000
  • ②#999999
  • ③#aaaaaa
  • ④#ffffff

答え: ④。文字色の黒(#000000)に対して、最も明るい白(#ffffff)との組み合わせが明暗差最大となり、コントラスト比も最も高くなります。

第13問: 検索ボタンのラベルに次の画像が使われている場合、適切な代替テキストはどれか

虫眼鏡アイコンの検索ボタン画像
  • ①検索
  • ②虫めがね
  • ③search.png
  • ④円の右下に短い直線がついた図形

答え: ①。機能を持つ画像(ボタン等)の代替テキストは、見た目の説明ではなくクリックした時に何が起きるか(機能)を伝えるべきです。この画像はボタンとして「検索を実行する」機能を持つため、「検索」が適切です。②④は見た目の説明、③はファイル名で、どちらもユーザーが機能を理解する助けになりません。

第14問: プロポーショナルフォントの説明として適切なものはどれか

  • ①フォントサイズを変更できないフォントのこと
  • ②JIS規格によらないフォントのこと
  • ③アルファベットのみのフォントのこと
  • ④文字ごとに文字幅が異なるフォントのこと

答え: ④。プロポーショナルフォントは、文字ごとの形に合わせて文字幅を変える(「i」は狭く「w」は広く、等)フォントです。対義語は、すべての文字幅が均一な「等幅フォント」です。

第15問: WCAGとは何の略称か

答え: ③。WCAGはWeb Content Accessibility Guidelines(ウェブコンテンツ・アクセシビリティ・ガイドライン)の略です。

第16問: 個人情報保護法における「個人情報」の具体例として誤っているものはどれか

  • ①記号・数字だけのメールアドレス単独の情報は「個人情報」に該当しない
  • ②官報等で公にされている情報でも、個人を識別できれば「個人情報」に該当する
  • ③法人自体の情報は該当しないが、雇用管理情報は「個人情報」に該当する
  • ④個人を識別できる情報が含まれていても、音声情報は「個人情報」に該当しない

答え: ④。個人情報保護法における「個人情報」は、文字・音声・画像など情報の形式(媒体)を問わず、特定の個人を識別できるかどうかで判断されます。音声情報だから該当しない、という限定は誤りです。

第17問: レスポンシブデザインに関する説明として適切なものはどれか

  • ①ユーザのTPOに合わせてレイアウトが自動的に変わる手法
  • ②ユーザの好みに合わせてデザインが変わる手法
  • ③デザイナーの意図通りにデザインを強制的に合わせる手法
  • ④デバイスの環境に応じてレイアウトが自動的に変わる手法

答え: ④。レスポンシブデザインは、画面幅などのデバイスの環境に応じて、同じHTMLのままレイアウトが自動的に切り替わる手法です。

第18問: 図のようなレイアウトを実現するスタイルシートはどれか

ナビゲーションリストの見た目とHTML、4つのCSSの選択肢

答え: ③。図のリストには黒丸や数字などのマーカーが表示されておらず、かつ各項目の間に一定の余白が空いています。これを実現するには、list-style-type: none;でマーカーを消し、liに上下左右のmarginを指定して間隔を作る必要があります。選択肢③がこの組み合わせに合致します。①はマーカーを消す指定がなくブラウザ標準の黒丸が残ってしまう、②はlist-style-type: decimalで数字が表示されてしまう、④はマーカーは消えるもののmargin: 0のため項目間の余白ができない、という理由でそれぞれ図と一致しません。

第19問: CSSで「opacity: 0」を指定された要素のボックスの説明として適切なものはどれか

  • ①一番上に配置される
  • ②一番下に配置される
  • ③透明になる
  • ④視覚的な変化はない

答え: ③opacity: 0は要素を完全に透明にします。ただしボックス自体はレイアウト上の場所を占め続け、display: noneのように要素が消えてなくなるわけではない点には注意が必要です。

第20問: meta要素のname属性が「description」の場合、content属性に記載する情報として適切なものはどれか

  • ①ウェブページの説明文
  • ②ウェブページのキーワード
  • ③ウェブページのタイトル
  • ④ウェブページの管理者名

答え: ①<meta name="description" content="...">のcontent属性には、検索結果のスニペット等に使われるページの説明文を記述します。

第21問: 命名規則「camel case」に合致する文字列はどれか

  • ①webservice
  • ②MAINWORD
  • ③summary_case
  • ④SubPattern

答え: ④。camel caseは、単語の区切りをスペースや記号でなく、各単語の先頭の大文字で表現する命名規則です。「SubPattern」がこの特徴に合致します。①は区切りなしの全小文字、②は全大文字、③はアンダースコア区切り(スネークケース)で、いずれもcamel caseの特徴とは異なります。

第22問: 異なるOS間でファイルをやり取りすると、複数行が1行になってしまうことがある。原因はどれか

  • ①文字コード
  • ②改行コード
  • ③BOM
  • ④meta要素

答え: ②。改行の表し方はOSによって異なり(Windows: CR+LF、macOS/Linux: LF)、対応していないソフトで開くと改行が認識されず1行にまとまって見えることがあります。

第23問: class=”done”の項目に「✓」を追加したい。CSSの[A]に用いるべきプロパティはどれか

li.done::beforeにAプロパティで✓を挿入するコード
  • ①content
  • ②text
  • ③innerHTML
  • ④textContent

答え: ①::before::afterといった生成コンテンツの疑似要素で、実際に挿入する内容を指定するプロパティはcontentです。

第24問: HTMLにおいて、段落を表すために使用する要素はどれか

  • ①p
  • ②br
  • ③pre
  • ④div

答え: ①。段落を表す要素はp要素です。brは単なる改行、preは整形済みテキスト、divは意味を持たない汎用コンテナです。

第25問: 線や円などの図形をXMLで記述する画像形式はどれか

  • ①BMP
  • ②SVG
  • ③JPEG
  • ④TIFF

答え: ②。SVG(Scalable Vector Graphics)は、図形をXML形式のテキストで記述するベクター画像形式です。BMP・JPEG・TIFFはいずれもビットマップ形式です。

まとめ

  • 代替テキストは「見た目」ではなく「機能・役割」を説明する(検索ボタンなら「検索」)
  • 個人情報保護法上の「個人情報」は、文字・音声・画像など媒体を問わず判断される
  • opacity: 0は見た目が透明になるだけで、要素自体はレイアウト上に存在し続ける(display: noneとの違いに注意)
  • 過去問の解答は絶対ではない。明らかに技術的事実と矛盾する場合は、事実の方を優先して考える