【しゃらの忍法帖】

ラズパイとかウェブ関係とか書いたり書かなかったり

ウェブデザイン技能検定2級 H29年度 第2回 学科試験問題

正しいものは1、間違っているものは2を選択する問題です。

▶解答をクリックすると解答/解説が表示されます。

 

第1問

次の SVG を使ったコードは、中心座標(50, 50)に半径 40 で緑の円を表示する。

<svg>
<circle cx="50" cy="50" r="40" color="green"/>
</svg>
解答

2.間違い

上記のように黒い円になります。

stroke="green"で縁の色を、塗りつぶすのであれば fill="green" が必要です。

 

第2問

16 進数のカラーコードで色指定する際、3 桁に省略することが可能だが、「#369」と省略されたカラーコードは 6 桁の場合は「#306090」となる。

解答

2.間違い

「#336699」になります。

 

第3問

HTML5.1 の img 要素では、出力先として想定されるデバイスの画面のピクセル密度に合わせて、複数の画像が指定できるようになっている。

解答

1.正しい

srcset属性で画像URLとデスクリプタを列挙することで対応できます。デスクリプタにはビューポート (ブラウザ表示領域) の横幅 w か、デバイスピクセル比を表す x を用います。

 

第4問

事業者は、労働衛生教育の一環として、VDT 作業者が自主的に健康を維持管理し、かつ、増進していくために 必要な知識についても教育を行うことが望ましい。

解答

1.正しい

 

解答

2.間違い

軽量コンパクトなリレーショナルデータベースシステムです。

 

第6問

ウェブページの表示方法は CSS で指定されるものであるため、記述する HTML の文法に誤りがあったとしても、 表示に影響を与えることはない。

解答

2.間違い

CSSはあくまでウェブページのスタイルを指定するためのものなので、HTML側に誤りがあれば表示に影響を及ぼします。

 

第7問

A/B テストとは、複数の案を比較して定量的に評価するテストである。

解答

1.正しい

 

第8問

フルードデザイン(Fluid Design)とは画面の幅に合わせてコンテンツの横幅を可変とするデザイン手法で、画面幅を%指定とすることなどにより実現できる。

解答

1.正しい

 

第9問

HTML5 で任意の要素に指定可能な role 属性は、WCAG 2.0 の仕様書で定義されている。

解答

2.間違い

WAI-ARIA 1.0 で定義されています。

 

第10問

ブラウザでアニメーションを描画するときに用いられる window.requestAnimationFrame()メソッドには、アニメ ーションを更新するための関数と更新の時間間隔(ミリ秒)のふたつを引数に渡す。

解答

2.間違い

更新の時間間隔はブラウザ任せになります。およそ60fpsとなるようです。

 

第11問

PHP において、print は関数である。

解答

2.間違い

PHP において print は言語構造です。

 

第12問

HTML において、form 要素の action 属性のデフォルト値は get である。

解答

1.正しい

 

第13問

WCAG2.0 では、ロゴの一部となっているテキストについては、4.5:1 のコントラスト比がなくてもよいとされている。

解答

1.正しい

 

第14問

コーディング規約を作る際、命名規則として「upper camel case」を採用することにした場合には、「SubText」と いう文字列での命名は適切である。

解答

1.正しい

camel case は単語の先頭文字を大文字にしますが、upper camel case は先頭文字も大文字にします。

 

第15問

SVG ではレイヤー機能により、ビットマップデータとベクターデータを混在させることができる。

解答

1.正しい

 

ここからは4択の問題となります。

 

第16問

画像処理におけるモスキートノイズの説明として、適切なものを以下より 1 つ選択しなさい。

1. 主に画像の輪郭部分に発生するノイズのこと

2. 主に画像の中央部に発生するノイズのこと

3. 左右対称の画像を圧縮した場合の左右の違いのこと

4. 異なる2つの画像を圧縮した際に同一の画像になること

解答

1

