【しゃらの忍法帖】

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

全自動麻雀卓修理 その4

GW中に麻雀をやったのですが、半荘5回くらいかな?やったあと、突然牌が上がってこなくなりました。

よく見ると牌は全て並んでいるんですが、モータ交換した席のプッシャー動作がおかしい。

下牌が並んだ後、プッシャーが押し出し、上牌が並んだ後、プッシャーが押し出して終わるはずが延々プッシャーが動いている。

何度か押し出し動作を行なった後、エラーで停止。再度可動させても同様。

どうやら最後の積み牌をプッシュしたことを認識できておらず、牌をせり上げる動作に移行できていないと思われ。

 

何が悪いのか分からず時間もかけてられないので、前のモータに交換してみることに。

すると壊れてたモータが何事もなく正常に動くじゃあないですか!なんじゃこれは?

牌整列に動作するセンサ周りをクリーニングしたおかげかも?と思い再度モータを新しい方に交換。

治るかと思いきやプッシャーが止まらず、何も変わらない。

f:id:Syarah:20190415125126j:plain

と、ここで友人が上記の赤青の線の元に付いているモータ部のリレーが怪しいことに気付く。

f:id:Syarah:20190513205414j:plain

こいつ。

モータのカムが一周するとプッシュ動作が終わり、このリレーがカチッとなってプッシュ動作の終わりを検出しているんだろう

ということで、古いモータのリレーを新しいモータに移植。

すると問題なく動作するようになりました。ナイス友人!

 

新しく買ったモータも中古部品なのでリレー部の寿命だったんだろうと。

部品さえあれば、赤青の線を外してはんだ付けするだけなので、予備に買っておくことにしよう。

修理途中の液晶モニタのコンデンサも買わないといけないし。

 

なんで古いモータが問題なく動作するようになったのかは謎のまま…

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

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

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

 

第1問

HTML5 では、head 要素の中に title 要素を必ず 1 つだけ配置しなければならない。

解答

2.間違い

HTML5では、title要素は必須要素ではありません。

 

第2問

不正アクセス行為の禁止等に関する法律不正アクセス禁止法)における識別符号とは、情報機器やサービスにアクセスする際に使用する ID やパスワード等のことである。

解答

1.正しい

 

第3問

「http://sub.example.com/」と「http://example.com/sub/」は、特段の設定がない場合には同一ページへのア クセスとなる。

解答

2.間違い

全く違うページへのアクセスです。

 

第4問

オーバーレイ表示とは、複数の画像やテキストを重ねて表示する手法である。

解答

1.正しい

 

第5問

address 要素は、住所をマークアップするための要素である。

解答

2.間違い

連絡先情報 (住所、 URL、メールアドレス、電話番号、ソーシャルメディアのアカウント、地理上の座標など) を含めることができます。

 

第6問

パソコンの排気口の近くに書類など排気を妨げるものを置くと、パソコン内部の温度が上昇して故障の原因になる場合がある。

解答

1.正しい

定期的なパソコン内部の清掃も必要です。

 

第7問

img 要素の alt 属性はツールチップを表示させるためにある。

解答

2.間違い

img要素の中に記述される画像の代替となるテキスト情報です。

 

第8問

XHTMLXML に準拠したマーク付け言語である。

解答

1.正しい

 

第9問

著作権法において、ウェブサイト内にコピーライトの記載を行わなかった場合、そのウェブサイトの著作権を放棄したことになる。

解答

2.間違い

コピーライトの有無は関係ありません。

 

第10問

FTP サーバは、匿名ユーザからのアクセスを許可する設定ができる。

解答

1.正しい

不特定多数のユーザーに、プログラムやデータなどを配布するために利用されるファイル転送で anonymous FTP と呼ばれます。

 

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

 

第11問

検索ボタンのラベルとして次の画像が使用されていた場合、その代替テキストとして、最も適切なものはどれか。以下より 1 つ選択しなさい。

画像

1. 検索

2. 虫眼鏡

3. アイコン

4. 虫眼鏡アイコン

解答

1

検索するためのボタンであることを示す必要があります。

 

第12問

HTML 文書において順序なしリストを作成するための組み合わせとして、最も適切なものはどれか。以下より 1つ選択しなさい。

1. ul 要素と li 要素を使用する。

2. ul 要素と ol 要素を使用する。

3. dl 要素と dt 要素を使用する。

4. blockquote 要素と q 要素を使用する。

解答

1

 

第13問

HTML ドキュメントの body 要素の中身を、JavaScript コードに定めた関数 init()で処理したい。文書の読み込みが完了したとき関数を呼び出すために、次の HTML コードの A に記述する属性はどれか。最も適したものを、以下より 1 つ選択しなさい。

< body   A   ="init();">

1. onload

2. ready

3. complete

4. loaded

解答

1

 

第14問

次の文章の A にあてはまる語句として最も適切なものはどれか。以下より 1 つ選択しなさい。

製品やシステム、サービスの利用、もしくは予想された使い方によってもたらされる人々の知覚と反
応のことを  A  という。

1. インタラクションデザイン

2. ユーザエクスペリエンス

3. ユーザインタフェース

4. コミュニケーションデザイン

解答

2

1は理的かつ考え抜かれた動作と振るまいを備えた、魅力的なWebインターフェースをデザイナーが作るプロセスのことです。3は使う人とコンピュータの接触面のことです。4は人と人のあいだのコミュニケーションをデザインすることです。

 

第15問

マルウェア(不正プログラム)への対策として不適切なものを、以下より 1 つ選択しなさい。

1. 信頼性の低いウェブサイトから、安易にプログラムをダウンロードしないこと。

2. 見知らぬ相手から届いた電子メールにファイルが添付されていた場合は、安易にそのファイルを開 かないこと。

