COLUMN コラム

2021.12.27

【ウェブデザイン技能検定2級】令和3年度第2回学科試験まとめと解説

1. 各設問において、正しいものは1を、間違っているものは 2 を、該当設問の解答欄に記せ。

1

W3C 勧告となっている HTML Review Draft—Published 29 January 2020 では、DOCTYPE 宣言を省略できる。

解答と解説

2

ブラウザを標準準拠モードで動作させるため、HTML5でも必要とされています。

2

「情報機器作業における労働衛生管理のためのガイドライン(厚生労働省)」で対象となる、情報機器を使用する者については、一般正社員、パートタイマー、派遣労働者、臨時職員等の就業形態による区別はされていない。

解答と解説

1

3

ul 要素の直下の子要素として ol 要素を配置することは、文法的に可能である。

解答と解説

2

ul要素の直下の子要素はli要素が入ります。
li要素の子要素としてol要素を入れることは可能です。

4

W3C 勧告となっている HTML Review Draft—Published 29 January 2020 では、table 要素に border 属性を指定すると文法エラーになる。

解答と解説

1

table要素にborder属性を指定することはできません。

5

JSON は Python で利用可能である。

解答と解説

1

Python、PHP、JavaScript、C++、Javaなど様々な言語でサポートされています。

6

progress 要素で進捗状況を表示するための最大値(max 属性の値)は、デフォルトで 100 である。

解答と解説

2

max 属性を指定する場合は、値を 0 より大きい有効な浮動小数点数値にしなければなりません。既定値は 1 です。

参考:MDN Web Docs

7

ウェブサイトでの目的を達成するために、途中の過程を測る中間指標となるものを「KGI」という。

解答と解説

2

KGIとはKey Goal Indicatorを省略したもので、最終目標を意味します。
途中の過程を測る中間指標はKPIです。

8

ロゴの一部として組み込まれている文字のコントラストは、アクセシビリティの達成基準の要件から除外されている。

解答と解説

1

9

CSS の display プロパティの初期値は「block」である。

解答と解説

2

displayプロパティの初期値は「inline」です。

10

picture 要素の代替テキストは、picture 要素の alt 属性に指定する。

解答と解説

2

picture要素の代替テキストは、picture要素内のimg要素に指定します。

11

body 要素内には次のような HTML コードが書かれており、class が left と right の div 要素のボックスは互いに一部重なり合っている。そして、style 要素では次のように z-index プロパティを指定した。このとき、手前に表示されるのは class が right の要素である。

解答と解説

2

z-indexの値だけで見れば、rightが手前にきますが、スタックレベルは兄弟要素であるスタックコンテキストごとに比較され、スタックコンテキストの中にある要素のスタックレベルはその親要素内を抜けることはありません。
z-index値の使用にはある程度の理解が必要なので勉強しておきましょう。

参考:株式会社JAJAAAN

12

SSL は、ウェブサーバとウェブブラウザとの通信においてやりとりされるデータを暗号化する技術である。

解答と解説

1

13

CSS の hsl( )の最初の引数である色相に 0 を指定した場合、色としては赤が指定されたことになる。

解答と解説

1

hsl()では色相、彩度、輝度の3要素で色を指定します。
色相0は色相環の赤を意味します。

参考:配色を考えるのが面倒ならhsl()を使おう – Qiita

14

JavaScript などのプログラミング言語において、const は定数を宣言する。

解答と解説

1

15

事業活動により取得および利用している個人情報が 5,000 人以下の場合には、個人情報取扱事業者に該当しない。

解答と解説

2

会社の大小に関わらず、個人情報データベース等を事業の用に供している者は個人情報取扱事業者に該当します。

2. 以下の設問に答えよ。

16

a 要素において必須のものはどれか。以下より 1 つ選択しなさい。

  1. rel 属性
  2. href 属性
  3. target 属性
  4. 終了タグ
解答と解説

4

a要素は終了タグを省略できません。

17

CSS でテキストを縦書きで表示させることのできるプロパティはどれか。以下より 1 つ選択しなさい。

  1. writing-mode
  2. direction
  3. text-align
  4. vertical-align
解答と解説

1

18

HTML のタグの使い方として不適切なものはどれか。以下より 1 つ選択しなさい。

  1. 著作権表記を small 要素のタグで囲った。
  2. レビュー記事の中で、製品名を b 要素のタグで囲った。
  3. br 要素のタグを使って、住所のビル名の直前で改行させた。
  4. 1 つの記事の中で紹介した 5 つの店の住所をそれぞれ address 要素のタグで囲った。
解答と解説

4

address要素は、Webページや記事の作成者の連絡先となる情報のみを表すための要素となります。Webページや記事の内容として記載される住所、電話番号、メールアドレス、または記事の公開日など、その他の情報を表すために使ってはいけません。

参考:addressタグの意味と使い方 | HTML | できるネット

19