他は何のことか分かりません…。

 

第17問

HTML5 において、ウェブブラウザ上で番号付きリストを図のように表示させるものを、以下より 1 つ選択しなさい。

検定実施地域
7.宮城
6.埼玉
5.東京
4.神奈川
3.愛知
2.大阪
1.福岡

1.

<h1>検定実施地域</h1>
<ol inverted>
<li>宮城</li>
<li>埼玉</li>
<li>東京</li>
<li>愛知</li>
<li>大阪</li>
<li>福岡</li>
</ol>

2.

<h1>検定実施地域</h1>
<ol reversed>
<li>宮城</li>
<li>埼玉</li>
<li>東京</li>
<li>愛知</li>
<li>大阪</li>
<li>福岡</li>
</ol>

3.

<h1>検定実施地域</h1>
<ol>
<li reversed>宮城</li>
<li reversed>埼玉</li>
<li reversed>東京</li>
<li reversed>愛知</li>
<li reversed>大阪</li>
<li reversed>福岡</li>
</ol>

4. HTML5ではこのような表示はおこなえない

解答

2

 

第18問

次のコードの空の h1 要素(class 属性”main-title”)に、JavaScript コードで次の例のように文字列を加える。その場合、コードの A に用いるメソッドを、以下より 1 つ選択しなさい。

コード

<h1 class="main-title"></h1>
<script>
var head = document. A ('.main-title');
head.innerHTML='メインタイトル';
</script>

メインタイトル

1. querySelector

2. querySelectorAll

3. getElementById

4. getElementsByClassName

解答

1

セレクタを指定していますので querySelector を用います。

 

第19問

ルート相対パスの記述例として適切なものを、以下より 1 つ選択しなさい。

1. web/index.html

2. /web/index.html

3. ./web/index.html

4. ../web/index.html

解答

2

ルートディレクトリを基準にアクセスするパスの記述です。

 

第20問

ウェブサーバへのセキュリティ対策として、不適切なものを以下より 1 つ選択しなさい。

1. ウェブ公開用のディレクトリに配置されているファイルは、一般的には外部から閲覧が可能となるため、公開する必要のないファイルは、公開用ディレクトリに配置しないようにする。

2. ウェブサーバをリモート操作する際の認証方法として、パスワード認証と暗号技術による公開鍵認証 などを併用している場合、サーバに負荷がかかり可用性が低下するため、パスワード認証以外の認証は行わないようにする。

3. ウェブサイトの運営に必要のないサービスがウェブサーバ上で稼動している場合、そのサービスに対 しては管理が不十分になりやすく、ぜい弱性が残されたままの状態で稼動している可能性があるため、必要のないサービスは削除する。

4. OS やアプリケーションにぜい弱性があった場合、そのぜい弱性をついて不正アクセスされる場合があるため、OS やアプリケーションのベンダーなどから提供されるぜい弱性情報を随時入手して、OS やアプリケーションを最新の状態に保つようにする。

解答

2

セキュリティ対策として不十分ですね。

 

第21問

ワイヤーフレームに関する説明として最も適切なものを、以下より 1 つ選択しなさい。

1. 詳細なサイトマップに存在するすべてのページに対して作成する。

2. 視覚的要素も可能な限り盛り込んでビジュアルデザインに踏み込んだ検討を行う。

3. スクリーンサイズによって出す情報量は変化が無いので1つのサイズだけ検討すれば良い。

4. ナビゲーション、情報のグループ化、順序、優先度の検討に利用する。

解答

4

webページのレイアウトを定める設計図のことです。

 

第22問

HTML5.1 から新しく追加された要素でないものはどれか。以下より 1 つ選択しなさい。

1. details

2. summary

3. picture

4. source

解答

4

HTML5から追加されました。

 

第23問

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

1. 所有者(オーナー)

2. グループ

3. 匿名ユーザ

4. 一般ユーザ

解答

2

