【しゃらの忍法帖】

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

ウェブデザイン技能検定 学科試験問題 目次

ウェブデザイン技能検定とは

ウェブデザイン技能検定とは、国家検定制度である技能検定制度の一つとして、 厚生労働省より職業能力開発促進法第47条第1項の規定に基づき指定試験機関の指定を受け、 特定非営利活動法人インターネットスキル認定普及協会が実施するものです。 試験は実技および学科試験で実施され、関連国際標準規格等に基づきウェブデザインに関する知識・技能、実務能力等が問われます。

1級の合格者には厚生労働大臣より、2級及び3級の合格者には特定非営利活動法人インターネットスキル認定普及協会理事長より、ウェブデザイン技能士の合格証書が発行されます。

ここでは過去の問題とその回答(一部解説あり)を載せてありますので有効に活用してもらえれば幸いです。

※▶をクリックするとその年度の問題(何回目)が表示されます

◆ウェブデザイン技能検定2級 過去問

 

◆ウェブデザイン技能検定3級 過去問

 

絵本を書いてみた

また1年半弱経ってしまいました… この間、Pyton でコード書いたり、PHPでコード書いたり色々やってました。 今はAIブームに乗っかって、ChatGPTやStable Diffusionで日々遊んでいます。

で、これらを応用して絵本を書いてみました。 良かったら読んでもらえると嬉しいです。

ふしぎなもりのおともだち

ふしぎなとけい

あたらしいベッド

2年放置・・・

いやぁ、Javaを勉強しなきゃと書いたきり、2年も放置してしまいました。 これまでにやった作業ですが

  • JavaのWEBアプリケーション保守
  • AWS で Node.js を使ったWEBアプリケーション&顔認証(Amazon Rekognition)
  • PHP で Laravel を使ったWEBアプリケーション作成
  • PHPフレームワークを使わないWEBアプリケーション作成
  • C言語で通信系のソフトウェア作成

こんな感じです。 今は、ラズパイ上でDockerを使ったWordPress環境作成について、研修用の資料を作成しています。 これが意外と苦労したので別途記事にしようかと思います。

ウェブデザイン技能検定も令和になってからの分、作ってないのでぼちぼち作りますかね。

JAVA

f:id:Syarah:20190831170400p:plain

JAVAをやることになったんですが、サーバサイドでした…。

先輩が用意してくれた書籍を見ながら JAVA EEApatch Tomcat の環境を作成。といってもPleiades All in One をダウンロードして、ちょっと設定するだけで用意できました。この書籍を使って、JAVAJSP を理解していくつもりです。というかこの本分かりやすくて良いかも。

book.impress.co.jp

実際の業務については詳しくはもちろん書けませんが、設計書の類を見てもUMLらしきものは特に無く、いわゆる文章で書かれた設計書と画面遷移が図になっているものと状態等をまとめた表が主で、詳しいことはソース見ながらといった感じ。

参加した時点で既に問題対応してあるため、その評価を行なうことで作りを理解してこうという算段で作業を進めました。

試験自体は特に問題なく予定通り行ない何となく動作も把握できました。

ですがこのソース、JAVA素人の自分が見ても分かるくらい、分かりにくく作ってある…。状態がうまく整理されてなく、ひとつのメソッドで色々やり過ぎていて、何か修正すると影響範囲が広がってしまうヤバめなソースです。

今後、どういった要求が来るか分かりませんが、知識を深めつつやれることはやり、やれないことはやらない様にやっていかないと自分の首が締まるので要注意。

JAVA

f:id:Syarah:20190814191610j:plain

今更ですが、JAVAを勉強しなくてはいけなくなりました。

組み込み系でC言語を長くやっていた身としては、オブジェクト指向そのものからやらないとしっかり理解できないと思われ、あちこちの入門サイトを見ましたが、要はメソッドを持った構造体みたいなもんをクラスと呼び、継承やら抽象化やらオーバーライドやらポリモーフィズムやらで便利に拡張したり使い回せるようになっているんだなと。

