ウェブデザイン技能検定2級 H29年度 第1回 学科試験問題
正しいものは1、間違っているものは2を選択する問題です。
▶解答をクリックすると解答/解説が表示されます。
getElementsByClassName()メソッドは、引数のクラス名で得られる最初の要素のみを返す。
解答
2.間違い
指定したクラス名を保持するすべてのHTML要素のコレクションが取得できます。
解答
1.正しい
解答
2.間違い
ベクタデータは始点と終点の座標や座標を結ぶ線の種類・太さ・色などを表す描画情報を持っています。
CSS で使用される単位「px」は、CSS の初期のバージョンでは相対単位に分類されていたが、CSS2.1 以降で は絶対単位に分類されている。
解答
1.正しい
ウェブサイトやウェブページのアクセス数を計る指標の１つであるページビュー数は、通常、ユニークユーザ数よ り少ない。
解答
2.間違い
通常、閲覧したユーザ数より、ページが表示された回数の方が多くなります。
ユーザの個人情報を利用、収集する際、そのユーザから承認を得てからはじめて実施する方法を「オプトアウト」 という。
アクティブではないユーザインタフェース部品の文字については、4.5:1 のコントラスト比がなくてもよい。
解答
1.正しい
GIF 形式は、ISO/IEC 15948 として国際標準化されている。
HTML5 において、外部 JavaScript ファイルを読み込むときは、<script href="sample.js"></script>のよう に記述する。
解答
2.間違い
<script src="sample.js"></script>です。
DOM（Document Object Model）は JavaScript 以外のプログラミング言語からも操作が可能である。
解答
1.正しい
HTTP ステータスコードのうち、「503 Service Unavailable」はリソースへのアクセスが拒否されたことを示して いる。
解答
2.間違い
サービスが一時的に過負荷やメンテナンスで使用不可能であることを示します。
ウェブ上で扱う動画のフレームレートは、60fps 以上としなければならない。
解答
2.間違い
特に規定はありません。
HTML5 では条件を満たせば img 要素の alt 属性を省略することができる。
解答
1.正しい
画像内容が不明な場合 (自動取得/生成やユーザー投稿など) で、かつ img 要素に空文字列でない title 属性がある場合などは省略できます。
解答
1.正しい
ここからは4択の問題となります。
背景色と文字色のカラーコードの組み合わせのうち、コントラスト比が一番大きい組み合わせはどれか。以下より 1 つ選択しなさい。
1. 文字色 #111111 ： 背景色 #202020
2. 文字色 #111111 ： 背景色 #989898
3. 文字色 #111111 ： 背景色 #dfdfdf
4. 文字色 #111111 ： 背景色 #f2f2f2
解答
4
1は 1.2: 1、2は 6.5 : 1、3は 14.2 : 1、4は 16.9 : 1 です。計算式は下記に引用します。
以下の公式を用いて、各文字（すべて同一ではない限り）の相対輝度を測る：
色の相対輝度 L = 0.2126 * R + 0.7152 * G + 0.0722 * B と定義されている。この場合のR, G 及び B は：
RsRGB <= 0.03928 の場合：R = RsRGB/12.92、それ以外の場合： R = ((RsRGB+0.055)/1.055) ^ 2.4
GsRGB <= 0.03928 の場合：G = GsRGB/12.92、それ以外の場合：G = ((GsRGB+0.055)/1.055) ^ 2.4
BsRGB <= 0.03928 の場合：B = BsRGB/12.92、それ以外の場合：B = ((BsRGB+0.055)/1.055) ^ 2.4
注記: また、RsRGB, GsRGB, 及び BsRGBは以下のように定義される：
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
注記: "^"記号は指数演算子である。
注記: エイリアス文字では文字の端から2ピクセルの部分の相対輝度の値を使用する。
同じ公式を用いて、文字のすぐ隣の背景のピクセルの相対輝度を測る。
次の公式を用いて、コントラスト比を算出する。
(L1 + 0.05) / (L2 + 0.05)
L1は前景または背景色の明るい方の相対輝度である。及び、
L2は前景または背景色の暗い方の相対輝度である。
ホーム（トップ）ページに戻るためのリンクが次のようになっているとき、 A に記述すべき代替テキストとして最も適切なものはどれか。以下より 1 つ選択しなさい。
home.pngの画像
コード
<a href="home.html><img src="home.png" alt=" A ">ホーム</a>
1. ホーム
2. ホームに戻る
3. 家の形のアイコン
4. 空でよい（代替テキストは不要）
解答
4
リンク先として「ホーム」の記載があるため不要です。
ウェブサーバへのセキュリティ対策として不適切なものを、以下より 1 つ選択しなさい。
1. ウェブ公開用のディレクトリに保管されているファイルは、一般的には外部から閲覧が可能となるため、公 開する必要のないファイルは、公開用ディレクトリに保管しないようにする。
2. OS やアプリケーションにぜい弱性があった場合、そのぜい弱性をついて不正アクセスされる場合があるた め、OSやアプリケーションのベンダーなどから提供されるぜい弱性情報を随時入手して、OSやアプリケー ションを最新の状態に保つようにする。
3. ウェブサーバをリモート操作する際の認証方法として、パスワード認証と暗号技術による公開鍵認証などを 併用している場合、サーバに負荷がかかり可用性が低下するため、パスワード認証以外の認証は行わな いようにする。
4. ウェブサイトの運営に必要のないサービスがウェブサーバ上で稼動している場合、そのサービスに対して は管理が不十分になりやすく、ぜい弱性が残されたままの状態で稼動している可能性があるため、必要の ないサービスは削除する。
解答
3
セキュリティ対策としては不十分ですね。
「障害の有無にかかわらず、できるだけ多くの人々が利用可能であるようにデザインすること」を表す用語として 最も適切なものを、以下より 1 つ選択しなさい。
解答
4
1はある製品を、特定の利用者が、特定の目的を達成しようとするにあたって、特定の状況で、いかに効果的に、効率的に、満足できるように使えるかの度合い。2は高齢者や障害者なども含めたあらゆる人が、どのような環境（うるさい場所や、暗い場所、逆に明るい場所など）においても柔軟にWebサイトを利用できるように構築すること。3は対象者である障害者を含む高齢者等が、社会生活に参加する上で生活の支障となる物理的な障害や、精神的な障壁を取り除くための施策、若しくは具体的に障害を取り除いた事物および状態です。
次の文章は、ウェブサイトの掲載内容に関するものである。 A にあてはまる語句として適切なものを、以下より 1 つ選択しなさい。
インターネット上で運営しているショッピングサイトに広告を掲載する際、実際の商品は他社と同程度の内容量であるにもかかわらず、あたかも他社商品の 2 倍の内容量であるかのように表示した場合、 A における「有利誤認表示」に該当するため、違法となる。
解答
3
次の A にあてはまる語句として適切なものを、以下より 1 つ選択しなさい。
厚生労働省が定めた「VDT 作業における労働衛生管理のためのガイドラインについて」では、VDT 作業者の心身の負担を低減するために、連続作業と連続作業の間におおむね A 分程度の作業休止時間を設けるようにしている。
1. 1～2
2. 10～15
3. 30～40
4. 50～60
解答
2
UNIX サーバでファイルのパーミッションを 3 桁の数字で設定する場合、百の位に該当するユーザを以下より 1 つ選択しなさい。
1. 所有者(オーナー)
2. グループ
3. 匿名ユーザ
4. 一般ユーザ
解答
1
百の位が所有者(オーナー)、十の位がグループ、一の位が一般ユーザです。
SVG を使って、例のように黒い四角とテキストを表示したい。この場合、次のコードの記述の A に用いるべき要素名を、以下より 1 つ選択しなさい。
例
コード
<svg>
< A >
<rect width="40" height="20"></rect>
<text x="45" y="17">Text</text>
</ A >
</svg>
1. group
2. div
3. container
4. g
解答
4
g要素は複数の要素をまとめるための要素です。
次のコードの空の h1要素(class属性"main-title")に、JavaScriptコードで例のように文字列を加えたい。その場合、コードの A 、 B 、 C のいずれにも使われないキーワードを、以下より 1 つ選択しなさい。
例
メインタイトル
コード
<h1 class="main-title"></h1>
<script>
var head = document. A ('.main-title');
var newText = document. B ('メインタイトル');
head. C (newText);
1. querySelector
2. createTextNode
3. appendChild
4. innerHTML
次の HTML を、図のように表示させることができる CSS はどれか。以下より 1 つ選択しなさい。なお文字のサイ ズや行送りなどについては考慮する必要はない。
図
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ウェブデザイン技能検定</title>
</head>
<body>
<header>
<h1>ウェブデザイン技能検定</h1>
</header>
<article>
<h2>ウェブデザイン技能検定とは</h2> <p>「ウェブデザイン」技能検定ではウェブデザインの関連標準規格に基づき実技および学科試験にて評価します。</p>
</article>
<aside>
<ul>
<li><a href="skilltest.html">技能検定について</a></li>
<li><a href="skills.html">技能士について</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</aside>
<footer>ウェブデザイン技能検定 2017</footer>
</body>
</html>
1.
article {
background-color: #666;
color: #FFF;
float: left;
width: 50%;
}
aside {
background-color: #BBB;
float: right;
width: 50%;
}
footer {
background-color: #333;
color: #FFF;
text-align: center;
clear: both;
}
2.
article {
background-color: #666;
color: #FFF;
float: right;
width: 50%;
}
aside {
background-color: #BBB;
float: left;
width: 50%;
}
footer {
background-color: #333;
color: #FFF;
text-align: center;
clear: both;
}
3.
article {
background-color: #666;
color: #FFF;
float: left;
width: 50%;
}
aside {
background-color: #BBB;
float: right;
width: 50%;
}
footer {
background-color: #333;
color: #FFF;
text-align: center;
}
4.
article {
background-color: #666;
color: #FFF;
float: left;
}
aside {
background-color: #BBB;
float: right;
}
footer {
background-color: #333;
color: #FFF;
text-align: center;
clear: both;
}
解答
1
HTML5 の video 要素に関する説明として正しいものを、以下より 1 つ選択しなさい。
1. video 要素はプラグインなしで映像の再生が行えるが、一時停止させることはできない。
2. video 要素による映像再生はコーデックに依存する場合がある。
3. video 要素では SWF ファイルを再生することができる。
4. video 要素だけでは音声の再生は行えない。
解答
2
コーデックがなければ再生できません。
画像が次のように指定されている場合、ビューポートの幅が 1000px の環境で閲覧したときに表示される画像は どれか。以下より 1 つ選択しなさい。なお、閲覧環境は次のコードで使用されているすべての要素と属性に対応し ているものとする。
<picture>
<source media="(min-width: 1600px)" srcset="large.jpg">
<source media="(min-width: 800px)" srcset="medium.jpg">
<img src="small.jpg" alt="">
</picture>
1. large.jpg
2. medium.jpg
3. small.jpg
4. large.jpg と medium.jpg の両方
解答
2
medium.jpgはビューポートの幅が800px以上1600px未満の場合に表示されます。
jQuery を用いた次のコードを、querySelector を用いて記述したものはどれか。以下より 1 つ選択しなさい。
コード
var obj = $('.button');
1. var obj = document.querySelector('.button');
2. var obj = document.querySelectorAll('.button');
3. var obj = document.querySelectorAll('button');
4. var obj = document.querySelector('button');
CSS2.1 の仕様に含まれているプロパティはどれか。以下より 1 つ選択しなさい。
解答
1
他はCSS3で追加されました。
お問合せフォームを設計する際に配慮すべき点として適切なものを、以下より 1 つ選択しなさい。
1. 複数ページにわたるフォームでは現在位置を明示する。
2. 入力エラーがあった場合は、「入力エラー」と表示する。
3. パソコンとスマートフォンで同じレイアウトを用いる。
4. 入力確認画面から編集画面に戻る場合は入力値を保持しない。
解答
1
CSS のボックスモデルにおいて、ボーダー、背景色、要素内容のうち、背景画像よりも上に表示されないものは どれか。以下より 1 つ選択しなさい。
1. ボーダー
2. 背景色
3. 要素内容
4. ボーダーと要素内容
解答
2
インデックスカラーの説明として適切なものを、以下より 1 つ選択しなさい。
1. あらかじめ指定する色に番号を振り、その番号を用いて色を表示するもの。
2. ウェブサイト上で利用できる色見本のこと。
3. 表示された画面に使用されている色の一覧。
4. あらかじめ指定した色を優先的に表示すること。
解答
1
HTTP ステータスコードの数字のうち、正常な処理が完了したことを示すものを、以下より 1 つ選択しなさい。
1. 200
2. 403
3. 404
4. 500
解答
1
1は200 OK でリクエストは成功し、レスポンスとともに要求に応じた情報が返されます。2は403 Forbidden でリソースにアクセスすることを拒否された場合。3は404 Not Found でリソースが見つからなかった場合。4は500 Internal Server Error でサーバ内部にエラーが発生した場合です。
入力など、何らかのアクションをユーザに求める場合の制限時間についての説明として適切なものを、以下より 1 つ選択しなさい。
1. 制限時間はどんな場合でも設定してはいけない。
2. 制限時間はユーザに求めるアクションの種類や量によらず、システムの都合で設定してよい。
3. 中断復帰（制限時間後も同じ状態から再開できる）機能を提供するのが望ましい。
4. 制限時間がある場合でも、そのことを事前に教える必要はない。
解答
3
VDT 作業における照度の設定として、最も適切なものを以下より 1 つ選択しなさい。
1. 画面上における照度は100ルクス以下、書類上及びキーボード上における照度は300ルクス以下とする。
2. 画面上における照度は100ルクス以下、書類上及びキーボード上における照度は300ルクス以上とする。
3. 画面上における照度は500ルクス以上、書類上及びキーボード上における照度は300ルクス以下とする。
4. 画面上における照度は500ルクス以下、書類上及びキーボード上における照度は300ルクス以上とする。
解答
4
URI でメールアドレスを示すものはどれか。以下より 1 つ選択しなさい。
1. mailto://foo@example.com
2. mailto:foo@example.com
3. smtp:foo@example.com
4. smtp://foo@example.com
解答
2
ウェブサイトのナビゲーションについての説明として誤っているものはどれか。以下より 1 つ選択しなさい。
1. グローバルナビゲーションはウェブサイトのすべてのページに表示されることが多く、ウェブサイトの利便性 に大きな影響を与える。
2. グローバルナビゲーションとローカルナビゲーションは、ユーザが位置を正しく把握するために分離されて いる必要がある。
3. 構造的ナビゲーションだけでなく、ユーザが入力したキーワードによる検索も、ナビゲーションの一種であ る。
4. サイトマップの目的は、ユーザがたどり着きたいコンテンツにすばやくアクセスできることであり、すべてのコ ンテンツを列挙する必要はない。
解答
2
次の文章の A にあてはまる語句として最も適切なものを、以下より 1 つ選択しなさい。
HTML5 において、h1～h6 要素は A の見出しをあらわす要素である。
1. 文書
2. 章
3. セクション
4. アウトライン
解答
3
h1～h6 要素が使われると自動的にセクションが生成されます。
2017 年 4 月時点において W3C 勧告にはなっていない規格はどれか。以下より 1 つ選択しなさい。