百の位が所有者(オーナー)、十の位がグループ、一の位が一般ユーザです。

 

第24問

CSS の記述として、a 要素にマウスオーバさせた時に、コンテンツが半透明になるものはどれか。以下より 1 つ選 択しなさい。

1.

a:hover {
transparency: 0.5;
}

2.

a:hover {
opacity: 0.5;
}

3.

a:hover {
opacity: 50%;
}

4.

a:hover {
opacity: 50;
}

解答

2

0.0が透明で1.0が不透明になります。

 

第25問

ECMAScript はどこで実行されるか。最も適切なものを以下より 1 つ選択しなさい。

1. サーバサイドでのみ実行される。

2. クライアントサイドでのみ実行される。

3. サーバサイドでもクライアントサイドでも実行される可能性がある。

4. サーバサイドかクライアントサイドのいずれで実行されるかを、ウェブブラウザで指定することができる。

解答

3

サーバサイドで動くJavaScriptもあり、その中でも代表的なのが「Node.js」です。

 

第26問

次の link 要素が組み込まれた HTML 文書に対して、外部スタイルシート「a.css」が適用されるのはどのようなと きか。以下より 1 つ選択しなさい。

HTML

<link rel="stylesheet" media="screen and (max-width:500px)" href="a.css">

1. ビューポートの幅が 500px 以下のとき

2. ビューポートの幅が 500px 以上のとき

3. ビューポートの幅が 500px より小さいとき

4. ビューポートの幅が 500px より大きいとき

解答

1

 

第27問

HTML5 における input 要素の type 属性の値として、誤っているものを以下より 1 つ選択しなさい。

1. url

2. date

3. fax

4. color

解答

3

tel ならありますね。

 

第28問

クロスサイトスプリプティング(XSS)対策手法として、適切なものを以下より 1 つ選択しなさい。

1. キャッシュポイズニング

2. サイズチェック

3. エコーバック

4. サニタイジング

解答

4

テキストデータ上の「&」や「>」など特殊文字を一般的な文字列に変換する処理のことです。

 

第29問

iframe 要素が使用できない HTML のバージョンはどれか。以下より 1 つ選択しなさい。

1. HTML4.01 Transitional

2. XHTML1.0 Transitional

3. XHTML1.1

4. HTML5

解答

3

 

第30問

HTML5 において不適切な img 要素の記述はどれか。以下より 1 つ選択しなさい。

1. <img src=”a.png” alt=””>

2. <img src=”a.png” alt=”” width=50 height=50>

3. <img src=”a.png” alt=”” width="50" height="50">

4. <img src=”a.png” alt=”” width="50%" height="50%">

解答

4

%指定は出来ません。

 

第31問

次のスタイルシートで実現される内容を以下より 1 つ選択しなさい。

CSS

h1 {
font-size: 1em;
transition-duration: 4s;
}
h1:hover{
font-size: 2em;
transform: rotateZ(-30deg);
}

1. マウスポインタが h1 要素に重なっている間、文字列が反時計回りに回転しながら大きくなるような アニメーションが 4 秒間かけて表示される。

2. マウスポインタが h1 要素に重なっている間、文字列が上から下に向かって落ちてくるようなアニメー ションが 4 秒間かけて表示される。

3. ページ表示と同時に、文字列が反時計回りに回転しながら大きくなるようなアニメーションが 4 秒間 かけて表示される。

4. ページ表示と同時に、文字列が上から下に向かって落ちてくるようなアニメーションが 4 秒間かけて 表示される。

解答

1

rotateZの引数が負の場合反時計回りになります。

 

第32問

PHP において、配列($arr)の最後にデータを追加する方法として、適切なものを以下より 1 つ選択しなさい。

1. $arr[-1] = 1;

2. $arr = 1;

3. $arr[0] = 1;

4. last($arr) = 1;

解答

2

配列のインデックスが負の場合0とみなされます。lastという関数はありません。

 