設計としてはUMLを学ばないといけないことも分かりましたが、こっちの方が理解しにくく苦戦中・・・特にクラス図がややこしく感じます。

一週間でどこまで出来るか分かりませんが、何か作ってみようかと思っていたらeclipceがとっても便利で気がついたらショートカットや便利な使い方に感心したり脱線気味ですが、まぁ大切なことなのでいいかと思ったり思わなかったり。

新しいことはワクワクするので楽しく学習していこうと思います。

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

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

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

 

第1問

URL 中のパスにおいて、ファイル名を指定せずにディレクトリ名だけ指定した場合、必ずそのディレクトリ内のindex.html が表示される。

解答

2.間違い

httpd.conf、または .htaccess にて指定されたページが表示されます。指定されていない場合は、そのディレクトリのファイル一覧が表示されます。

 

第2問

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

解答

2.間違い

偶数個目のtr要素に適用されます。奇数番目であれば tr:nth-child(odd) ですね。

 

第3問

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

解答

1.正しい

 

第4問

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

解答

1.正しい

 

第5問

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

解答

2.間違い

見やすいかどうかは別として表示できます。

 

第6問

VDT 作業における作業休止時間とは、ディスプレイ画面の注視、キー操作または一定の姿勢を長時間持続することによって生じる眼、頸、肩、腰背部、上肢等への負担による疲労を防止することを目的とするものである。連続作業後、いったん VDT 作業を中止し、リラックスして遠くの景色を眺めたり、眼を閉じたり、身体の各部のストレッチなどの運動を行ったり、他の業務を行ったりするための時間であり、いわゆる休憩時間ではない。

解答

1.正しい

あくまで作業休止時間ということですね。

 

第7問

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

解答

1.正しい

複数選択する場合はチェックボックスを用います。

 

第8問

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

解答

1.正しい

 

第9問

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

解答

2.間違い

td 要素はデータセルです。見出しセルは th 要素です。

 

第10問

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

解答

2.間違い

誤りとはしていません。HTML5で複数使用は問題ないとされましたが、HTML5.1にて複数使用は非推奨となりました。

 

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

 

第11問

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

1. SMTP

2. TLS

3. SFTP

4. HTTP

解答

3

SMTPはメールを転送するためのプロトコルTLSSSLの次世代規格。HTTPはHTML文書や画像などのデータをWebサーバーとWebブラウザー間でやり取りするために使われるプロトコルです。

 

第12問

文字色が#000000 であった場合、コントラスト比が最も高くなる背景色はどれか。以下より 1 つ選択しなさい。

1. #000000

2. #999999

3. #aaaaaa

4. #ffffff

解答

4

1は1:1、2は7.4:1、3は9:1、4は21: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は前景または背景色の暗い方の相対輝度である。

 

第13問

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

画像

1. 検索

2. 虫めがね

3. search.png

4. 円の右下に短い直線がついた図形

解答

1

 

第14問

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

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

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

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

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

解答

4

 

第15問

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

1. W3C CSS Architecture Group

2. W3C Compatible Applications Group

3. Web Content Accessibility Guidelines

4. Web Communications And Globalizations

解答

3

 

第16問

個人情報の保護に関する法律」(個人情報保護法)における「個人情報」の具体例として誤っているものを、以下より 1 つ選択しなさい

1. 「1234@netskill.jp」などの、ユーザ名が記号や数字などの文字列だけで構成されているメールアドレス 単独の情報は、「個人情報」には該当しない。

2. 官報や有価証券報告書、新聞などで公にされている情報であっても、本人の名前・住所が含まれ特定の 個人が識別できる情報は、「個人情報」に該当する。

3. 法人などの団体そのものに関する情報は「個人情報」には該当しないが、雇用管理情報は「個人情報」に該当する。