3. ソフトウェアのベンダーから、ウェブブラウザやセキュリティ対策ソフトなどのアップデートの通知が届 いても、修正プログラムはすぐに適用せず、できる限り現状を保ち続けること。

4. マルウェア感染の被害に備えるため、ファイルのバックアップを定期的に行い、それを一定期間保存 すること。

解答

3

アップデートはなるべく早めに適用しましょう。

 

第16問

次のコードに関する説明のうち、最も適切なものはどれか。以下より 1 つ選択しなさい。

<a href="#" onmouseover="change()">試験概要</a>

1. 「試験概要」という文字列にマウスオーバーすると change()ページが表示される。

2. 「試験概要」という文字列にマウスオーバーすると change()と表示される。

3. 「試験概要」という文字列にマウスオーバーすると change()関数が実行される。

4. 「試験概要」という文字列が表示された時に change()関数が実行される。

解答

3

 

第17問

補色の説明として、最も適切なものはどれか。以下より 1 つ選択しなさい。

1. 彩度において正反対に位置付けられる色の組み合わせ

2. 色相環において正反対に位置付けられる色の組み合わせ

3. 背景色と文字の色の組み合わせ

4. 背景色と画像の縁取りの色の組み合わせ

解答

2

 

第18問

CSS2.1 において、clear プロパティの適用対象として定義されている要素はどれか。以下より 1 つ選択しなさい。

1. インライン要素

2. ブロックレベル要素

3. float プロパティが指定されている要素

4. すべての要素

解答

2

ブロックレベル要素で作られたブロックは、要素が必ず横いっぱいに広がり、次の要素がブロックレベル要素の下に位置されるという特徴があります。それに対してインライン要素は要素(行)の途中に差し込むことができます。基本的にインライン要素の中にブロック要素を使うことはできません。

 

第19問

個人情報の保護に関する法律個人情報保護法)」において、個人情報取扱事業者は、あらかじめ本人の同意を得ないで、特定された利用目的の達成に必要な範囲を超えて、個人情報を取り扱ってはならないとしている。ここでの「本人の同意」の事例に該当しないものを、以下より 1 つ選択しなさい。

1. ウェブページに表示されている「同意します」の確認欄のボタンを、本人がクリックすること。

2. 同意することが書かれた書面を本人から受け取ること。

3. 同意するための手続きをウェブサイトで公開し、それを読むように本人に電子メールで知らせること。

4. 同意することが書かれた本人からの電子メールを受信すること。

解答

3

読んだかどうか(同意したかどうか)判断できないためNGです。

 

第20問

id="item1"が指定されている要素にリンクするコードはどれか。以下より 1 つ選択しなさい。

1. <a id="#item1">項目 </a>

2. <a href="item1">項目 </a>

3. <a id="item1">項目 1</a>

4. <a href="#item1">項目 1</a>

解答

4

 

第21問

HTML5.2 において、終了タグの省略ができない要素はどれか。以下より 1 つ選択しなさい。

1. a 要素

2. p 要素

3. head 要素

4. body 要素

解答

1

 

第22問

CSS の長さをあらわす単位のうち、相対単位に分類されるものはどれか。以下より 1 つ選択しなさい。

1. px

2. em

3. pt

4. in

解答

2

pxも相対単位ですが…。絶対単位としている場合もあるようです。私としては解像度によって変化する相対単位と考えます。

 

第23問

次の HTML コードの input 要素で、図のようなスライダーのコントロールを表示したい。 A に与えるtype 属性値として最も適した値はどれか。以下より 1 つ選択しなさい。

HTML

<input type="   A   ">

1. slider

2. slide-control。

3. variable-control

4. range

解答

4

 

第24問

ビットマップデータでないファイル形式はどれか。以下より 1 つ選択しなさい。

1. PNG

2. JPEG

3. SVG

4. BMP

解答

3

SVGはベクタデータです。

 

第25問

HTML 文書の先頭にある次の部分の名称は何か。以下より 1 つ選択しなさい。

<!DOCTYPE html>

1. HTML 要素

2. 空要素

3. 開始タグ

4. 文書型宣言

解答

4

 

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

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

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

 

第1問

2018 年4月現在、W3C 勧告となっている HTML の最新バージョンは HTML 5.1 である。

解答

2.間違い

2017年12月14日に HTML 5.2 が勧告されました。

 

第2問

いかなる環境においても、インターネットにおける通信速度に差異はない。

解答

2.間違い

通信速度は回線の混雑具合や通信先までの距離、中継機の性能など色々な要素で変化します。

 

第3問

HTML5 では、a 要素の内部に div 要素を配置することができる。

解答

1.正しい

 

第4問

FTP はファイル送受信に使用される通信プロトコルである。

解答

1.正しい

File Transfer Protocol です。

 

第5問

アクセシビリティに配慮するのであれば、テキストとその背景のコントラスト比は可能な限り低くした方がよい。

解答

2.間違い

高いほうが良いです。コントラスト比は 4.5 : 1 以上が推奨されています。

 

第6問

CMSコンテンツマネジメントシステム)は PHP で作られているので、HTML や CSS を使用することはない。

解答

2.間違い

CMSの導入はHTMLやCSSの専門知識のない人にもコンテンツの更新を可能にするものです。

 

第7問

著作権侵害のコンテンツをウェブサイトにアップロードしても、一定数のアクセスが無い限りは違法にはならない。

解答

2.間違い

アップロードした時点で違法です。

 

第8問

非可逆圧縮では、圧縮データを復号しても、圧縮前のデータを完全に復元することはできない。

解答

1.正しい

データの容量を大幅に圧縮できますが、圧縮したデータを展開したときに完全に元に戻らず、データの損失(劣化)が起こります。

 

第9問