input 要素の type 属性の値として指定できないものを、以下より 1 つ選択しなさい。

  1. datetime
  2. color
  3. date
  4. range
解答と解説

1

datetime属性は削除されました。

参考:GitHub whatwg/html

20

背景色と文字色のカラーコードの組み合わせのうち、コントラスト比が一番大きい組み合わせはどれか。以下より1 つ選択しなさい。

  1. 背景色 #505050 : 文字色 #111111
  2. 背景色 #e6e6e6 : 文字色 #111111
  3. 背景色 #c2c2c2 : 文字色 #111111
  4. 背景色 #2f2f2f : 文字色 #111111
解答と解説

2

16進数とは何かを理解しましょう。
その上で16進数を0~255の10進数に変換すれば答えが出ます。

参考:Webで学ぶ 情報処理概論参考:図書館員のコンピュータ基礎講座

21

HTML文書内のmain要素内の文字サイズを次のJavaScript関数fontL()により変更する場合、 A に記述すべきものはどれか。適切なものを以下より 1 つ選択しなさい。

  1. getElementByTag(“main”)
  2. getElementByTagName(“main”)
  3. queryTagSelector(“main”)
  4. querySelector(“main”)
解答と解説

4

問題として出題されているプロパティについては覚えておきましょう。

参考:Document – Web API | MDN

22

次の HTML のフォームについての説明として不適切な記述を、以下より 1 つ選択しなさい。

  1. input 要素の type 属性の値が「email」の項目は 1 つのメールアドレスのみ入力することができるので警告が表示される。
  2. input 要素の type 属性の値が「date」の項目はブラウザによって日付を選択するための補助が表示される。
  3. input 要素の type 属性の値が「hidden」の項目は ID やセキュリティトークンなどを格納するために使用され、ユーザによる編集はできない。
  4. action 属性も formaction 属性も指定されていないので、データは送信されない。
解答と解説

1

23

SQL インジェクション対策に最も適しているものを、以下より 1 つ選択しなさい。

  1. htmlspecialchars()を使う
  2. シングルクォーテーションをエスケープする
  3. プリペアードステートメントを使う
  4. OS のコマンドを実行できないようにする
解答と解説

24

ウェブページにおいて「>」を表示させる際の文字参照を、以下より 1 つ選択しなさい。

  1. "
  2. <
  3. >
  4.  
解答と解説

3

出題されているものや、よく使う特殊文字は覚えておきましょう。

参考:HTMLで特殊文字のエスケープ処理を行う方法【初心者向け】 | TechAcademyマガジン

25

「#ffcc00」はどのような色か。最も適切なものを以下より 1 つ選択しなさい。

  1. 赤に近い色である
  2. 青に近い色である
  3. 緑に近い色である
  4. 黄色に近い色である
解答と解説

4

RGBは2桁区切りでRed,Green,Blueの順で並んでいます。
よって、赤に緑を混ぜた色と考えられるので答えは黄色に近い色となります。

26

次の文章は、ウェブコンテンツ JIS(JISX8341-3)の用語集に含まれる、ある用語の説明文である。この文章が説明している用語として、最も適切なものを以下より 1 つ選択しなさい。

  1. ブラウザ
  2. ウインドウ
  3. スクリーン
  4. ビューポート
解答と解説

27

入力フォームで発生する問題に対してマイクロインタラクションによる改善策を施したい。このとき不適切であるものはどれか。以下より 1 つ選択しなさい。

  1. パスワード設定で強度不足によるやり直しが多かったので、パスワード設定中にパスワードの強度を表示するようにした。
  2. 必須項目に気がつかず送信できないことが多かったので、必須項目を入力し終わるまで送信できないようにした。
  3. ファイルのアップロード完了を待たずに何度もアップロードボタンを押そうとする人が多かったので、アップロードの進行状況を割合で表示するようにした。
  4. 文字数オーバーでエラーになることが多かったので、あと何文字入力可能かリアルタイムで表示するようにした。
解答と解説

2

マイクロインタラクションとは何かを学習しておきましょう。

参考:マイクロインタラクションとは?注意すべきポイントや事例を徹底解説! | Web Design Trends

28

情報機器作業の作業時間について、不適切なものを以下より 1 つ選択しなさい。

  1. 1 日の作業時間が過度に長時間とならない。
  2. 一連続作業時間が 1 時間を超えない。
  3. 作業途中、1、2 回の小休止をし、次の連続作業までに 10~15 分の作業休止をする。
  4. 1 日の情報機器作業の全時間は 500 分程度が望ましい。
解答と解説

4

1日の情報機器作業の全時間は規定されていません。
この場合、「情報機器作業が過度に長時間にわたり行われることのないように指導すること。」が適切です。

29

直接の子要素として li 要素を含むことができない要素はどれか。以下より 1 つ選択しなさい。

  1. ol 要素
  2. ul 要素
  3. li 要素
  4. menu 要素