4. 本人の名前・住所が含まれ特定の個人が識別できる情報が含まれている場合であっても、音声情報は 「個人情報」には該当しない。

解答

4

音声情報であっても個人情報です。

 

第17問

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

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

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

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

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

解答

4

 

第18問

次の図に示されるような HTML のレイアウトを実現するための適切なスタイルシートはどれか。以下より 1つ選択しなさい。

HTML

~略~
<body>
<h1>ウェブデザイン技能検定</h1>
<div id="main">
    <ul>
        <li><a href="skills.html">ウェブデザイン技能検定とは</a></li>
        <li><a href="about.html">試験概要</a></li>
        <li><a href="apply.html">受験申請</a></li>
        <li><a href="faq.html">FAQ</a></li>
    </ul>
</div>
</body>
~略~

1.

#main {
    background-color: #CCC;
    padding: 10px;
}
#main ul {
    padding: 0px;
}
#main ul li {
    margin: 0px;
}
#main ul li a {
    text-decoration: none;
}

2.

#main {
    background-color: #CCC;
    padding: 10px;
}
#main ul {
    padding: 0px;
}
#main ul li {
    list-style-type: decimal;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}
#main ul li a {
    text-decoration: none;
}

3.

#main {
    background-color: #CCC;
    padding: 10px;
}
#main ul {
    padding: 0px;
}
#main ul li {
    list-style-type: none;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}
#main ul li a {
    text-decoration: none;
}

4.

#main {
    background-color: #CCC;
    padding: 10px;
}
#main ul {
    padding: 0px;
}
#main ul li {
    list-style-type: none;
    margin: 0px;
}

解答

3

 

第19問

CSS で「opacity: 0」を指定された要素のボックスの説明として適切なものはどれか。以下より 1 つ選択しなさい。

1. 一番上に配置される。

2. 一番下に配置される。

3. 透明になる。

4. 視覚的な変化はない。

解答

3

0~1で不透明度を示すため0が透明で1が完全不透明となります。

 

第20問

HTML に記載するウェブページの情報のうち、meta 要素の name 属性が「description」の場合、content 属性に記載する情報として適切なものはどれか。以下より 1 つ選択しなさい。

1. ウェブページの説明文

2. ウェブページのキーワード

3. ウェブページのタイトル

4. ウェブページの管理者名

解答

1

name 属性には以下があります。

  • application-name:ウェブアプリケーション
  • author:ウェブページの管理者名
  • description:ウェブページの説明文
  • generator:ウェブページの作成に使ったソフトウェア
  • keywords:ウェブページのキーワード

 

第21問

コーディング規約の命名規則として「camel case」を採用する場合、そのルールに合致している文字列はどれか。以下より 1 つ選択しなさい。

1. webservice

2. MAINWORD

3. summary_case

4. SubPattern

解答

4

正式に言うと upper camel case ですね。

 

第22問

異なる OS 間でファイルのやり取りを行っているときに、複数行で記述されているファイルが、他の OS では 1 行になってしまうことがある。この原因となるものはどれか。以下より 1 つ選択しなさい。

1. 文字コード

2. 改行コード

3. BOM

4. meta 要素

解答

2

OS単位で改行コードが異なるためです。

 

第23問

次のコードのようにリストとして記述した li 要素のうち、class 属性"done"を与えた項目には、次の例のように「✓」を加えたい。この場合、CSS A に用いるべきプロパティはどれか。以下より 1 つ選択しなさい。

コード

<ul class="items">
    <li class="done">HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

CSS

ul.items {
    list-style-type: none;
}
ul.items li.done::before {
      A   : "✓";
    position: absolute;
    margin-left: -1.5em;
}

1. content

2. text

3. innerHTML

4. textContent

解答

1

:before擬似要素は、要素の直前に内容を挿入する際に使用します。挿入内容は content プロパティで指定します。要素の直後に挿入する場合は、 :after疑似要素を使います。

 