ウェブサーバ内の不要になったファイルは、削除して残さないようすることもセキュリティ対策の 1 つである。

解答

1.正しい

残したファイルから思わぬ攻撃を受ける可能性があります。

 

第10問

第 10 問 「VDT 作業における労働衛生管理のためのガイドライン厚生労働省)」において、“ディスプレイ画面と眼の視距離をおおむね 40cm 以上”としたのは、眼に負担をかけないで画面を明視することができ、かつ、眼とキーボードや書類との距離の間に極端な差が生じないようにするためである。

解答

1.正しい

 

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

 

第11問

次の HTML 文書を表示させると、h1 要素のボーダーはどのように表示されるか。以下より 1 つ選択しなさい。

HTML文書

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブデザイン技能検定</title>
<style>
h1 {
    border: 3px #ff0000;
}
</style>
</head>
<body>
<h1>ウェブデザイン技能検定</h1>
</body>
</html>

1. 3 ピクセルの赤い実線で表示される。

2. 3 ピクセルの赤い線で表示されるが、線種は設定によって異なる。

3. 3 ピクセルの赤い線で表示されるが、線種はブラウザによって異なる。

4. ボーダーは表示されない。

解答

4

線種が指定されていないためnoneとなり、表示されません。

 

第12問

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

2.3 A の防止のガイドライン

  A   を引き起こすようなコンテンツを設計しない。

1. 発作

2. 操作ミス

3. 表示崩れ

4. カラム落ち

解答

1

 

第13問

SSL を使用しているウェブサイトにおいて、その URL はどのような文字列で始まるか。適切なものを以下より 1つ選択しなさい。

1. http://

2. file://

3. https://

4. ftp://

解答

3

 

第14問

HTML において、「お問い合わせ」のページに掲載するフリーダイヤルの電話番号をマークアップする際に使用すべき要素はどれか。最も適切なものを以下より 1 つ選択しなさい。

1. p

2. div

3. span

4. address

解答

4

連絡先情報 (住所、 URL、メールアドレス、電話番号、ソーシャルメディアのアカウント、地理上の座標など) を含めることができます。

 

第15問

HTML5 において使用できない要素はどれか。以下より 1 つ選択しなさい。

1. header

2. navi

3. main

4. footer

解答

2

navi ではなく nav 要素ですね。

 

第16問

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

1. Combining Style Sheets

2. Cascading Style Sheets

3. Containing Style Sheets

4. Contexting Style Sheets

解答

2

 

第17問

次の文章は、不正ログインに関するものである。 A にあてはまる語句として適切なものを、以下より 1 つ選択しなさい。

複数のインターネットサービスで、同じユーザ ID・パスワードの組み合わせを使い回してい
ると、  A  の被害にあいやすくなる。

1. セッションハイジャック

2. DDoS 攻撃

3. パスワードリスト攻撃

4. ドライブバイダウンロード攻撃

解答

3

1はコンピューター通信で利用する「セッション」を窃取し、本人に成り代わって通信を行う攻撃です。2は複数のコンピューターから標的のサーバーに、ネットワークを介した大量の処理要求を送ることでサービスを停止させてしまう攻撃です。4は特定のWEBサイトにアクセスした場合などに、ユーザーの知らない間にマルウェアや悪意のあるソフトウェアを一方的にダウンロードさせ、勝手にインストールまでさせてしまうことです。

 

第18問

光の三原色である色はどれか。以下より 1 つ選択しなさい。

1. 橙

2. 緑

3. 黄

4. 白

解答

2

赤、緑、青の三色です。

 

第19問

CSSMIME タイプを以下より 1 つ選択しなさい。

1. text/css

2. file/css

3. application/css

4. content-type=text/css

解答

1

 

第20問

商標権について適切な説明はどれか。以下より 1 つ選択しなさい。

1. 登録の有無にかかわらず、先に使用した時点で権利が発生する。

2. 登録された日から 10 年間法的に保護されるが、更新はできない。

3. 出願および登録は法人のみ可能である。

4. 知的財産権の一つである。

解答

4

 

第21問

次の HTML を例のように表示させることのできる CSS を以下より 1 つ選択しなさい。

1.

ul li {
    list-style-type: square circle;
}

2.

ul {
    list-style-type: square;
}
ul {
    list-style-type: circle;
}

3.

ul {
    list-style-type: square;
}
ul ul {
    list-style-type: circle;
}

4.

ul {
    list-style-type: square;
}
ul ul {
    list-style-type: disk;
}

解答

3

 

第22問

外部スタイルシートを利用することのメリットとして、直接関係ないものはどれか。以下より 1 つ選択しなさい。

1. ページレイアウトが正しく再現される。

2. デバイスやユーザ環境に応じたスタイルシートを適用させることが容易となる。

3. 複数ページに同一のスタイルを適用することが容易となる。

4. 文書構造や内容に変更を加えずにレイアウト変更することが容易となる。

解答

1

 

第23問

img要素に対する代替テキストが不要と判断された場合、alt属性はどのように記述すべきか。最も適切なものを以下より 1 つ選択しなさい。

1. alt 属性自体を省略する。

2. alt="" と記述する。

3. 不要であってもなんらかのテキストを入れる。

4. 代替テキストが不要となるケースは存在しない。

解答

2

alt属性は基本的に必須となります。

 

第24問

HTML コードの button 要素に加えた onclick 属性に、次のようなイベントハンドラを定めた。このボタンをクリックしたときの動きとして最も適切な説明はどれか。以下より1つ選択しなさい。

HTMLコード

<button onclick="alert('first');">click me</button>

1. ダイアログは開かずにエラーになる。

2. 「click me」の警告ダイアログが開く。

3. 「first」の警告ダイアログが開く。

4. 「alert」という文字が表示される。

解答

