※各設問において、正しものは○を、間違っているものは✖を選択してください。
第1問
HTML5ではDOCTYPE宣言は省略できる。
答え＝× HTML5では最初に<!doctype html>と宣言を記述することで、ブラウザはその文書がHTML5で書かれたものと認識しますので、この宣言は必須です。以前はこの宣言自体をすごく長々と書いたものですが、現在は短く一文入れるだけで良くなっています。
答え＝× PNG形式は256色の保存形式もありますが（PNG8）、JPEGと同じように1670万色の保存形式のものもあります（PNG24）。
答え＝×
まずフォントですが、ユーザーの端末の環境でデバイスフォントにバラつきがあります。Winではデフォルトだと「メイリオ」や「ＭＳ Ｐゴシック」、Macだと「ヒラギノ角ゴ」がポピュラーです。色も256色中216色はどの環境でも統一されていますが、残りの40色はOS間でバラつきがあります。
ちなみに、このフォントをどの環境でも同じにしたい際は、WEBフォントを読み込んで指定してあげると、環境が違っても統一することができます。
答え＝○ もし周囲との明るさの差が大きかったら、作業がやりにくくて大変ですね。映画館で上映中にパソコンで仕事なんかしてたら大変です。
答え＝○
サイバーセキュリティ基本法は、平成26年に成立した新しい法律です。ざっくりいうと問題文のとおりです。興味がある方は下記にて詳細をご確認ください。
もっと詳しく見る>>
答え＝× 著作権は手続きなどは必要なく、またそのことについての明記がなくても自然に発生します。ネットで配布されているフリー素材などは、フリーと書かれてはいますが、商用はNGなど利用内容によっては著作権が発生するものも多々ありますので、使用の際は注意が必要です。
答え＝×
以前はi要素はテキストをイタリック体（斜体）で表す際のタグでしたが、HTML5からは仕様が変更されています。
HTML5でのi要素は「通常の文章とは異なる文章」を表し、例えば文章の中で心の声を表現する際や、専門用語を使用する際に、このi要素で囲みます。
答え＝× 文字色と背景色のコントラストが低いと文字が読みにくくなる（白の背景に白の文字をのせても見えないですよね）ので、できるだけ差をはっきりさせたほうが閲覧者は見やすくなります。
答え＝○
SVG形式では画像を拡大縮小しても劣化しませんし、ファイルサイズも変わりません。グラフィックソフトのイラストレーターを使っている方はイメージしやすいかと思います。
PNGやJPEGは画像のサイズが大きいとそれに比例してデータのサイズも重くなりますが、SVGはベクターデータとなりますので、拡大してもサイズは軽いままで、かつ画質もきれいです。
使いどころとしては、完全な図版や装飾文字、イラストなど、ビットマップ画像が含まれていないものが適しています。私もサイト制作でよく使用してます。
答え＝×
ユニバーサルデザインとは、その対象者が日本人や外国人ということではなく、全ての人にとって使いやすく設計されたものですので、多言語対応のことのみということではありません。
また、こちらはWEBサイトに限ってのものではなく、日用品から施設など、身の周りのもの全てが対象となります。
<link rel="icon" href="images/nspc.ico">
答え＝3
ファビコンとは、そのホームページのロゴアイコンのことで、みなさんもブラウザのお気に入りに登録した際に、サイト名の左横に小さなアイコンが表示されているのを見ていると思いますが、あれがファビコンです。
HTMLにファビコンを設置する際は、上記のようなコードを挿入します。特長は画像の拡張子が「.ico」となっていますので、この拡張子の画像があったら、それはファビコンと認識して大丈夫です。
WEBページにファビコンを設置する際は、ネット上にファビコンを作成するサイトがたくさんありますので、そちらを利用すると良いです。
<video ●● width="250">
<source src="sample.mp4" type="video/webm">
</video>
答え＝1 操作インタフェースを表示したい際は「controls」と記述します。controls属性を指定すると、再生、一時停止、再生位置の移動、ボリュームなど、動画を使いやすくする操作画面をブラウザが自動で表示してくれます。
答え＝2
16進数で色を表現する際、左から2ケタずつの数字を1グループとしてRGBで表します。問題ではred（赤）はどれか？ですので、この場合は一番左の2ケタの数字「R（レッド）」がff（最大値）となっていないといけません。
16進数では0→1→2→3→4→5→6→7→8→9→a→b→c→d→e→fで色を表します。fが最大値となりますので、一番左の2ケタの数字がffで赤が最大、中央の2ケタ「G（グリーン）」が00で最小、右の2ケタ「B（ブルー）」が00で最小で「#ff0000」は赤となります。
では、この考え方で問題の他の数字が表している色を読み解くと、1はすべてが最小の0なので黒、3は中央の2ケタがffでそれ以外が00なので緑、4は右の2ケタがffでそれ以外が00なので青となります。
答え＝3
セレクタを > で区切ると、セレクタの直下の階層にある子セレクタを対象にスタイルを適用することができます。
この指定方法の良い点は、子セレクタだけが対象で、孫以下は設定が反映されない点です。
問題ではul直下のli要素に対して文字色を白と設定していますが、入れ後でさらにli要素があった際、普通に書くとそれも白になってしまいます。それぞれで任意でクラス名を付ける分ける方法もありますが、できるだけHTMLはスマートに記述したほうが良いので、無駄に書き込むよりはこういう書き方をしたほうが、後々修正する際も見やすくて作業がしやすくなります。
答え＝3
巨大なデータを送りつけて、サーバーをダウンさせる攻撃手法を「DoS攻撃」といいます。これの特長は個人が自分のパソコンから一人で攻撃をおこなうことです。これの発展形で「DDoS攻撃」というものがありますが、こちらは複数人でサーバーをダウンさせる攻撃方法です。
今回はDoS攻撃についてでしたが、これまでのパターンから上記4択の攻撃手法はすべておぼえておいたほうが良いです。以下に簡単に記載しておきますので、できるだけおぼえておいてください。
▼パスワードリスト攻撃
悪意を持つ第三者が、何らかの手法によって入手したID・パスワードのリストを利用してWebサイトにアクセスを試み、利用者のアカウントで不正にログインされてしまう攻撃のこと。
▼クロスサイトスクリプティング
攻撃対象のウェブサイトに、セキュリティが弱い掲示板のようなウェブアプリケーションが掲載されている場合に、第三者がそこへ悪意のあるプログラムを仕掛けて、サイト訪問者の個人情報を盗むなどの被害をもたらす攻撃のこと。
▼ドライブバイダウンロード
悪意のあるサイトを訪問した際、閲覧者の意思に関係なく自動的にウイルスなどの不正なプログラムをダウンロードさせる攻撃のこと。
答え＝1 HTMLで段落を表現する場合は、その対象を「p要素」で囲みます。コーディングではとくに使用頻度が高い要素です。
1.1●●のガイドライン
全ての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、●●を提供する。
答え＝4 こちらは問い方をあえて難しくしているだけで、全ての非テキストコンテンツとは文字以外のものを指し、おもには画像などのことです。WEBページでは画像などを表示できない環境でアクセスしてきた人のために、通常は表示されませんが「代替テキスト」を入れるようにとなっています（alt属性）。制作者はより親切な作り方をしないといけませんよということですね。
答え＝1
input要素はHTMLでフォームを作る際に使用します。input要素はHTMLのバージョンが上がるのと比例して、使える種類も増えていまして、最近では以前と比べて簡単に凝ったフォームが作れるようになりました。
ちなみに回答のradiobuttonはtype属性ではなく「checked属性」になります。
1.4.1 ●●の使用の達成基準
●●が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない(レベルA)。
答え＝1
JISX8341-3とは、サイトの閲覧者が見やすい、使いやすいサイトを設計するための制作者向けのガイドラインです。ちなみに8341は（や・さ・し・い）のゴロ合わせです。
問題文は「色」についてのガイドラインで、こちらは丸暗記で良いです。
答え＝3
inherit（インヘリット）値は、親要素の設定を強制的に継承させたい時に使用します。実務でコーディングをしている人でも、inherit値はあまり使うことがないので、意識したことがない方も多いのではと思います。
CSSでは、親要素の設定を継承したほうが便利に作業できるものは、最初から自動的に継承されるようになっていますので、通常はinherit値は気にしなくても支障はありません。ただ、デフォルトでは継承されない要素を継承させたい時は、このinheritの存在を知らないと、同じ設定を何度も書かないといけなく、それはそれで作業も管理も大変になりますので、CSSのデフォルトでは設定を継承しない要素を、強制的に継承させたい時はinheritを使うとおぼえておけば良いと思います。
答え＝4
これはまたマニアックな問題が来たなという印象です。通信のポート番号はサーバー管理者などでない限りは、通常は知らなくて当然です。現役のWEBデザイナーやコーダーの方も知らないという方が多いのではと思います。試験ではこちらの正解率は低かったんじゃないかなぁと思います。
では解説に入りますが、インターネット上の通信ではそれぞれでポート番号が割り当てられています。通常WEBサイトにアクセスするとURLが表示されますが、本当はここには表示されていないだけで、見えない番号があります。HTTPなら80番、FTP（サーバーへのファイル）転送なら21番など。これらの番号は世界共通で割り当てられていて、これらを総称で「ウェルノウンポート」といいます。
ここではそれぞれのポートがどういうものかという解説までは割愛しますが、以下に代表的なものを記載していますので、試験対策としておぼえておいてください。
・HTTP→80番 ・FTP→21番 ・SMTP→25番 ・DNS→53番
・POP3→110番 ・HTTPS→443番
答え＝3
文字に対して何かしら設定をしている際、それをデフォルトに戻したい時は「normal」と記述します。
例えばあるブロック対して、文字の装飾を共通設定として親とした際、その中にある一ヶ所だけはその設定を反映させたくないという場合に、その箇所に対して「font-style: normal;」を設定することで、そこだけは標準の状態に戻すことができます。
答え＝3 HTMLに動画を埋め込みたい際はmovieとは書かず<video>～</video>でその内容を囲みます。音声なら「audio」画像なら「picture」です。
答え＝4 こちらはalt属性に入れる文字を適切に判断できるかを問う問題ですね。alt属性とは画像が表示されない方に、代わりに文字でその画像が何なのかを伝えるためのものですので、ここに入れるテキストは漠然としたものではなく、閲覧者に正しく情報が伝わる文章を記述する必要があります。
<input type="checkbox" id="item01">
<label ●●="item01">項目01</label>
答え＝1 問題はフォームを作成する際のコードです。label ●●の●●にはforと記述します。これが他の単語に変わることはなく、HTMLの文法ですのでそのままおぼえてください。