第24問

HTML において、段落を表すために使用する要素はどれか。最も適切なものを、以下より 1 つ選択しなさい。

1. p

2. br

3. pre

4. div

解答

1

pは段落。brは改行。preは整形済みテキストで囲まれた範囲に記述されたスペース・改行などを、そのまま表示します。divは区切りです。

 

第25問

線や円などの図形を XML で記述する画像の形式はどれか。以下より 1 つ選択しなさい。

1. BMP

2. SVG

3. JPEG

4. TIFF

解答

2

ベクタ画像であるSVG形式が用いられます。他はラスタ画像の形式です。

 

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

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

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

 

第1問

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

解答

2.間違い

環境に大きく依存します。

 

第2問

どの要素のタグで囲えばいいかわからないときは、とりあえず div 要素としてマークアップしておくことが推奨されている。

解答

2.間違い

意味もなくdiv要素を使うことは推奨されません。

 

第3問

著作権知的財産権のひとつであり、審査を経て登録されなければ権利は発生しない。

解答

2.間違い

著作物を他人に使用させる許可を与えたり、著作物を財産として所有したりすることのできる権利で審査等はありません。

 

第4問

VDT 作業をする場合には、1 時間を超えないようにした一連続作業時間内においても、1 回~2 回程度の小休止を設けることが望ましい。

解答

1.正しい

 

第5問

CSS の仕様上、ボックスのマージン領域は常に透明であり、背景を表示させることはできない。

解答

1.正しい

 

第6問

テキストを太字で表示させたい場合は、strong タグで囲めばよい。

解答

2.間違い

bタグで囲めば良いですが、CSSで指定したほうが良いでしょう。

 

第7問

HTML には、なんらかの理由で画像が利用できない場合に、その画像の代わりとして使用できるテキストを用意しておくための仕組みがある。

解答

1.正しい

alt属性に記載します。

 

第8問

ワームとは独立したプログラムであり、自己を複製して拡散する性質を持つマルウェアのことである。

解答

1.正しい

 

第9問

動画ファイルであっても、拡張子が jpeg であれば静止画として表示できる。

解答

2.間違い

拡張子を変更してもファイル形式は変わりません。

 

第10問

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

解答

1.正しい

 

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

 

第11問

SVG を用いて、例のようなグレーの正方形を描きたい。その際、記述するコードとして適切なものを、以下より 1つ選択しなさい。

1. <rect x ="20" y ="20" cx ="50" cy ="50" stroke ="gray" />

2. <rect cx ="20" cy ="20" cx ="50" cy ="50" fill ="gray" />

3. <rect x ="20" y ="20" width ="50" height ="50" fill ="gray" />

4. <rect rx ="20" ry ="20" width ="50" height ="50" fill ="gray" />

解答

3

 

第12問

HTML5 の文法的に正しい ul 要素、li 要素のマークアップ方法はどれか。以下より 1 つ選択しなさい。

1.

<ul>
    <li>項目</li>

2.

    <li>項目</li>
</ul>

3.

<ul>
    <li>項目
</ul>

4.

<ul>
    項目</li>
</ul>

解答

3

li タグの終了タグは省略出来ます。

 

第13問

1 つのウェブサイトにおいて、ウェブページの表示や挙動がユーザにとって予測しやすいものはどれか。適切なものを以下から 1 つ選択しなさい。

1. ナビゲーションがウェブページごとに違う順序で表示される。

2. 同じ機能を提供するコンテンツブロックは、どのウェブページでも同じように表示される。

3. 入力画面でラベルが「確認」であるボタンをクリックすると、入力情報がシステムに登録される。

4. 複製や検索などを目的に文字を選択したとき、選択した文字が消えたように見える。

解答

2

 

第14問

HTML5 における table 要素に関する説明として適切なものはどれか。以下より 1 つ選択しなさい。

1. table 要素は廃止された。