解答と解説

3

30

ラスタ形式の画像フォーマットはどれか。以下より 1 つ選択しなさい。

  1. EPS
  2. PDF
  3. GIF
  4. SVG
解答と解説

3

GIFの他にもBMP・JPG・PNG・TIFFが該当します。

31

次のような PHP の MySQLi のコードがある。MySQL のデータベースにテーブル item_tables があり、このテーブルの item_name カラムには「商品名」が TEXT 型で格納されるようになっている。この時 A の部分に記すべきものを以下より 1 つ選択しなさい。

  1. “i”
  2. “s”
  3. “text”
  4. “string”
解答と解説

2

32

HTML 内において、div 要素が次のように入れ子になっている。子要素には、次の style 要素のとおり「width:100%;」を指定したところ、border の太さを 10px にしたことが原因となって例 1 のように親要素のボックスをはみ出してしまった。このとき、例 2 のように親要素のボックス内に収めるため、style 要素内に加えるべき CSS の宣言を以下より 1 つ選択しなさい。

  1. box-sizing: border-box;
  2. box-sizing: content-box;
  3. box-align: border-inset;
  4. box-align: border-inside;
解答と解説

1

box-sizing: border-boxを指定すれば、境界線およびpaddingはボックス内で表示されます。

33

「個人情報の保護に関する法律(個人情報保護法)」において、「個人情報取扱事業者は、個人情報を取得した場合は、あらかじめその利用目的を公表している場合を除き、速やかに、その利用目的を、本人に通知し、または公表しなければならない」と規定されている。ここでの「公表」の事例として、該当しないものを以下より 1 つ選択しなさい。

  1. 店舗販売においては、店舗の見やすい場所へ掲示すること。
  2. 通信販売においては、通信販売用のパンフレットなどへ記載すること。
  3. 自社の店舗・事務所内においては、ポスターなどに記載し掲示すること。
  4. 会員向けに限定されているウェブサイトにおいては、ユーザ ID・パスワードによる認証を行い、さらに複数回操作した後に閲覧できる場所に記載すること。
解答と解説

4

「公表」とは、広く一般に自己の意思を知らせること(不特定多数の人々が知ることができるように発表すること)をいい、公表に当たっては、事業の性質及び個人情報の取扱状況に応じ、合理的かつ適切な方法によらなければならなりません。

参考:個人情報の保護に関する法律についてのガイドライン

34

次のHTMLに対して、JavaScriptの関数 hideCheckedItems() を用いてチェックのついた項目を非表示にする場合に、 A から D のいずれにも使われない項目を、以下より 1 つ選択しなさい。

  1. display
  2. childNode
  3. checked
  4. style
解答と解説

2

35

HTML の要素のカテゴリーとしてセクショニングコンテンツに含まれないものはどれか。以下より 1 つ選択しなさい。

  1. section
  2. article
  3. aside
  4. header
解答と解説

36

col 要素と colgroup 要素において、要素名の先頭に共通して含まれる「col」は何をあらわしているか。以下より1 つ選択しなさい。

  1. color
  2. column
  3. collapse
  4. collection
解答と解説

2

columnは列を表します。
colgroup要素とcol要素の使い方を理解しましょう。

参考:<col> – HTML: HyperText Markup Language | MDN

37

攻撃目標であるサイトやサーバに対して、大量のデータを送りつけることで行われる攻撃のことを何というか。適切なものを以下より 1 つ選択しなさい。

  1. SQL インジェクション攻撃
  2. OS コマンドインジェクション攻撃
  3. クロスサイトスクリプティング攻撃
  4. DoS 攻撃
解答と解説

4

38

UNIX サーバでファイルのパーミッションを 3 桁の数字で設定する場合、十の位に該当するユーザはどれか。以下より 1 つ選択しなさい。

  1. 匿名ユーザ
  2. 所有者 (オーナー)
  3. グループ
  4. 一般ユーザ
解答と解説

3

一の位:他人(一般ユーザ)、十の位:グループ、百の位:所有者(オーナー)を意味します。

39

要素の境界線のスタイルを次の例のようにしたい。そのために CSS プロパティの border-style に与える適切な値を、以下より 1 つ選択しなさい。

  1. ridge
  2. groove
  3. inset
  4. outset
解答と解説

1

ボーダースタイルの値は覚えておきましょう。

参考:border-style-スタイルシートリファレンス

40

インターネットなどのネットワークに接続されているシステムに対して、さまざまな既知の技術を駆使して脆弱性を検査するテストは何か。適切なものを以下より 1 つ選択しなさい。

  1. オペレーションテスト
  2. ベネフィットテスト
  3. ペネトレーションテスト
  4. フラストレーションテスト
解答と解説

3

penetrationには侵入、貫通という意味があります。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。
DOLに制作を相談する

表参道でWeb制作、
マーケティングするならDOL