3

 

第25問

meta 要素の charset 属性に指定可能な文字コードを以下より 1 つ選択しなさい。

1. UTF-8

2. UTF-8N

3. SWIFT-JIS

4. UTF-16CE

解答

1

他は指定できません。

 

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

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

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

 

第1問

IoT とは、Internet of Technology の略である。

解答

2.間違い

Internet of Things の略です。

 

第2問

HTML 5.2 では、DOCTYPE 宣言を省略できる。

解答

2.間違い

省略してしまうと互換モードでの表示となってしまいHTML5での表示ができません。

 

第3問

ユニバーサルデザインとは、多言語対応の事のみをいう。

解答

2.間違い

文化・言語・国籍や年齢・性別などの違い、障害の有無や能力差などを問わずに利用できることを目指した建築(設備)・製品・情報などの設計(デザイン)のことです。

 

第4問

html 要素に lang 属性を指定するのは古くからの慣習によるものであり、HTML5 では html 要素に lang 属性を指定する必要はない。

解答

2.間違い

古くからの慣習によるものではありません。省略した場合lang指定をした親要素に従います。

 

第5問

VDT 作業における室内の照明及び採光については、明暗の対照が著しくなく、かつ、まぶしさを生じさせないようにすることが良い。

解答

1.正しい

 

第6問

サイバーセキュリティ基本法は、サイバーセキュリティに関する施策を総合的かつ効果的に推進するため、基本理念及び国の責務、戦略、基本的施策等を規定している。

解答

1.正しい

 

第7問

著作物が著作権による保護を受けるためには所定の手続きが必要である。

解答

2.間違い

手続きは不要です。手続きが必要なのは特許権ですね。

 

第8問

PNG は、ラスターグラフィックスの代表的なファイルフォーマットの 1 つである。

解答

1.正しい

図をタテヨコに並んだ点の集まりとしてとらえ、処理をする形式です。

 

第9問

レスポンシブデザインでないウェブサイトは、スマートフォンでは閲覧できない。

解答

2.間違い

見づらいかも知れませんが閲覧可能です。

 

第10問

ラジオボタンは、相互に排他的な複数の選択項目の中から、ユーザが 1 項目だけ選択する場合に用いられる。

解答

1.正しい

 

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

 

第11問

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

1. Web 3rd Conuters

2. The Web 3G Communications

3. World 3-dimensional Community

4. The World Wide Web Consortium

解答

4

 

第12問

要素の内容が消えずに見える状態となる CSS の表示指定はどれか。以下より 1 つ選択しなさい。

1. display: none;

2. visibility: hidden;

3. opacity: 0;

4. background: transparent;

解答

4

1は内容が表示されません。2は表示属性が非表示になります。3は透過されます。4は背景のみ透過されます。

 

第13問

アルファチャンネルの説明として適切なものを、以下より 1 つ選択しなさい。

1. 画像の彩度を扱うためのデータ領域

2. 画像の透過度を扱うためのデータ領域

3. 画像の圧縮前のデータを保存した領域

4. 画像の圧縮後のデータを保存した領域

解答

2

 

第14問

プロポーショナルフォントの説明として適切なものを、以下より 1 つ選択しなさい。

コード

background: url(../img/main.png)

1. フォントサイズを変更できないフォントのこと

2. JIS 規格によらないフォントのこと

3. アルファベットのみのフォントのこと

4. 文字ごとに文字幅が異なるフォントのこと

解答

4

逆に文字ごとに幅が同一なのは等幅フォントと呼ばれます。ちなみに英語ではモノスペースフォントと言います。

 

第15問

次の HTML を図のように表示する CSS はどれか。以下より 1 つ選択しなさい。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ウェブデザイン技能検定</title>
</head>
<body>
<div id="wrapper">
    <header><h1>ウェブデザイン技能検定</h1></header>
    <main>
        <p>
        ウェブデザイン技能検定は、国家検定制度である技能検定制度の一つとして
        特定非営利活動法人インターネットスキル認定普及協会が実施するものです。
        </p>
    </main>
</div>
</body>
</html>

1.

#wrapper {
    width: 800px;
}
header {
    background-color: #333;
    color: #FFF;
    margin: 10px;
}
main {
    background-color: #CCC;
    color: #000;
    margin: 20px;
}

2.

#wrapper {
    width: 800px;
}
header {
    background-color: #333;
    color: #FFF;
    padding: 10px;
}
main {
    background-color: #CCC;
    color: #000;
    padding: 20px;
}

3.

#wrapper {
    width: 800px;
}
header {
    background-color: #CCC;
    color: #000;
    padding: 10px;
}
main {
    background-color: #CCC;
    color: #000;
    padding: 20px;
}

4.

<#wrapper {
    width: 800px;
}
header {
    background-color: #333;
    color: #FFF;
    padding: 10px;
}
main {
    background-color: #000;
    color: #FFF;
    padding: 20px;
}

解答

2

ヘッダ背景が濃いグレー、文字色が白、メインの背景が薄いグレーで文字色が黒、それぞれパディングされています。

 

第16問

コンピュータネットワークにおいて、SSHの仕組みを使ってファイルを転送するプロトコルはどれか。以下より1つ選択しなさい。

1. SFTP

2. TLS

3. SMTP

4. HTTP

解答

1

TLSはTransport Layer Security SSLに変わるで安全に通信をするためのセキュリティプロトコルSMTPはSimple Mail Transfer Protocolでメールを転送するためのプロトコル。HTTPはHyper Text Transfer Protocol でHTML(Hyper Text Markup Language = Webページを記述するための言語)で書かれた文書などの情報をやりとりする時に使われるプロトコルです。

 

第17問

インターネットスキル認定普及協会のサイトにおける、当協会のロゴ画像の代替テキストとして最も適切なものはどれか。以下より 1 つ選択しなさい。