2. table 要素はレイアウト目的でのみ使用できるようになった。

3. table 要素の border 属性は廃止された。

4. table 要素のボーダー関連の装飾は CSS で指定することが望ましい。

解答

4

 

第15問

ユニバーサルデザインについて説明している次の文章のうち、 A にあてはまる語句として最も適切なものを以下より 1 つ選択しなさい。

できるだけ多くの人が利用可能であるように   A   することを
ユニバーサルデザインという。

1. デザイン

2. ユニット化

3. エレベーターを設置

4. 障壁となるものを除去

解答

1

 

第16問

ウェブページが表示されると同時に JavaScirpt を実行させる方法として、適切なものはどれか。以下より1つ選択しなさい。

1. html 要素の onload 属性に処理を指定する。

2. head 要素の onload 属性に処理を指定する。

3. body 要素の onload 属性に処理を指定する。

4. CSS の display 属性に処理を指定する。

解答

3

 

第17問

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

  <!DOCTYPE html>  

1. HTML 要素

2. 空要素

3. 開始タグ

4. 文書型宣言

解答

4

その文書がどんな定義(DTD)に基づいて記述されるかを示すものです。

 

第18問

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

HTMLコード

<input type="   A   ">

1. slider

2. slide-control

3. variable-control

4. range

解答

4

 

第19問

ul 要素、ol 要素、li 要素の要素名に共通して含まれる「l」は何をあらわしているか。以下より 1 つ選択しなさい。

1. link

2. lead

3. list

4. label

解答

3

 

第20問

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

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

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

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

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

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

解答

1

2は論理的かつ考え抜かれた動作と振るまいを備えた、魅力的なWebインターフェースをデザインすることです。3は機械、特にコンピュータとその機械の利用者の間での情報をやりとりするためのインタフェースです。4は人と人のあいだのコミュニケーションをデザインすることです。

 

第21問

ボックスにおける width プロパティと height プロパティの適用対象範囲を変更するプロパティはどれか。以下より 1 つ選択しなさい。

1. margin-sizing

2. box-sizing

3. border-box

4. content-box

解答

2

border-box、content-boxはbox-sizingプロパティに設定できる値です。content-boxはpadding と border の幅を要素の幅と高さに含めない。border-boxはpadding と border の幅を要素の幅と高さに含めるという意味になります。

 

第22問

インターネットにおけるフィッシング行為を規制している法律はどれか。以下より1つ選択しなさい。

解答

3

 

第23問

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

2.1 キーボード操作可能のガイドライン
          A   をキーボードから利用できるようにする。

1. スクロール

2. 入力

3. 一部の機能

4. 全ての機能

解答

4

 

第24問

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

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

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

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

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

解答

1

 

第25問

画像のファイルフォーマットのうち、非可逆圧縮方式のものはどれか。以下より1つ選択しなさい。

1. BMP

2. JPEG

3. GIF

4. PNG

解答

2

GIFは256色での可逆圧縮方式です。

 

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

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

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

 

第1問

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

解答

1.正しい

 

第2問

KVSは MySQL などのデータベースの標準的な格納形式である。

解答

2.間違い

キーとバリュー(値)の組み合わせという非常に単純な構造でデータが格納され、NoSQLで用いられます。MySQLなどはRDBMSです。

 

第3問

HTML5.2 では、 dl 要素の内部において div 要素を使用し、 dt 要素と dd 要素をグループ化することができる。

解答

1.正しい

 

第4問

CSSでは 16 進数のカラーコードを 3 桁に省 略することが可能だが、「 #24c 」と省略されたカラーコードは 6 桁の場合は「 #2244cc 」となる。

解答

1.正しい

 

第5問

HTML 5.2では、どの link 要素でも body 要素の内部に配置してよい。

解答

2.間違い

head要素の内部です。

 

第6問

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

解答

1.正しい

 

第7問

document.querySelectorAll()で取得できるものは配列である