第33問

WAI-ARIA の WAI とは、何の略称か。適切なものを以下より 1 つ選択しなさい。

1. Way of Accessibility Improvement

2. W3C Accessibility Information

3. Web Accessibility Initiative

4. Working-group of Accessibility Information

解答

3

 

第34問

SQL インジェクションやクロスサイトスクリプティングなどアプリケーションレベルの不正アクセスを防ぐためのソフトウェア、もしくは、ハードウェアの一般総称を以下より 1 つ選択しなさい。

1. Secure Socket Layer

2. Web Application Firewall

3. Intrusion Prevention System

4. Intrusion Detection System

解答

2

1はSSLでデータの通信を暗号化し、盗聴や改ざんを防ぐプロトコルです。3はIPSで不正な通信を検出し通知するほか、その通信を遮断するシステムです。4はIDSで悪意のある第三者からのアクセス・侵入を検出し通知するシステムです。

 

第35問

次に示したのは、ウェブコンテンツ JIS(JISX8341-3)のガイドライン 1.1 である。 A にあてはまる語句として、最も適切なものを以下より 1 つ選択しなさい。

全ての  A  には、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とす
る形式に変換できるように、代替テキストを提供する。

1. 画像

2. img要素

3. 動画

4. 非テキストコンテンツ

解答

4

 

第36問

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

ウェブコンテンツを取得して利用者に提示するあらゆるソフトウェア。

1. UI/UX

2. ブラウザ

3. ユーザエージェント

4. ウェブアプリケーション

解答

3

ハードウェアも含まれると思います。

 

第37問

入力フォームで発生する問題とマイクロインタラクションによる改善が一致しないものを、以下より 1 つ選択しなさい。

1. パスワード設定で強度不足によるやり直しが多かったので、パスワード設定中にパスワ ードの強度を表示するようにした。

2. 必須項目に気がつかず送信できないことが多かったので、必須項目を入力し終わるまで送信できな いようにした。

3. ファイルのアップロード完了を待たずに何度もアップロードボタンを押そうとする人が多かったので、 アップロードの進行状況を割合で表示するようにした。

4. 文字数オーバーでエラーになることが多かったので、あと何文字入力可能かリアルタイムで表示する ようにした。

解答

2

マイクロインタラクションとはユーザーのアクションに対するフィードバックやステータスの変化を正しく伝えるための細かなデザインのことです。

 

第38問

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

1. 店舗販売においては、店舗の見やすい場所へ掲示すること。

2. 通信販売においては、通信販売用のパンフレットなどへ記載すること。

3. 会員向けに限定されているウェブサイトにおいては、ユーザ ID・パスワードによる認証を行い、さらに 複数回操作した後に閲覧できる場所に記載すること。

4. 自社の店舗・事務所内においては、ポスターなどに記載し掲示すること。

解答

3

会員向けに限定されていますので「公表」ではありません。

 

第39問

DOMContentLoaded イベントにより発火するタイミングについて、適切なものを以下より1つ選択しなさい。

1. HTML から DOM ツリーが構築された時。

2. このイベントが指定されたイベントリスナーが読み込まれた時。

3. HTML データを取得し終わった時。

4. マウスクリックがあった時。

解答

1

最初のHTMLドキュメントの読み込みと解析が完了した時に、スタイルシートや画像、サブフレームの読み込みが終わるのを待たずに発火します。

 

第40問

次のコードのclass="box"が指定されたdiv要素を、CSSで以下の例のような立体風の表現にしたい。その場合、 border-style プロパティに定めるべき適切な値 A を、以下より 1 つ選択しなさい。

コード

<style>
.box {
border-width: 5px;
border-style: A ;
margin: 0.5em;
width: 3em;
height: 3em;
background-color: lightgray;
}
</style>
・・・・・・
<div class="box"></div>

1. groove

2. ridge

3. inset

4. outset

解答

4

groove

ridge
inset
outset