1. logo

2. logo.png

3. 協会ロゴ画像

4. インターネットスキル認定普及協会

解答

4

ロゴであることや画像であることを示しても意味がありません。

 

第18問

CSS 2.1 において、背景はボックスのどの領域に表示されると定義されているか。以下より 1 つ選択しなさい。

1. 要素内容を表示する領域のみ

2. パディングを含む、そこから内側の領域

3. ボーダーを含む、そこから内側の領域

4. マージンを含む、そこから内側の領域

解答

3

 

第19問

HTML コードで<input>要素の type 属性に用いることのできない値を、以下から1つ選択しなさい。

1. radiobutton

2. checkbox

3. email

4. text

解答

1

radio です。

 

第20問

ウェブサイトに大量のリクエストや巨大なデータを送りつけることで、サーバをダウンさせる攻撃手法はどれか。以下より 1 つ選択しなさい。

1. パスワードリスト攻撃

2. クロスサイトスクリプティング

3. DoS 攻撃

4. ドライブバイダウンロード

解答

3

1は悪意を持つ第三者が、何らかの手法によりあらかじめ入手してリスト化したID・パスワードを利用してWebサイトにアクセスを試み、結果として利用者のアカウントで不正にログインされてしまう攻撃です。2はユーザからの入力内容をWebページに表示するWebアプリケーションにおいて、ウェブサイト(標的サイト)の脆弱性(XSS脆弱性)を利用した攻撃手法です。4は特定のWEBサイトにアクセスした場合などに、ユーザーの知らない間にマルウェアや悪意のあるソフトウェアを一方的にダウンロードさせ、勝手にインストールまでさせてしまうことです。

 

第21問

HTML で段落を表現する場合の正しいマークアップ方法はどれか。最も適切なものを以下より 1 つ選択しなさい。

1. p 要素のタグで囲む。

2. div 要素のタグで囲む。

3. br 要素を使って前後を 1 行分ずつあける。

4. margin 要素を使って前後を 1 行分ずつあける。

解答

1

 

第22問

次の文章は、「個人情報の保護に関する法律」(個人情報保護法)における個人情報取扱事業者の義務規定に関するものである。 A にあてはまる語句として適切なものを、以下より 1 つ選択しなさい。なお、それぞれの A には、同じ語句が入るものとする。

個人情報取扱事業者は、個人情報を取り扱うにあたっては、その  A  をできる限り特定しなければ
ならない。また、個人情報取扱事業者は、あらかじめ本人の同意を得ないで、特定された  A  の達
成に必要な範囲を超えて、個人情報を取り扱ってはならない。

1. 使用期間

2. 利用目的

3. 収集件数

4. 保管手順

解答

2

 

第23問

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

1.4.1 A の使用の達成基準

  A  が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の
視覚的手段になっていない(レベル A)。

1. アウトライン

2. アイコン

3. 色

4. アニメーション

解答

3

色が情報を伝える唯一の手段の場合、目の不自由な方等には情報が伝わりません。

 

第24問

nav 要素に関する説明として適切なものを、以下より 1 つ選択しなさい。

1. グローバルナビゲーションを含むことはできない。

2. main 要素を含むことはできない。

3. HTML 文書中に 2 回以上出現することはできない。

4. 必ずページ上部に配置される。

解答

2

 

第25問

CSS の赤を示す値として誤っているものはどれか。以下より 1 つ選択しなさい。

1. #f00

2. #ff0000

3. rgba(ff,0,0,1)

4. red

解答

3

0~255、または0~100%で色を指定する必要があります。4つめは透過度で0~1で1が不透明を表します。

 

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

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

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

 

第1問

HTML 5.2 では、dialog 要素を使用できる。

解答

1.正しい

一旦廃止されましたが、HTML5.2 で追加されました。

 

第2問

ユニバーサルデザインとは、障害者にとって障壁となる様々な対象物を取り除くことである。

解答

2.間違い

文化・言語・国籍や年齢・性別などの違い、障害の有無や能力差などを問わずに利用できることを目指した建築(設備)・製品・情報などの設計(デザイン)のことです。

 

第3問

擬似クラス:hover は a 要素のみに指定できる。

解答

2.間違い

カーソルが乗っている要素にスタイルを適用するためのものです。

 

第4問

加法混色とは、赤・青・黄色の 3 色の組み合わせによる色表現の方法である。

解答

2.間違い

赤・緑・青の3色です。

 

第5問

悪意のあるソフトウェアやコードの総称をマルウェアという。

解答

1.正しい

不正かつ有害に動作させる意図で作成された悪意のあるソフトウェアや悪質なコードの総称です。

 

第6問

Basic 認証とは HTTP の認証方式のひとつであり、ユーザ名とパスワードをハッシュ化することで盗聴や改竄を防ぐ。

解答

2.間違い

Basic認証では、ユーザ名とパスワードの組みをコロン ":" でつなぎ、Base64エンコードして送信する。このため、盗聴や改竄が簡単であるという欠点を持ちます。

 

第7問

CSS の単位「px」は、出力対象とする機器の画面における物理的な 1 ピクセルの大きさを 1 とする相対単位である。

解答

2.間違い

同じデバイスであっても設定された解像度により1ピクセルの大きさは変わります。

 

第8問

GIF 形式の透過処理と PNG 形式の透過処理には違いはない。

解答

2.間違い

どちらも透過できますが、圧縮方式は違います。

 

第9問

クロスブラウザチェックとは、複数の異なるウェブブラウザで仕様どおりにウェブページが表示され機能するかを検証することである。

解答

1.正しい

 

第10問

VDT 作業で疲れ目、眼精疲労を軽減するには、目とディスプレイ画面との距離を 40~50cm 程度にし、視線は少し画面を見下げるようにすると良い。