解答

2.間違い

NodeList を返します。

 

第8問

サイバーセキュリティ基本法では、国や事業者に対するのと同様に、国民にもサイバーセキュリティの確保に努めることを責務として定めている。

解答

2.間違い

責務としては定めていません。

 

第9問

VDT 作業者の作業時間管理は、各自のペースで行われる作業であることから、組織的な労働衛生管理体制から除外されても良い。

解答

2.間違い

作業の種類と作業時間に応じた健康管理や適切な作業時間管理等の実施を行います。

 

第10問

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

解答

2.間違い

KGI(Key Goal Indicator)とはビジネスの最終目標を定量的に評価できる指標です。

 

第11問

CSS の font-family プロパティで複数の候補がカンマ区切りで指定されている場合、一番最初に書かれているフォントファミリから優先される。

解答

1.正しい

 

第12問

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

解答

2.間違い

関数ではなく言語構造です。

 

第13問

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

解答

2.間違い

href 属性ではなく src 属性を用います。

 

第14問

HTML 5.2 における figcaption 要素は、figure 要素の要素内容の先頭か末尾にしか配置できない。

解答

2.間違い

任意の位置に置けるようになりました。

 

第15問

イーサネットとは、1000BASE-T の規格のみを指す。

解答

2.間違い

有線LAN(構内ネットワーク)の標準の一つで、最も普及している規格です。1000BASE-Tだけでなく10BASE-T100BASE-T10GBASE-Tなどがあります。

 

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

 

第16問

次の SVG コードで例のようなグレーの円形を描きたい。このとき、 A B に記述すべきプロパティ の組み合わせはどれか。以下より 1 つ選択しなさい。

SVGコード

<circle   A  ="50"   B  ="50" r="40" fill="gray" />

1. A : cx  / B : cy

2. A : x   /  B : y

3. A : ch /  B : cv

4. A : center-x / B : center-y

解答

1

 

第17問

次の通りに body 要素と style 要素が定められている HTML がある。これを例のようにチェックした項目テキストのスタイルが表示されるよう、JavaScript コードを設定したい。このとき、 A から D のいずれにも用いられないメソッドはどれか。以下より 1 つ選択しなさい。

body要素

<form id="items" name="form">
    <label>
        <input type="checkbox" checked>
        <span>項目 01</span>
    </label><br>
    <label>
        <input type="checkbox">
        <span>項目 02</span>
    </label><br>
    <label>
        <input type="checkbox">
        <span>項目 03</span>
    </label>
</form>

style要素

.checked {
    color: darkgray;
    text-decoration: line-through;
}

JavaScriptコード

const items = document.getElementById('items');
const itemList = items.   A   ('label');
itemList.   B   ((item) => {
    const checkbox = item.   C   ('input[type="checkbox"]');
        if (checkbox.checked) {
            item.   D   ('class', 'checked');
        }
});

1. querySelectorAll

2. querySelector

3. forEach

4. getAttribute

解答

4

itemList に querySelectorAll で 全labelのNodeListを格納し、itemList を forEach で label単位にループさせます。checkbox に querySelector でフォーム種別がチェックボックスである Nodeを格納し、チェックボックスがチェックされていれば、setAttributeで class が checked であるスタイル(この場合、文字が灰色になって取り消し線)が適用されます。

 

第18問

HTML 5.2 の img 要素に指定できない属性はどれか。以下より 1 つ選択しなさい。

1. sizes

2. border

3. srcset

4. longdesc

解答

2

align属性・border属性・hspace属性・vspace属性が廃止されました。

 

第19問

次の PHP コードを実行した場合の結果を以下より 1 つ選択しなさい。

PHPコード

<?php
$i = 10;
print $i++;
?>

1. 11

2. 10

3. 1111111111

4. 10101010101010101010

解答

2

$i に 10 が格納され、print で $i の値(10)が表示されたあと、$i は+1 されます。

 