解答

1.正しい

 

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

 

第11問

CSSのコード内において、他の外部スタイルシートを読み込む際に使用する命令はどれか。以下より1 つ選択しなさい。

1. !import

2. !important

3. @import

4. @important

解答

3

!important は 優先度で最優先を示します。

 

第12問

PNG 画像の MIME タイプはどれか。以下より 1 つ選択しなさい。

1. png/media

2. png/image

3. image/png

4. media/png

解答

3

 

第13問

次の video 要素で再生や音量、スライダなどのユーザインタフェースを表示したい(図参照)。このとき、 A にあてはまる最も適切なものを、以下より 1 つ選択しなさい。

video要素

<video   A   src="myVideo.mp4" width="640"></video>

1. navbar

2. buttons

3. controls

4. interface

解答

3

 

第14問

http://example.com/css/style.css に次のコードが記述されている場合、main.png が表示されるパスを、以下より 1 つ選択しなさい。

コード

background: url(../img/main.png)

1. http://example.com/css/img/main.png

2. http://example.com/css/main.png

3. http://example.com/img/css/main.png

4. http://example.com/img/main.png

解答

4

style.css があるフォルダを起点に1つ上のフォルダ(/example.com/)の配下の imgフォルダの配下の main.png となります。

 

第15問

OSI 参照モデルにおいて、第 3 層に該当するものはどれか。以下より 1 つ選択しなさい。

解答

2

OSI参照モデルは第1層から下記のようになります。

  1. 物理層
  2. データリンク層
  3. ネットワーク層
  4. トランスポート層
  5. セッション層
  6. プレゼンテーション層
  7. アプリケーション層

 

第16問

画像が利用できない場合にその画像の代わりとして使用するテキストを指定する属性はどれか。最も適切なものを以下より 1 つ選択しなさい。

1. alt

2. label

3. title

4. placeholder

解答

1

 

第17問

HTML5 において使用可能な要素はどれか。以下より 1 つ選択しなさい。

1. flex

2. grid

3. frame

4. canvas

解答

4

flex、gridはCSS。frameは廃止されています。

 

第18問

li 要素に表示されるリストマーカーの表示を隠すための CSS を、以下より 1 つ選択しなさい。

1. ul 要素に対して list-style: none と記述する。

2. ul 要素に対して list: 0 と記述する。

3. li 要素に対して list: none と記述する。

4. li 要素の list-style 属性の値を空白にする。

解答

1

 

第19問

日常的に行うべきセキュリティ対策として不適切なものを、以下より 1 つ選択しなさい。

1. クリアスクリーンポリシーに則り、第三者に見られたり、操作されたりしないようにするため、パソコンや スマートフォンなどは画面をロックしておく。

2. 電子メールを受信した際は、差出人欄を確認し、差出人がアドレス帳に登録されている者や著名な 組織・企業であれば、不正なメールではないと判断できるため、ファイルが添付されていた場合は開 くようにする。

3. パソコンやスマートフォンなどにセキュリティソフトを導入し、セキュリティソフトのパターンファイルを常 に更新して、最新の状態となるよう定期的に確認をする。

4. パソコンやスマートフォンなどの OS やアプリケーションソフトにセキュリティパッチを適用し、最新のバ ージョンとなるように随時更新を行う。

解答

2

アドレス帳に登録されている人、組織や企業名を名乗って不正ファイルを送りつけてくる可能性があります。

 

第20問

無彩色ではないものを以下より 1 つ選択しなさい。

1. 白

2. 黒

3. 灰

4. 赤

解答

4

無彩色は白と黒との混合で得られる色(白と黒自体も含む)の総称で、他は有彩色です。

 

第21問

ID やパスワードの不正取得・保管行為を禁止する法律はどれか。以下より 1 つ選択しなさい。

解答

4

 

第22問

次のうち、CSS 2.1 では使用できない単位はどれか。以下より 1 つ選択しなさい。

1. in

2. mm

3. cm

4. m

解答

4

メートルは使用できません。

 

第23問

レスポンシブウェブデザインに関する説明として適切なものを、以下より 1 つ選択しなさい。

1. ユーザの好みに合わせてデザインが変わるウェブデザイン手法

2. ウェブデザイナーの意図通りにデザインを強制的に合わせる手法

3. デバイスの環境に応じてレイアウトが自動的に変わるウェブデザイン手法

4. ユーザの TPO に合わせてレイアウトが自動的に変わるウェブデザイン手法

解答

3

 

第24問

文字色と背景色のコントラストをどのようにすればアクセシビリティは向上するか。最も適切なものを以下より 1 つ 選択しなさい。

1. コントラストをできるだけ高くする。

2. コントラストを高くし過ぎない。