第20問

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

1. サニタイジング

2. サイズチェック

3. エコーバック

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

解答

1

Webサイト閲覧者側がWebページを制作することのできる動的サイト(SNS掲示板等)に対して、自身が制作したした不正なスクリプトを挿入することにより起こす攻撃方法ですので、利用者が入力した文字データを受け取る際に、プログラムにとって特別な意味を持つ可能性のある文字や文字列を検知して、一定の規則に従って別の表記に置き換えることが必要です。

 

第21問

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

2.4.4 リンクの目的(コンテキスト内)の達成基準
それぞれのリンクの目的が、   A   単独で判断できるか、又は   A   と
プログラムによる解釈が可能なリンクのコンテキストとから判断できる。ただし、
リンクの目的がほとんどの利用者にとって曖昧な場合は除く(レベル A)。

1. ラベル

2. title 属性

3. target 属性

4. リンクのテキスト

解答

4

 

第22問

次のHTMLを、図のように表示させることのできるCSS(default.css)はどれか。以下より1つ選択しなさい。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ウェブデザイン技能検定 </title>
<link rel="stylesheet" href="default.css">
</head>
<body>
<h1>ウェブデザイン技能検定 </h1>
<nav>
    <ul>
        <li><a href="#">ホーム </a></li>
        <li><a href="#">検定情報 </a></li>
        <li><a href="#">試験日程 </a></li>
        <li><a href="#">お問い合わせ </a></li>
    </ul>
</nav>
<main>
    <h2>ウェブデザイン技能検定</h2>
    <p id="main">ウェブデザイン技能検定は、国家検定制度である技能検定制度の一つとして特定非営利活動法人インターネットスキル認定普及協会が実施するものです。
</p>
</main>
</body>
</html>

1.

main {
    background color: #DDD;
    padding: 10px;
    margin left: 240px;
}
nav {
    border: 1px solid #000;
    background color: #DDD;
    padding: 10px;
    width: 200px;
    float: left;
}
nav ul li {
    list style: none;
    border: 1px solid #000;
    padding: 10px;
}

2.

main {
    background color: #DDD;
    padding: 10px;
    margin left: 240px;
}
nav {
    border: 1px solid #000;
    background color: #DDD;
    padding: 10px;
    width: 200px;
    float: right;
}
nav ul li {
    list style: none;
    border: 1px solid #000;
    padding: 10px;
}

3.

main {
    backgro und color: #DDD;
    padding: 10px;
}
nav {
    border: 1px solid #000;
    background color: #DDD;
    padding: 10px;
    width: 200px;
    float: left;
}
nav ul li {
    list style: none;
    border: 1px solid #000;
    padding: 10px;
}

4.

main {
    background color: #DDD;
    padding: 1 0px;
    float: left;
}
nav {
    border: 1px solid #000;
    background color: #DDD;
    padding: 10px;
    width: 200px;
}
nav ul li {
    list style: none;
    border: 1px solid #000;
    padding: 10px;
}

解答

1

この図の場合、main の左側にマージンを確保し、nav を左側に配置するように記載します。

 

第23問

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

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

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

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

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

解答

3

会員向けに限定されているため、公表とは言えません。

 

第24問

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

1. 匿名ユーザ

2. グループ

3. 所有者 (オーナー)

4. 一般ユーザ

解答

2

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

 

第25問

次のPHPのコードで $json に値を代入した。「2級」という出力を得るために A に入れるものを以下より1つ選択しなさい。

PHPコード

<?php $json = json_decode('{"web" : "design", "kentei": "2級"}');
print(   A   );
?>

1. $json["kentei"]

2. $kentei

3. $json->kentei

4. $json.kentei

解答

3

オブジェクト型で取り出しています。

 

第26問

HTML5における、table要素のborder属性値に1を指定した場合の説明として、適切なものを以下より1つ選択しなさい。