3. 白(#ffffff)の背景に対する本文の文字色は #999999 が最も良い。

4. 白(#ffffff)の背景に対して #000000 の文字色は避ける。

解答

1

コントラスト比は 4.5 : 1 以上が推奨されます。3は 2.8 : 1ですので良くない。4は 21 : 1 ですので問題ありません。

 

第25問

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

1. Whole CAPTCHA to Audio Glyphs

2. Web Compatibility Analysis Group

3. Web Components of Assistive Gestures

4. Web Content Accessibility Guidelines

解答

4

 

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

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

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

 

第1問

getElementsByClassName()メソッドは、引数のクラス名で得られる最初の要素のみを返す。

解答

2.間違い

指定したクラス名を保持するすべてのHTML要素のコレクションが取得できます。

 

第2問

html 要素の manifest 属性は、HTML5 で追加されたが、HTML5.1 では削除された。

解答

1.正しい

 

第3問

画像のデータ形式には「ビットマップデータ」「ベクタデータ」という 2 種類が存在するが、そのうち、画像の拡大 処理をしてもジャギー(輪郭のギザギザ)が発生しない形式は「ビットマップデータ」である。

解答

2.間違い

ベクタデータは始点と終点の座標や座標を結ぶ線の種類・太さ・色などを表す描画情報を持っています。

 

第4問

CSS で使用される単位「px」は、CSS の初期のバージョンでは相対単位に分類されていたが、CSS2.1 以降で は絶対単位に分類されている。

解答

1.正しい

 

第5問

ウェブサイトやウェブページのアクセス数を計る指標の1つであるページビュー数は、通常、ユニークユーザ数よ り少ない。

解答

2.間違い

通常、閲覧したユーザ数より、ページが表示された回数の方が多くなります。

 

第6問

ユーザの個人情報を利用、収集する際、そのユーザから承認を得てからはじめて実施する方法を「オプトアウト」 という。

解答

2.間違い

オプトアウトは個人情報の第三者提供に関し、個人データの第三者への提供を本人の求めに応じて停止することです。

 

第7問

アクティブではないユーザインタフェース部品の文字については、4.5:1 のコントラスト比がなくてもよい。

解答

1.正しい

 

第8問

GIF 形式は、ISO/IEC 15948 として国際標準化されている。

解答

2.間違い

ISO/IEC 15948はPNG形式です。GIF形式は国際標準化されていません。

 

第9問

HTML5 において、外部 JavaScript ファイルを読み込むときは、<script href="sample.js"></script>のよう に記述する。

解答

2.間違い

<script src="sample.js"></script>です。

 

第10問

DOM(Document Object Model)は JavaScript 以外のプログラミング言語からも操作が可能である。

解答

1.正しい

 

第11問

HTTP ステータスコードのうち、「503 Service Unavailable」はリソースへのアクセスが拒否されたことを示して いる。

解答

2.間違い

サービスが一時的に過負荷やメンテナンスで使用不可能であることを示します。

 

第12問

ウェブ上で扱う動画のフレームレートは、60fps 以上としなければならない。

解答

2.間違い

特に規定はありません。

 

第13問

HTML5 では条件を満たせば img 要素の alt 属性を省略することができる。

解答

1.正しい

画像内容が不明な場合 (自動取得/生成やユーザー投稿など) で、かつ img 要素に空文字列でない title 属性がある場合などは省略できます。

 

第14問

ドライブバイダウンロード攻撃とは、ウェブページにマルウェアを埋め込んでおき、アクセスしてきたユーザに気づ かれないように、そのマルウェアを自動的にダウンロードさせる攻撃である。

解答

1.正しい

 

第15問

HTML5.1 における figcaption 要素は、HTML5 と同様に figure 要素の要素内容の先頭か末尾にしか配置で きない。

解答

2.間違い

HTML5.1にてfigcaption要素をfigure要素内のどこにでも配置することが可能となりました。

 

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

 

第16問

背景色と文字色のカラーコードの組み合わせのうち、コントラスト比が一番大きい組み合わせはどれか。以下より 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は前景または背景色の暗い方の相対輝度である。

 

第17問

ホーム(トップ)ページに戻るためのリンクが次のようになっているとき、 A に記述すべき代替テキストとして最も適切なものはどれか。以下より 1 つ選択しなさい。

home.pngの画像

コード

<a href="home.html><img src="home.png" alt="  A  ">ホーム</a>

1. ホーム

2. ホームに戻る

3. 家の形のアイコン

4. 空でよい(代替テキストは不要)

解答

4

リンク先として「ホーム」の記載があるため不要です。

 

第18問

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

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

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

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

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

解答

3

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

 

第19問

「障害の有無にかかわらず、できるだけ多くの人々が利用可能であるようにデザインすること」を表す用語として 最も適切なものを、以下より 1 つ選択しなさい。

解答

4

1はある製品を、特定の利用者が、特定の目的を達成しようとするにあたって、特定の状況で、いかに効果的に、効率的に、満足できるように使えるかの度合い。2は高齢者や障害者なども含めたあらゆる人が、どのような環境(うるさい場所や、暗い場所、逆に明るい場所など)においても柔軟にWebサイトを利用できるように構築すること。3は対象者である障害者を含む高齢者等が、社会生活に参加する上で生活の支障となる物理的な障害や、精神的な障壁を取り除くための施策、若しくは具体的に障害を取り除いた事物および状態です。

 

第20問

次の文章は、ウェブサイトの掲載内容に関するものである。 A にあてはまる語句として適切なものを、以下より 1 つ選択しなさい。

インターネット上で運営しているショッピングサイトに広告を掲載する際、実際の商品は他社と同程度の内容量であるにもかかわらず、あたかも他社商品の 2 倍の内容量であるかのように表示した場合、 A における「有利誤認表示」に該当するため、違法となる。

1. 商標法

2. 製造物責任法(PL 法)

3. 不当景品類及び不当表示防止法景品表示法

4. 特定電気通信役務提供者の損害賠償責任の制限及び発信者情報の開示に関する法律(プロバイダ責 任法)

解答

3

 

第21問

次の A にあてはまる語句として適切なものを、以下より 1 つ選択しなさい。

厚生労働省が定めた「VDT 作業における労働衛生管理のためのガイドラインについて」では、VDT 作業者の心身の負担を低減するために、連続作業と連続作業の間におおむね A 分程度の作業休止時間を設けるようにしている。

1. 1~2

2. 10~15

3. 30~40

4. 50~60

解答

2

 

第22問

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

1. 所有者(オーナー)

2. グループ

3. 匿名ユーザ

4. 一般ユーザ

解答

1

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

 

第23問

SVG を使って、例のように黒い四角とテキストを表示したい。この場合、次のコードの記述の A に用いるべき要素名を、以下より 1 つ選択しなさい。

Text

コード

<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要素は複数の要素をまとめるための要素です。

 

第24問

次のコードの空の 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

解答

4

querySelectorでセレクタが.main-titleである要素を取得し、createTextNodeでメインタイトルというテキストを生成し、appendChildでセレクタが.main-titleである要素の子要素にメインタイトルというテキストを追加します。

 

第25問

冗長化されていない RAID 構成はどれか。以下より 1 つ選択しなさい。

1. RAID 1

2. RAID 5

3. RAID 6

4. RAID 0

解答

4

1は2台以上のHDDを組み合わせて同一データを複数のHDDに書き込み、HDDのコピーを用意。2はデータはRAID0同様に分割して書き込まれるのに加え、同時に「パリティ」と呼ばれる冗長コードが生成されて書き込まれる。3は基本的にはRAID5と同様の技術ですが、パリティを2重で生成して異なるディスクに記録することで耐障害性を向上させたものです。

 

第26問

次の 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

 

第27問

HTML5 の video 要素に関する説明として正しいものを、以下より 1 つ選択しなさい。

1. video 要素はプラグインなしで映像の再生が行えるが、一時停止させることはできない。

2. video 要素による映像再生はコーデックに依存する場合がある。

3. video 要素では SWF ファイルを再生することができる。

4. video 要素だけでは音声の再生は行えない。

解答

2

コーデックがなければ再生できません。

 

第28問

画像が次のように指定されている場合、ビューポートの幅が 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未満の場合に表示されます。

 

第29問

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');

解答

2

セレクタが.buttonであるすべての要素となります。

 

第30問

CSS2.1 の仕様に含まれているプロパティはどれか。以下より 1 つ選択しなさい。

1. max-width

2. box-shadow

3. text-shadow

4. border-radius

解答

1

他はCSS3で追加されました。

 

第31問

お問合せフォームを設計する際に配慮すべき点として適切なものを、以下より 1 つ選択しなさい。

1. 複数ページにわたるフォームでは現在位置を明示する。

2. 入力エラーがあった場合は、「入力エラー」と表示する。

3. パソコンとスマートフォンで同じレイアウトを用いる。

4. 入力確認画面から編集画面に戻る場合は入力値を保持しない。

解答

1

 

第32問

CSS のボックスモデルにおいて、ボーダー、背景色、要素内容のうち、背景画像よりも上に表示されないものは どれか。以下より 1 つ選択しなさい。

1. ボーダー

2. 背景色

3. 要素内容

4. ボーダーと要素内容

解答

2

 

第33問

インデックスカラーの説明として適切なものを、以下より 1 つ選択しなさい。

1. あらかじめ指定する色に番号を振り、その番号を用いて色を表示するもの。

2. ウェブサイト上で利用できる色見本のこと。

3. 表示された画面に使用されている色の一覧。

4. あらかじめ指定した色を優先的に表示すること。

解答

1

 

第34問

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 でサーバ内部にエラーが発生した場合です。

 

第35問

入力など、何らかのアクションをユーザに求める場合の制限時間についての説明として適切なものを、以下より 1 つ選択しなさい。

1. 制限時間はどんな場合でも設定してはいけない。

2. 制限時間はユーザに求めるアクションの種類や量によらず、システムの都合で設定してよい。

3. 中断復帰(制限時間後も同じ状態から再開できる)機能を提供するのが望ましい。

4. 制限時間がある場合でも、そのことを事前に教える必要はない。

解答

3

 

第36問

VDT 作業における照度の設定として、最も適切なものを以下より 1 つ選択しなさい。

1. 画面上における照度は100ルクス以下、書類上及びキーボード上における照度は300ルクス以下とする。

2. 画面上における照度は100ルクス以下、書類上及びキーボード上における照度は300ルクス以上とする。

3. 画面上における照度は500ルクス以上、書類上及びキーボード上における照度は300ルクス以下とする。

4. 画面上における照度は500ルクス以下、書類上及びキーボード上における照度は300ルクス以上とする。

解答

4

 

第37問

URI でメールアドレスを示すものはどれか。以下より 1 つ選択しなさい。

1. mailto://foo@example.com

2. mailto:foo@example.com

3. smtp:foo@example.com

4. smtp://foo@example.com

解答

2

 

第38問

ウェブサイトのナビゲーションについての説明として誤っているものはどれか。以下より 1 つ選択しなさい。

1. グローバルナビゲーションはウェブサイトのすべてのページに表示されることが多く、ウェブサイトの利便性 に大きな影響を与える。

2. グローバルナビゲーションとローカルナビゲーションは、ユーザが位置を正しく把握するために分離されて いる必要がある。

3. 構造的ナビゲーションだけでなく、ユーザが入力したキーワードによる検索も、ナビゲーションの一種であ る。

4. サイトマップの目的は、ユーザがたどり着きたいコンテンツにすばやくアクセスできることであり、すべてのコ ンテンツを列挙する必要はない。

解答

2

 

第39問

次の文章の A にあてはまる語句として最も適切なものを、以下より 1 つ選択しなさい。

HTML5 において、h1~h6 要素は A の見出しをあらわす要素である。

1. 文書

2. 章

3. セクション

4. アウトライン

解答

3

h1~h6 要素が使われると自動的にセクションが生成されます。

 

第40問

2017 年 4 月時点において W3C 勧告にはなっていない規格はどれか。以下より 1 つ選択しなさい。

1. HTML 4.01

2. HTML 5.1

3. XHTML 1.0

4. XHTML 2.0

解答

4

XHTML Familyの次期バージョンとして策定されていたが、W3Cは2009年07月03日に策定の打ち切りを決定しました。

 

ウェブデザイン技能検定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