1. この表はユーザエージェントによってページレイアウト目的とみなされる。

2. この表はページレイアウト目的ではないことを明示している。

3. この表の背景色が自動的に白に指定される。

4. そのような指定はできない。

解答

2

 

第27問

box-sizingプロパティのデフォルト値はどれか。以下より1つ選択しなさい。

1. margin-box

2. border-box

3. padding-box

4. content-box

解答

4

パディングとボーダーを幅と高さに含めないのが初期値です。

 

第28問

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

1. 背景色 #505050  :文字色 #111111

2. 背景色 #e6e6e6  :文字色 #111111

3. 背景色 #c2c2c2  :文字色 #111111

4. 背景色 #2f2f2f   :文字色 #111111

解答

2

1 は 2.3:1、2 は 15.1:1、3 は 10.6:1、4 は 1.4: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は前景または背景色の暗い方の相対輝度である。

 

第29問

「upper camel case」を採用した HTML や CSS のコーディング規約を作る場合、そのルールに合致している文字列はどれか。最も適切なものを以下より 1 つ選択しなさい。

1. mainmenu

2. subTopic

3. anser_list

4. PreEntry

解答

4

単語の先頭文字が大文字でかつ最初の文字も大文字である形式です。

 

第30問

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

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

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

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

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

解答

2

どの必須項目が入力されていないことを示してあげる必要がありますね。

 

第31問

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

1. image 要素

2. picture 要素

3. photo 要素

4. graphic 要素

解答

2

他はありません。ちなみに追加されたのはHTML5.1からです。

 

第32問

HTML5 において、iframe 要素に指定できない属性はどれか。以下より 1 つ選択しなさい。

1. src

2. sandbox

3. width

4. preload

解答

4

src属性、srcdoc属性、name属性、sandbox属性、seamless属性、width属性、height属性が指定できます。

 

第33問

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

1. Web Accessibility Initiative

2. W3C Accessibility Information

3. Way of Accessibility Improvement

4. Working-group of Accessibility Information

解答

1

 

第34問

HTML 5.2 において、dl 要素の dl は何をあらわしているか。以下より 1 つ選択しなさい。

1. double list

2. definition list

3. description list

4. dimensional list

解答

3

説明リストです。この中に、 dt要素で定義・説明される言葉を、 dd要素でそれに対応する説明を配置してリストを作成します。

 

第35問

文字の間隔を指定する CSS プロパティはどれか。以下より 1 つ選択しなさい。

1. text-indent

2. white-space

3. letter-spacing

4. word-spacing

解答

3

 

第36問

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

opacity は不透明度で 0~1の値をとり、1が完全に不透明となります。

 

第37問

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

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

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

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

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

解答

3

ECMAScript(エクマスクリプト)とはJavaScriptの標準規格のことです。

 

第38問

HTML 5.2 の仕様書において、アクセシビリティユーザビリティの観点からlabel要素の代用としては使うべきではないと明記されている input 要素の属性はどれか。以下より 1 つ選択しなさい。

1. alt

2. title

3. value

4. placeholder

解答

4

目の不自由な方が利用する装置で読めなかったり、何か入力した途端にそのフォームが何を入力すべきなのか分からなったりするためlabel要素の代わりに使うべきではありません。

 

第39問

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

1. 長時間作業して目に優しい色

2. 色相差により誤認識が起きない色

3. JIS により定められた安全を確保するための色

4. JIS により定められた画面表示と印刷した色が完全に一致する色

解答

3

JIS によって規定された安全を確保するために決められた色が安全色彩です。赤、黄赤、黄、緑、青、赤紫に、対比の補助色となる白、黒を加えた8色があり、危険防止や緊急事態への対応といった行動がきちんと行えることを目的として定められています。

 

第40問

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

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

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

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

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

解答

3

パスワード認証以外の認証を行わないことで情報が漏れる可能性があるためセキュリティ対策とは言えません。