学習効率UP】ウェブデザイン技能検定3級試験の過去問を徹底解説!!

ウェブデザイン技能検定3級試験の過去問対策

ウェブデザインという分野で唯一のIT国家資格「ウェブデザイン技能検定」。これからこの資格を取ろうと思っている方にとって、どのように学習していくのが一番最短で合格できるのか? 情報がたくさんあるだけに迷ってしまいますよね。

試験は学科(25問)と実技(6問中5問を選択)とあって、その両方に合格してはれて「3級ウェブデザイン技能士」となれます。2級、1級は実務経験がある程度の年数必要になってきますので、実務未経験で技能士の資格をとろうと思ったら、まずはウェブデザイン技能検定の3級を取得しましょう。

この試験は公式サイトから過去問と解答をダウンロードして勉強できますが、これには問題と解答のみなので、ひとつずつ問題に出てくる用語とその解答の用語の意味をググって調べるのが、結構時間もかかって大変です。今この資格を取ろうと思って勉強している方も、問題と解答は手に入るので、あとは解説があればな~と思っている方も多いんじゃないでしょうか?

この試験は過去の問題がそのまま出てくる、またはちょっとひねって出てくることが多いので、対策としては幅広く勉強するよりも、とにかく過去問を解きまくって専門用語をおぼえるのと、答えがなぜそうなるのかを理解していくのみです。こちらにわたくしの言葉で恐縮ですが、過去問に対しての解説をまとめてみましたので、ぜひ試験勉強の際の参考にしてください。

試験の過去問は公式サイトから

ウェブデザイン技能検定の公式サイト内の以下のリンクを参照。過去問題と解答が公表されています。
http://www.webdesign.gr.jp/kentei/publication.html

こちらには練習問題(学科、実技)と実技素材が公表されています。
http://www.webdesign.gr.jp/kentei/measures.html#rensyu

複雑な問題には、解説の中に「もっと詳しく見る」リンクを設置しています。こちらはわたしが試験勉強する際に、参照させていただいたサイト様です。丁寧にわかり易く解説されていますので、理解を深めるのにぜひ参照してみてください。それでは、順序よく最新の学科問題からひとつずつクリアしていきましょう。

過去問の解説(平成29年度第3回学科試験)

ウェブデザイン技能検定3級学科(平成29年第3回試験)

〇平成29年度-第3回学科試験の過去問題と解答pdfはこちら

第1問の解説

答え=1 HTML5.1は2016年11月1日にW3Cによって勧告されています。

第2問の解説

答え=2 DMZ(デミリタライズド・ゾーン)とは、外部に公開するために隔離した、内部ネットワーク内の一部の領域のことです。

たとえば社内ネットワーク内にWebサーバーを設置して、ここにコーポレートサイトを置いて、世界に向けて情報を発信するとします。このサーバーは社内ネットワーク内にあるので、社内の人はもちろんアクセスすることができますが、外部の人でもここにはインターネット経由で自由にアクセスができます。一部公開しているとはいえ、社内のネットワークにまったく関係がない人でも自由にアクセスできるのは、セキュリティの面で非常に危険です。そこでこのサーバーを隔離して、もしもの時はこのサーバーだけの被害で済むようにしたものをDMZといいます。DMZに設置したサーバーは、内部や外部の人すべてがアクセスできるサーバーで、それ以外のPCは外部の人からはアクセスできないというしくみです。

第3問の解説

答え=2 ランサムウェアとは、たとえば外部からの侵入者が勝手にファイルにアクセス制限をかけて、そのファイルを作成した本人でも開くことができなくなるため、作業の続きができなくなって非常に困るというマルウェアです。これに感染すると、ファイルを開くためにはパスワードが必要となり、これを教える代わりに金銭を要求されることもあるようなので、ユーザーは日ごろからマルウェアに感染しないよう、危ないサイトへはアクセスしない、怪しいメールは開かないといった注意が必要です。

ちなみにこの問題にある、コンピュータの内部情報を外に勝手送信するマルウェアは「スパイウェア」といいます。

第4問の解説

答え=2 ウェブサイト上で使用する静止画の適正解像度は72dpiです。解像度がそれ以下になると、画像が鮮明でなくなり粗く見えてしまいます。逆にそれ以上になると無駄に重くなって、表示に時間がかかってしまい、ユーザビリティの点からもよろしくありません。ただ、その辺りを完全に無視して、技術的にできるできないだけで考えると、解像度はいくつあっても表示はされます。

第5問の解説

答え=1 これはガイドラインでもそう言われているので、そのまま暗記しましょう。

第6問の解説

答え=1 フィッシング詐欺とかニュースで聞きますよね。みなさんも悪い人に釣られないように、安易に知らないメールは開かないようにしましょう。

第7問の解説

答え=1 ラスターグラフィックスとは画像データのことです。写真のファイル形式でよく使われる「JPEG」はみなさんも身近じゃないでしょうか。

グラフィックデータのフォーマットは、もうひとつ「ベクターグラフィックス」というのがあります。こちらは拡大しても粗くならないという特徴があって、Adobe Illustratorで作成したデータやSVGなどが有名です。

第8問の解説

答え=2 HTML5からはこれまでのH1やH2などの見出しは、そのページの見出しではなく、セクションの見出しと定義されています。セクションの中に見出しを設定するので、これまでの常識だった1ページ内にH1はひとつだけという概念はなくなり、いくつもH1が存在しても良いように変わっています。

ただこの問題にある、必ず見出しを1つ以上と強制はされていません。

第9問の解説

答え=2 OSI参照モデルについては下記のリンク先で詳しく説明されているので、こちらを参考にしてください。

問題にあるTCP/IPですが、TCPはOSI参照モデルでは「トランスポート層」に属し、IPは「ネットワーク層」に属しています。
もっと詳しく見る>>

第10問の解説

答え=1 HTMLでは は空白スペースを入れるために記述します。ブラウザがそれはタグなのか、それとも文字なのかを判別するための書き方です。他にもこういったものがいくつかありますので、どれが問題になってもいいように、知識として身につけておきましょう。
もっと詳しく見る>>

第11問の解説

答え=2 これは法律でこのように言われているので、そのまま暗記しましょう。

第12問の解説

答え=3 Ajax(エージャックス)とは、ブラウザがJavascriptの機能を使って、再読み込みをせずともページの一部を動的に書き換えたり、操作する技術のことです。代表的なもので、皆さんも馴染みが深いものではグーグルマップなどがそうです。

第13問の解説

答え=4 電話番号をマークアップするにはaddressを用います。ちなみに他に選択肢として上げられている「pは段落」、「divは任意でidやclass名を定義するブロック要素」、「spanは任意でclass名を定義するインライン要素」です。

第14問の解説

答え=4 問題ではまずスタイルでh1の色は緑、#abcは青に設定されていますがstyle="color:red"とインラインで直書きされていますので、スタイルの詳細度(適用の優先度)から、h1の色は赤になります。
もっと詳しく見る>>

第15問の解説

答え=4 これは丸暗記しましょう。ユニバーサルデザインについての詳しい解説は下記を参照ください。
もっと詳しく見る>>

第16問の解説

答え=3 スタイルシートで「!important」と記述した設定は、詳細度に関係なく最優先で適用されます。

第17問の解説

答え=3 CSSでarticleの親にあたるmainに「float: left;」と記述してあるので、article要素の内容はaside要素の左に配置されます。

その他はすべて×です。aside要素内に箇条書き要素は配置できます。footer要素はCSSで「clear: both;」と記述してあるので、main要素とaside要素の回り込みを解除しています。

第18問の解説

答え=1 nav要素はナビゲーションのリンクを含むセクションです。ここでセクションって何?と思う方もいるでしょう。セクションとは章や節や項のように、見出しとそれに関する内容というように、階層構造になる範囲を定義する領域のことです。

こういう専門的な言い方をすると???となる人もいるでしょう。簡単に言うとWebページの構造は、それぞれ例えばナビゲーション、新着情報、メイン記事、問い合わせなど、意味を持った情報ブロックの集合体なのですが、そのブロックの事と考えると分かりやすいかと思います。

第19問の解説

答え=2 margin設定の考え方としては、マックスで4つの数値があてられますが、この際時計回り(上、右、下、左)の順に設定されると憶えておきます。

次に数値が3つのパターンでは、上、左右、下と設定され、2つパターンでは上下、左右となります。

この場合、margin: 10px 3px ; と数値が2つありますので、10pxが上下のマージン幅、3pxが左右のマージン幅となります。

第20問の解説

答え=1 一つのページ内に重複してはいけないものは「id属性」です。この属性は、同じ名前のものが一ページ内に必ず一つでないといけません。

第21問の解説

答え=3 fontはHTML5からは廃止されています。この手の問題はよく出る傾向のようですので、他にも廃止されたもの、逆に追加されたものはひと通り憶えておいたほうが良いです。
HTML5で廃止された要素・属性一覧>>
HTML5で追加された要素・属性一覧>>

第22問の解説

答え=2 DOM(Document Object Model)とは、HTMLやXML文書をプログラムで操作するための仕様です。簡単な操作例ですと、文字の挿入や差し換え、色を変えたりなどができます。

第23問の解説

答え=3 img要素に指定するalt属性を代替えテキストと言います。その名の通り、画像が表示できない時に代わりに表示されるテキストのことです。アクセシビリティの観点からも、この代替えテキストは例外を除いて、基本入れるようにとなっています。

第24問の解説

答え=3 2000年初期では、Webページはテーブルでのレイアウトが主流でしたが、現在は禁止されています。技術的に出来なくはないですが、こういう使い方はW3Cもやめるようにと言っています。

ちなみに、現在でテーブル要素を使う場面が出てきた際は、それがレイアウト目的ではなく表組での使用であることを証明する意味でも、必ずボーダー(罫線)を入れるようにとなっています。

第25問の解説

答え=3 rgbaで色を表現する際の()の中は0から255の数値で指定します。最後のaは色ではなく透明度の設定で、1で完全な不透明、0.5で半透明、0で完全な透明となります。

目次へ戻る

過去問の解説(平成29年度第2回学科試験)

ウェブデザイン技能検定3級学科(平成29年第2回試験)

〇平成29年度-第2回学科試験の過去問題と解答pdfはこちら

第1問の解説

答え=2 インターネットにおける通信速度の差異には様々な要因がありますが、そのひとつに「回線の混雑」があります。例えば社内ネットワークの回線スピードが100Mbpsとして、同時にインターネットにアクセスしている社員が100人いれば、一人あたりに割り当てられるのは単純計算で1Mbpsとなります。回線が本来もっている性能の1/100です(実際はここまで単純計算ではありませんが)。逆に誰も使っていなければ回線を独り占めできるので、本来回線が持つスピードを最大限体感できます。

第2問の解説

答え=2 動画ファイルの拡張子をjpegにしても、静止画として表示はできません。

第3問の解説

答え=1 ボックスのマージン領域とは、ボックスからみて外側の余白のことです。この余白は必ず透明になるので、当然背景を表示させることはできません。

第4問の解説

答え=2 コピーライトの記載がなくても、それで著作権を放棄したことにはなりません。

第5問の解説

答え=1 ユーザエージェントとは、簡単に言うと自身が使っている「ブラウザ」のことです。通常ホームページを見る際は、リンクをクリックする、またはブラウザに直接アドレスを入力することでWEBページが表示されますが、これをHTTPリクエストといって、自分から「このページを見せておくれ~」とWebサーバーに要求(リクエスト)しているということです。

Webサーバーはこの要求にこたえてデータを送信してくれるので、この送信してきたデータをブラウザで見ているのが、いつもやっているホームページを見るという行為になります。この際のHTTPリクエストの2行目以降に含まれている情報がHTTPヘッダです。HTTPヘッダにはユーザエージェント情報、リファラ情報など、いくつかの情報が含まれています。
もっと詳しく見る>>

第6問の解説

答え=1 これはそのまんまですね。ディスプレイからの距離が近くても遠くてもきついですからね。この問題はおおむね40cm以上というところをおぼえておきましょう。

第7問の解説

答え=2 HTML5ではタグの省略ができます。以前は書くのがあたりまえだったhtml、 head、bodyタグも実は省略可能です。

第8問の解説

答え=2 コントラストが低いというのは、例えば黒い背景に黒っぽい文字、白い背景に白っぽい文字をのせてる状態です。こんなことしたら見にくいことこの上ないですね。テキストと背景のコントラスト比は、できるだけ高くしましょう。

第9問の解説

答え=1 FTPサーバはアクセス許可もですが、そもそも認証の際のID、パスワードは暗号化されていないので、第三者からの盗聴や不正にアクセスされる危険性があります。ちなみにこれがFTPSだと暗号化されているので、セキュリティの面で飛躍的に安全性は高まります。

第10問の解説

答え=1 他人のマイナンバーを不正に入手して公開するというのは、当然のことながらNGですよ。

第11問の解説

答え=1 アンシャープマスクとは、写真のピクセル間の色の差を強調することで、輪郭をよりはっきりとシャープにする効果があります。Photoshopにあるフィルタです。

第12問の解説

答え=4 ウェブページで問い合わせ先(電話、メールアドレス、住所)などを掲載する際は、addressタグでマークアップします。
もっと詳しく見る>>

第13問の解説

答え=2 この中ではflexです。CSS3から追加されたプロパティで、ブロック要素に対してdisplay:flexと指定してやれば、Flexboxコンテナーとして定義することができます。ちょっと難しいですが、レスポンシブデザインなどで重宝するプロパティです。

ちなみにその他のプロパティでの効果は、noneが非表示、blockがブロック要素に変更、inlineが、例えばリストタグで定義したナビゲーションリンクを想像するとわかり易いですが、通常はそのままだと縦に並んでいきますが、それを横並びにするプロパティです。
もっと詳しく見る>>

第14問の解説

答え=4 マルウェアとは悪意のあるソフトウェアのことです。よく聞くコンピュータウイルスもそのひとつです。これらに感染しないためにも、アップデートの通知がソフトウェアのベンダーから届いた際は、速やかにアップデートを行いましょう。
もっと詳しく見る>>

第15問の解説

答え=2 olで囲ったリストは番号付きリストになります。一度閉じたolリストを続きから再開したい際は、<ol start="任意の番号">~</ol>と記述します。
もっと詳しく見る>>

第16問の解説

答え=2 この4択の中だと2になります。ページのヘッダーやフッター、グローバルナビゲーションをイメージするとわかり易いです。

第17問の解説

答え=1 フォームを作る際のHTMLです。Aには「type」、Bには「checked」、Cには「for」が入りますので、答えは1の「on」となります。

第18問の解説

答え=4 個人情報保護法においての本人の同意とは、本人に何らかのアクションをしてもらわないといけませんので、電子メールで知らせるだけでは不十分です。よって答えは4となります。

第19問の解説

答え=3 同じユーザID・パスワードの組合せを使い回していると、パスワードリスト攻撃にあいやすくなります。パスワードリスト攻撃というのは、攻撃者が別のサービスやシステムから、何らかの理由で流出したIDとパスワード情報を入手した際、それらのリストを手あたり次第に入力してログインを試みる手法です。この攻撃の回避策としては、同じIDとパスワードは使いまわさないようにすることです。
もっと詳しく見る>>

第20問の解説

答え=3 wav(ウェーブ)はWindowsの音声ファイルフォーマットです。他にも主だったものをいくつか上げると

AIFF…Macintoshの音声ファイルフォーマット
MP3…圧縮率が高く、かつ良音質のファイルフォーマット
AAC…MP3の後継ファイルフォーマット。おもにガラ携で使われています。

などがあります。今回はwavでしたが、これらも併せて音声ファイルとおぼえておきましょう。ちなみに他のbmp、tiff、gifはすべて画像のファイルフォーマットです。

第21問の解説

答え=2 strongはHTML5からこれまでと使い方が変わっています。これまではテキストを強調する際に使っていましたが、HTML5からは「強い重要性を表す」となっています。他にもHTML5から意味が変わったもの、廃止になったもの等ありますので、今回はstrongでしたが、何がきてもいいように準備をしておきましょう。

第22問の解説

答え=2 これは完全に引っ掛け問題ですね。文章をよく読まないと、迷わず3を選びそうです(笑)。

clearプロパティは、floatプロパティによる回り込みを解除したい場合に使用しますが、ここでは「適用対象として定義されている要素」と書かれているので、答えはブロックレベル要素となります。

第23問の解説

答え=1 画像の代わりに使用するテキスト=代替えテキスト=alt属性とおぼえます。4択の答えが「alt属性」の時もあれば「代替えテキスト」の時もあるので、両方をおぼえておきましょう。

第24問の解説

答え=4 過去門をいくつかやっていると、この手の問題は似たようなものがいくつも出てきますので、答えに迷ってしまうことが多々あります。人々の知覚と反応ときたら「ユーザエクスペリエンス」とおぼえると良いです。
もっと詳しく見る>>

第25問の解説

答え=2 CSSにはp { margin: 50px 30px; }と書かれていますが、この問題を解くにはマージンの値が何個書いてあるかに注目します。マージンの値の個数で適用箇所が変わってきますので、まずはそれらをしっかりと理解しましょう。

{margin: 50px; }と値が一つの場合は、余白は上下左右の4方向に50pxの余白という意味になります。

{margin: 50px 30px; }と値が二つの場合は、余白50pxが上下、30pxが左右となります。

{margin: 50px 30px 20px; }と値が三つの場合は、余白50pxが上、30pxが左右、20pxが下となります。

{margin: 50px 30px 20px 100px; }と値が四つの場合は、余白50pxが上、30pxが右、20pxが下、100pxが左となります。時計回りとおぼえると良いです。

これら4パターンを覚えたところで問題を見てみましょう。問題では段落1と2のマージン間隔と書いています。<p>段落1</p>と<p>段落2</p>は縦に並ぶので、この場合考えないといけないのは、上下の余白50pxです。

単純に段落1の余白下50pxと段落2の余白上50pxを足して100pxと考えがちですが、この場合余白の足し算はしません。HTML上では、この余白は重なり合いますので、段落1と2のマージン間隔は50pxとなります。

目次へ戻る

過去問の解説(平成29年度第1回学科試験)

ウェブデザイン技能検定3級学科(平成29年第1回試験)

〇平成29年度-第1回学科試験の過去問題と解答pdfはこちら

第1問の解説

答え=1 head要素はbody要素の前に記述します。HTMLの構造は
<html>
 ↓
<head>
タイトル、ディスクリプションなどのメタ情報
</head>
 ↓
<body>
 ↓
実際にブラウザに表示されるコンテンツ部分
</body>
 ↓
</html>
の順で記述していきます。 head要素には主に「タイトル」「デスクリプション」「キーワード」など、サイトのメタ情報を記述する部分で、検索エンジンはこれらの情報を重要な参照元として、そのサイトがどんなサイトなのかを判断し、検索結果に表示します。

第2問の解説

答え=2 img要素のalt属性には何らかのテキストという曖昧なテキストでは×です。ここにはimg要素が表示されない際に、その代わりとなるテキスト「代替テキスト」を入力します。

第3問の解説

答え=2 拡張子を変えるだけではJPEG画像にはなりません。Photoshopなどの画像ツールで、JPEG形式に新規保存する必要があります。

第4問の解説

答え=2 hoverは疑似クラスと言います。通常は擬似要素→hover(疑似クラス)といった順序では記述しません。逆にhover(疑似クラス)→擬似要素の順はあります。

第5問の解説

答え=1 非可逆圧縮の代表的なものでは「JPEG」がありますが、非可逆圧縮では保存するたびにどんどん画質が劣化していきますので、復号してもデータを圧縮前の状態に完全に復元することはできません。この逆で可逆圧縮という形式がありますが、これは「png」や「gif」などがそれにあたります。

第6問の解説

答え=2 最近ではひとつのhtmlファイルで、スマホで見る時はこのデザイン、PCで見る時はこのデザインといったレイアウトの切り替えができる、レスポンシブデザインという手法が推奨されています。スマホとPCで別々にデータを用意するのもダメではありませんが、なるべくひとつのファイルでというのが最近の流れです。

第7問の解説

答え=2 address要素は、あくまでそのページの内容に関する連絡先であって、住所をマークアップするためのタグではありません。addressを日本語でいうと住所という意味になるので、ちょっとこんがらがるかもしれませんが、htmlでのaddress要素の使い方は、住所ではなくおもにメールアドレスや問い合わせフォームとおぼえてください。

第8問の解説

答え=1ppiはピクセルパーインチと読みます。その名の通り、1インチの中にいくつのピクセルがあるかを示した単位です。同じようなものでdpi(ドットパーインチ)がありますが、これは1インチの中にいくつのドット(点)があるかを示した単位です。どちらも同じようなものですが、ppiはおもにモニターで表す際の単位で、dpiは印刷物で表す際の単位とおぼえておくとよいでしょう。

第9問の解説

答え=1 webページを見ているとフォームの入力などでよく見かけます。例えばメールアドレスの記入欄に、グレー表示であらかじめ例となるアドレスが入っていて、カーソルをもっていくとアドレスが消えて入力するなどというあれですね。こうしておくと、ユーザーが入力していく際にわかりやすくて親切ですね。フォームを作る際は、ラベルや説明をつけて使い勝手が良い作りにしましょう。

第10問の解説

答え=1 VDT作業は長時間同じ態勢で仕事をおこなうので、労働衛生管理のためのガイドラインでは体操やストレッチなど、仕事の合間に軽い運動をおこなうことを推奨しています。

第11問の解説

答え=4この4択だと答えは4番のbasefontです。basefontはHTML5では廃止されています。他にも廃止された要素がありますので、それらはできるだけ全ておぼえておきましょう。以下がその廃止された要素です。

<acronym> 略語(頭字語)
<applet> Javaアプレットの埋め込み
<basefont> 基準となるフォントサイズ
<bgsound> BGMの再生
<big> 大きめの文字
<blink> 文字の点滅
<center> センタリング
<dir> ディレクトリ型のリスト
<font> フォントのサイズ・色・種類
<frame> フレーム内の設定
<frameset> ウィンドウの分割
<isindex> 1行のテキスト入力欄
<marquee> 文字のスクロール
<nobr> 改行させない
<noembed> embed要素の代替コンテンツ
<noframes> フレームの代替コンテンツ
<strike> 取り消し線
<tt> 等幅フォント

第12問の解説

答え=2 セキュリティ対策としては、安易にメールの添付ファイルを開くのは不適切です。ウイルスに感染する一番の要因なので、知っている名前、聞いたことがある名前だからといって、油断しないようにしましょう。

第13問の解説

答え=1 外部スタイルシートだからレイアウトが正しく再現されるということはありません。外部だろうが内部だろうが、記述が正しければ正しく表示され、間違っていれば表示は崩れます。

第14問の解説

答え=1 SVG(スケーラブル・ベクター・グラフィックス)は、W3Cによって開発、勧告された、ベクター形式のグラフィックデータです。残りは全てラスター形式(ビットマップ)データです。

第15問の解説

答え=2 セクショニングコンテンツに属する要素は
article
aside
nav
section

の4つです。
他にも「ヘッディングコンテンツ」「メタデータコンテンツ」など複数あって、これらをすべて含めたコンテンツを「フローコンテンツ」といいます。
もっと詳しく見る>>

第16問の解説

答え=4 SSLとは通信を行うときに、情報の暗号化を行って通信を行う技術のことで、ネットショッピング、個人情報や決済情報などをやりとりするときに使われています。SSLを導入するとhttp://→https://、ftp://→ftps://といったように、最後にsがつきます。

第17問の解説

答え=2 emというのは相対単位のことで、親要素を基準に変化します。親要素のフォントサイズが10pxだと1.5emは15pxに、20pxだと30pxになります。webサイトを作る際は、たとえばbody要素に基準の文字サイズ、ここではピクセル指定(絶対単位)し、以外は全てem指定をしていくほうが、途中で全体の文字サイズを変えたいとなった時に、基準のサイズだけ変えればすべてが連動して変化するので、修正がしやすいです。

第18問の解説

答え=3 この問題のポイントは<ol>(番号付きリスト)と<ul>(番号なしリスト)の使い方を見極めることです。はじめは<ol>で始まっているので、「試験申し込み」までは番号が付きます。その後入れ子で<ul>リストが入っていますので、試験概要から受験申請までは、ただのリスト表記となります。

第19問の解説

答え=2 GETメソッドは、入力した内容がURLバーに表示される危険性があるため、パスワードなどの機密情報を送る際は絶対に使用してはいけません。こういう時はpostメソッドを使うのが好ましいです。
もっと詳しく見る>>

第20問の解説

答え=1 光の三原色とはRGB(R(赤)G(緑)B(青))で表します。パソコンのモニターやスマホの画面などはこの方法で色を表現しています。どんどん光の量が増えていくと最終的には白となり、これを「加法混色」といいます。

第21問の解説

答え=3 sXHTML、HTML4.01のバージョンには「Strict」「Transitional」「Frameset」という3つのバージョン形式があります。これらの違いは

Strict→推奨しない要素や属性の使用ができない。当然フレーム要素もNG。
Transitional→Strictの要素に加えて、推奨しない要素や属性の使用もOK。
Frameset→Transitionalの全ての要素に加えて、フレームも使用OK。

という感じで、下にいくほどHTMLの使い方の規制がゆるいとおぼえると良いです。現在はフレーム要素は非推奨(ページに埋め込むiframeは別)なので、Framesetは初めから除外するとして、一般的にはTransitionalが主流と思ってもらって大丈夫です。Transitionalのほうが融通が利くので、あとからの追加修正などにも対応しやすいです。

4択の中で非推奨の要素はcenter要素になりますので、Strictで使用できないというところで答えは3となります。

第22問の解説

答え=2HTTPステータスコードはおおまかに分けると

200番台→正常な通信
300番台→リダイレクト
400番台→リソースエラー
500番台→サーバーエラー

と種類があります。

404Not Foundの意味は、リソースが見つからない、もっと簡単に表現すると、アクセスしたページがないということです。また、403Forbiddenも良く問題に出てきます。こちらはページへのアクセス拒否という意味です。サイト運営者があえてアクセスしてくる人に制限をかけているか、もしくは設計ミスで意図せずに制限がかかってしまうなどで、このエラーが出てきます。

ちなみに200番台は初めて知ったという方も多いかと思います。正常な通信という意味で、通常ネットでページを問題なく見ている際は、裏でサーバーからこの200番台のステータスコードが返ってきているということになります。正常な状態なので、通常はこの番号を見ることはありません。

第23問の解説

答え=3 Top Level Domainのそれぞれの頭文字でTLDと言います。その中で.comはgTLD(ジェネリックトップレベルドメイン)といって、世界中で制限なく利用できるドメインです。
もっと詳しく見る>

第24問の解説

答え=1 ユニバーサルデザインとは、障害の有無や年齢、性別、人種などにかかわらず、すべての人々が利用しやすいように、製品やサービス、環境をデザインするという考えです。

第25問の解説

答え=4アクセスビリティガイドラインに関しては、この検定ではよく出てきます。項目が多いので、試験の回ごとにどの部分をチョイスしてくるかは分かりません。なるべく多くの過去問をやりながら、以下のサイトで幅広く知識を取得しておきましょう。

JIS X 8341-3もWCAG2.0も言っている内容は同じです。
もっと詳しく見る>>

目次へ戻る

過去問の解説(平成28年度第4回学科試験)

ウェブデザイン技能検定3級学科(平成28年第4回試験)

〇平成28年度-第4回学科試験の過去問題と解答pdfはこちら

第1問の解説

答え=2 index.htmlをデフォルトドキュメントと言って、ファイル名を省略しても表示されるファイルのことです。このデフォルトドキュメントには5種類あって、以下のファイル名がそれにあたります。

index.html
index.htm
index.shtml
index.cgi
index.php

この中で、たいていのサーバーは基本的にはindex.htmlを優先順位が一番高いファイルと認識しますが、100%ではありません。中にはindex.phpを優先順位が一番高いファイルと認識するサーバーもあります。ファイル名を省略しても良いものはindex~で、例えばtop.htmlなど、ファイル名がindex以外の場合は、省略するとエラーになります。

この問題では「必ずindex.htmlが表示される」と問われているので、答えはNOとなります。

第2問の解説

答え=2tr:nth-child(even) は疑似クラスのひとつで、()内に指定した内容でスタイルを適用するというCSSです。()ないには整数・奇数を表すodd・偶数を表すeven・数式を指定する2n+~と書きます。

数式で奇数を指定するには2n+1、偶数を指定するには2n+0と書きます。ちなみにこれを2n+3と書いた場合は、3番目の子要素からスタートして、その後2つおきにスタイルが適用されます。

以下にこれを表に指定した際を図版で解説してみたので参照ください。
図版1 図鑑2 図版3

第3問の解説

答え=1 例えば同じ写真を使って、一つはサイトのロゴの素材として、一つは記事中写真として使っている場合、当然代替テキストの内容は変わってきます。

第4問の解説

答え=1 「サイバーセキュリティ基本法」は、サイバーセキュリティに関する施策を総合的かつ効率的に推進するため、基本理念を定め、国の責務等を明らかにし、サイバーセキュリティ戦略の策定その他当該施策の基本となる事項等を規定しているとのことです。
もっと詳しく見る>>

第5問の解説

答え=2 ウェブページの背景には画像だけでなく、GIFアニメーションも表示できます。

第6問の解説

答え=1 VDT作業は長時間同じ姿勢での作業ですので、作業休止時にはストレッチをしたりなど、だいたい5分~10分くらいの時間は休憩時間外として法で定められています。

第7問の解説

答え=1 ラジオボタンはフォームの入力時に見ますが、チェックボックスとこんがらないように注意してください。複数ある選択肢の中から1つを選ぶのがラジオボタン、複数選択する場合はチェックボックスです。

第8問の解説

答え=1 ユーザーエージェントとは、私たちがデータを利用する際に用いるソフトウェアやハードウェアのことをいいます。身近なものでは、サイトを訪問する際に使うブラウザ(Chrome、Safari、IE)などのことをいいます。

第9問の解説

答え=2これを解くにはテーブル要素を理解しておく必要があります。テーブルを構成する要素の基本は「th」「tr」「td」です。それぞれに役割があります。

th→テーブル(表)の見出しを作成
tr→テーブル(表)の行を作成
td→テーブル(表)のセル(データを書き込むマス)を作成

エクセルを使っている方はすぐにイメージできると思います。エクセルだと新規に立ち上げた時点で空白のセルができていますが、HTMLの場合はこのセルから作っていかないといけません。

表を作る際にエクセルだと最初にセルを連結して、その表のタイトルや見出しを入力していくことが多いと思いますが、それがHTMLのtableではthにあたり、横一列の行がtr、それぞれのセルがtdにあたります。

第10問の解説

答え=2HTML5以前では、ページ内にh1はひとつしか書けませんでしたが、HTML5からは各セクションごとにh1を使えるようになりました。結果ページ内にh1が複数存在することになりますので、答えは2となります。ちなみにh1とは大見出し、sectionは一つのセクション(かたまり)のことです。

第11問の解説

答え=3SSHとは、暗号や認証の技術を利用して、安全にリモートコンピュータと通信するためのプロトコルのことをいいます。たいだい名前に「S」がついていますので、この問題だと4番のHTTPは選択肢から消してOKです。残りのSMTP、TLS、SFTPのどれかなんですが、それぞれの意味が分からないと、これはちょっとひっかかってしまうかもしれません。

SMTP→メール送信のプロトコル
TLS→SSLをもとに開発された、Webページにセキュリティ機能を追加する技術
SFTP→SSHで暗号化された通信路を使って、安全にファイルを送受信するプロトコル

問題はSSHの仕組みを使ってとありますので、答えは3番の「SFTP」となります。
もっと詳しく見る>>

第12問の解説

答え=4#000000は黒のことなので、背景色は#ffffffの白が一番コントラスト比が高くなります。色のコントラスト比を考える際は、0~fの色の流れを理解しておくと便利です。

0(黒)→1→2→3→4→5→6→7→8→9 →a→b→c→d→e→f(白)

0(黒)からf(白)に向かって、どんどん色が薄くなっていきますので、1番の#000000(黒)の背景に黒の文字がのっても全然見えないので×、2、3番の#999999や#aaaaaaは、中間よりちょっと薄いグレーなので、その上に黒の文字がのっても見えなくはないですが見にくいので×、答えは背景が白の4となります。

第13問の解説

答え=1 代替テキストの役目は、その画像が表示されない時の代わりとなるテキストなので、この場合は1番の「検索」が一番適切です。

第14問の解説

答え=4 プロポーショナルフォントとは、文字により幅が異なるフォントのことで、文字の幅を調整して、表示や印刷の見栄えを良くする目的で使用されます。

第15問の解説

答え=3 WCAGとはWeb Content Accessibility Guidelinesの
それぞれの頭文字をとって合わせた読み方です。これはそのまま丸暗記しましょう。

第16問の解説

答え=4 これはIT知識というよりも、一般常識があれば誰もが解ける問題だと思います。この手の問題は、読み違いや勘違いに気をつけていれば大丈夫でしょう。

第17問の解説

答え=4 レシポンシブデザインは、現在のウェブサイト作成の主流で、デバイスの環境に応じてレイアウトが自動的に変わるウェブデザイン手法のことをいいます。PCで見る人にはこのCSS、スマホで見る人にはこのCSSを読み込んで表示といった具合です。

この見極めの仕方は、そのページを表示させるデバイスの横幅で判断しますので、実際はPCで見ていても、意図的にブラウザの横幅をスマホレベルにまで縮めると、スマホ用のCSSに切り変わって表示されます。

第18問の解説

答え=3 この問題の見極めポイントは、「li」と「li a」のスタイル設定がどうなっているかです。図を見ると、通常リストはデフォルトで文頭に・がつくのですがそれがないこと、リストに設定したリンクも、通常なら下線がつくのですがそれがないことを踏まえて、「li」と「li a」それぞれにnoneを設定して、デフォルトのスタイルをリセットしていると考えます。答えはおのずと3番になります。

第19問の解説

答え=3 opacityはその要素の透明度を指定するスタイルです。「opacity: 1」で完全な不透明、「opacity: 0」で完全な透明になります。半透明にしたい時は、どのくらいの透明度にしたいかで値を変えていきますが、中間程度だと「opacity: 0.5」という書き方をします。

第20問の解説

答え=1 descriptionとはウェブページの説明文を入れるところです。検索エンジンに表示された際、このdescriptionに記載した内容がそのまま表示されます。あまりに長い文章だと、途中で省略されて表示されるため、おおよそ120文字程度におさめるのが一般的です。

第21問の解説

答え=4camel caseとは、各単語の頭文字を大文字で表記する方法のことで、単語区切りですべての先頭の文字を大文字にした「アッパーキャメルケース」、一番最初の単語の頭文字のみ小文字で、以下は大文字の「ローワーキャメルケース」とあります。


Web Design Professional Skills→アッパーキャメルケース
web Design Professional Skills→ローワーキャメルケース

※見やすいように単語の区切りでスペースを入れています。

第22問の解説

答え=2複数行の文字列で構成されたテキストファイルを、異なるOSで開いた際に一行になってしまうのは、OS個々の改行コードの違いによるものです。メジャーどころでいうと、Windowsの改行コードは「CR+LF」、MacOSやLinuxの改行コードは「LF」です。ちなみに古いMacOS(9以前)は「CR」でした。

これらの問題を回避するには、テキストエディタでファイルを保存する際に、改行コードを任意で変えてあげるとOKです。例えばMacOSで作ったテキストファイルをWindowsで開く際には、Mac側で改行コードをCR+LFにして新規保存することで、Windowsでも問題なく開くことができます。

第23問の解説

答え=1 これは説明というよりかは、ここには「content」と書くとおぼえましょう。

第24問の解説

答え=1 HTMLで段落を表す際のタグは<P>です。その他の<br>は改行、<pre>は半角スペースや改行をそのまま表示、<div>はひとかたまりの範囲(ブロック要素)として定義します。

第25問の解説

答え=2 線や円をXMLで記述できる画像形式をSVG(スケーラブル・ベクター・グラフィックス)と言います。現在のHTML5では、直接HTML内に記述できるようになっています。四択の中のその他の画像は全てビットマップ形式の画像で、Photoshopなどのグラフィックツールを用いて作成します。

目次へ戻る

過去問の解説(平成28年度第3回学科試験)

ウェブデザイン技能検定3級学科(平成28年第3回試験)

〇平成28年度-第3回学科試験の過去問題と解答pdfはこちら

第1問の解説

答え=2 トリミングとは画像を切り抜くことをいいます。webデザインの制作現場では、まずPhotoshopの切り抜きツールで画像のいらない部分をカットしながら、あらかじめ決められたサイズに変更、最後にJPEGで書き出すといった作業がよくあります。画像をカットするので、当然ファイルサイズは元の画像と比べて小さくなります。

第2問の解説

答え=1 液晶ディスプレイなどの精密機械は、間違った清掃の仕方をすると故障の原因になりますので、問題文のように専用のキットや、乾いた柔らかい布を使って清掃しましょう。

第3問の解説

答え=1 画面の情報を読む=スクリーンリーダー。これは文字通りそのままですね。丸暗記しましょう。

第4問の解説

答え=1 W3CとはWorld Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)の略で(ダブリュースリーシー)と読みます。webサイトを作成するうえで必要な言語、HTML、CSS、XMLなどの技術の標準化を推進する為に設立された非営利団体です。W3C勧告がされることで、その仕様(たとえば最近だとHTML5.1)は世界標準の仕様となります。

第5問の解説

答え=2 #000000は黒のことですが、アクセシビリティに配慮するなら、文字の色は背景が何色かで決めないといけません。背景が白(#FFFFFF)なら、文字色は当然その真逆の黒が最適ですが、背景が黒の場合は、文字色も黒だと全然見えなくなってしまいます。高いコントラストを維持するのは正解ですが、そのためには必ず文字色は黒ということではありません。

第6問の解説

答え=2 パスワードは定期的に変更しないと、パスワードリスト攻撃の被害にあう確率があがって危険です。パスワードリスト攻撃については、以下のリンク先のページに詳しく書いてあるので参照してください。ちなみにパスワードリスト攻撃の問題はよく出題されますので、この言葉はきちんと理解しておきましょう。
もっと詳しく見る>>

第7問の解説

答え=1 グローバル属性とは、全てのHTML要素で使用できる属性のことです。title以外にもid、class、styleなどがあります。試験では何を尋ねられてもいいように、 グローバル属性ときたらあれとあれとあれと…と、全て答えられるようにしておきましょう。
もっと詳しく見る>>

第8問の解説

答え=1 IPアドレスとは、パソコンやスマホなど、インターネットに接続する際に必要な、その機器が持つ番号のことです。インターネットでの住所みたいなものと思ってもらうとわかり易いです。

ネットでサイトを閲覧する際は、誰もが「見たいな~」と思ったサイトへのリンクをクリックしてページを表示させますが、これはブラウザがクリック先のIPアドレスを持つサーバーまで行って、その中にあるデータを表示しているということです。IPアドレスがないと、クリック先のサイトが世界中のどのサーバー内にあるデータなのかがわかりませんので、サーバーを稼働させるにはIPアドレスは必要です。

第9問の解説

答え=1 グローバルメニューとは、そのサイトの主要なコンテンツへのリンクをひとまとまりにしたもので、通常はどのページでも同じ位置に固定して表示させます。ウェブページの上部に表示させるのは一般的で、どこのサイトでもよく見ますが、フッターにも表示させたり、上部ではなくサイドメニューで表示させているサイトもよく見ます。配置場所はそのサイトそれぞれなので、必ず上部に表示ということではありません。

第10問の解説

答え=2 画像を上または下など、ある方向から徐々に表示させていく手法を「プログレッシブ」といいます。インターレースとは、画像を分割しながら表示させる手法で、見ている側の感覚だと、画像の全体像が初めはぼんやり、徐々に鮮明に見えてくるといった感じです。

第11問の解説

答え=3 1.a要素はこのくくりでいうとフロー・コンテンツです。セクショニング・コンテンツとはセクションの範囲を定義するもので、、HTMLタグの「article」「aside」「nav」「section」が、セクショニング・コンテンツに該当します。

2.a要素はh2要素を含めることができます。そうじゃないと、見出しはリンクを貼れないとなって、困ってしまいます。

4.a要素はbody要素の直下という決まりはありません。たとえばbody要素の直下にあるP要素の中など、いろいろな箇所で使用できます。

第12問の解説

答え=4 この4択のなかで間違っているのは4番です。SVGはテキストエディタでも編集が可能です。

第13問の解説

答え=3 文法的にidとclassを同時に書いても問題ありません。その他は全て×です。
まず1番の(id="abc" id="def")といった、ひとつのidに複数あてる書き方はダメです。

2番の(class="abc" class="def")ですが、class属性はひとつのclassに複数の書き込みが可能ですが、通常このようには書きません。複数の設定をあてる際は例えば(div class="abc def")というように、半角スペースで区切って書きます。

4番は同じ名前のid名を使っているため×です。一つのページ内に使えるid名は一つだけです。同じ名前の設定を複数の箇所にあてたい場合はclassで指定します。

第14問の解説

答え=3 著作権で保護されるのはあくまで"具体的に表現されたもの"です。まだ形がなくアイディアだけなら著作物にはなりません。

第15問の解説

答え=2 marginの数値が2つ書いてあるところに注目してください。数値が2つの場合、最初が上下、次が左右になるので、この場合2番が誤りです。これについては過去問の解説(平成29年度第2回学科試験)の25問のところで詳しく解説していますのでそちらを参照してください。
もっと詳しく見る>>

第16問の解説

答え=3 CSSで色を表現する記述はいくつかありますが、指定の仕方をrgbaとするなら、そこには0から255の数値の掛け合わせで記述しないといけません。この場合だと正しくはrgba(255,0,0,1)と記述します。

ちなみにそれぞれの値の意味はr=赤、g=緑、b=青、最後のaはアルファ値で、透明度を表します。1で完全な不透明、0.5で半透明、0が完全な透明です。

第17問の解説

答え=4 画像のイコライズとは色調補正の一つで、イコライズすると画像全体の明るさが平均化されます。イコライズ=明るさを平均化とおぼえておきましょう。

第18問の解説

答え=2 HTML5は2014年10月、HTML5.1は2016年11月にW3C勧告されています。これまでのHTMLではDOCTYPE宣言にて「Strict」「Transitional」「Frameset」のどれかを記述する必要がありましたが、HTML5からはシンプルに<!DOCTYPE html>という表記に変更されています。

第19問の解説

答え=1 OSI参照モデルとは、コンピュータの持つべき通信機能を階層構造に分割したモデルで、7つの階層に分けられています。

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

アプセトネデブとおぼえると簡単です。今回は第3層に該当するものということで「ネットワーク層」という答えになりましたが、例えば「HTTPは第何層か?」といった出題の仕方もありますので、以下のリンク先を参照して、層別の例も併せて目をとおしておくと良いでしょう。
もっと詳しく見る>>

第20問の解説

答え=1 サーバやシステムに大きな負荷をかけて、サーバーのダウンを狙う攻撃を"DoS攻撃"といいます。この手の負の攻撃手法はいくつか種類があるので、可能な限りおぼえて、何の問題が出ても対応できるようにしておきましょう。

その他の攻撃手法…
・ゼロデイ攻撃とは
例えばwindowsの新バージョンが公開されたとして、その際に脆弱性が発見されたとします。マイクロソフトは急いでそれらを解決するための修正プログラム(アップデート)を提供しようとしますが、それまでの数日間は、脆弱性を解消する手段がない状態で脅威にさらされる状況となります。その空白の期間に脆弱性を突いてくる攻撃をゼロデイ攻撃といいます。

・ディクショナリアタックとは
他人のパスワードを解読する際の手法で、辞書に載っている単語を片っ端から打ち込んでいく解読方法です。パスワードは本人も忘れないようにと、意味のある単語を使ってしまう人が、多数ではなくても少なからずいます。そういうパスワードだと、ディクショナリアタックによって解読される危険が増します。よくパスワードは大文字小文字、英数字も混ぜつつ意味のない文字列にといいますが、それはこのディクショナリアタックへの対抗手段なのです。

・中間者攻撃とは
通信をしている二人の間に割り込んで、盗聴したり介入したりする攻撃手法です。例えばチャットで話しているA君とBさんがいて、その間にこっそりとCさんが乱入。A君がBさんへ送った内容を、Bさんが受け取る前にCさんが受け取り、内容を書き換えてA君になりすましてBさんへ送るといったものです。

第21問の解説

答え=1 できるだけ多くの人が利用可能であるデザイン=ユニバーサルデザインと丸暗記しましょう。

第22問の解説

答え=2 これは法として定められていますので、そのままおぼえましょう。

第23問の解説

答え=2 </br>とは書きません。/(スラッシュ)はbrの後ろに記述します。これはXHTMLの書き方で、XHTMLでは/(スラッシュ)がない<br>も使ってはダメです。逆にHTML4や5は/(スラッシュ)あり、なし、どちらでも記述できます。

第24問の解説

答え=4 hsl()関数では色相、彩度、明度で色を決定します。予備知識ですが、色相は角度、彩度と明度は%で色を表します。

第25問の解説

答え=4 img要素に指定するaltは、その画像が表示されない際の代替えのテキストでなくてはいけません。よって答えは4です。

目次へ戻る

過去問の解説(平成28年度第2回学科試験)

ウェブデザイン技能検定3級学科(平成28年第2回試験)

〇平成28年度-第2回学科試験の過去問題と解答pdfはこちら

第1問の解説

答え=2 現在はスマートフォン向けのウェブサイトと、パソコン向けのウェブサイトは、同じhtmlファイルをCSSで見栄えを切り替える手法(レスポンシブデザイン)をグーグルは推奨しています。もちろん別々のファイルを用意して、サーバー側の設定でPCならこっちのファイル、スマホならこっちのファイルと、ユーザーのアクセスを割り振ることも可能です。問題の「必ず別々にデータを用意しなければならない」と言われるとそうではなく、「別々でもいいけど、なるべくひとつのファイルで済まそうね」というのが現在のウェブデザインの主流です。

第2問の解説

答え=1 事業主はVDT作業者に対して、労働環境を整えて、疲労の軽減を図るよう義務付けられています。

第3問の解説

答え=1 マージンとはボックス(ブロック要素)から見て外側の余白です。こちらは常に透明になります。

第4問の解説

答え=2 img要素のalt属性には何らかのテキストではなく、画像が表示されない状態で、その画像の代わりとなるテキスト(代替えテキスト)を入力します。

第5問の解説

答え=1 非可逆圧縮では、保存を繰り返せば繰り返すほど画質が劣化していくので、圧縮前の状態に復元することはできません。代表的な保存形式では「JPEG」があります。これとは逆の可逆圧縮方式のものがありますが、代表的なものでは「PNG」や「GIF」があります。

第6問の解説

答え=2 ページ内にコピーライトの表記がない場合でも、著作権を放棄したことにはなりません。

第7問の解説

答え=2 広告の掲載はそのサイトの運営者次第です。コンテンツが無料、有料とかは関係ありません。

第8問の解説

答え=2 テーブルでのレイアウトは現在は推奨されていません。15、20年前はテーブルレイアウトが主流でしたが、今はレイアウト部分はCSS(スタイルシート)で管理するようになっています。

第9問の解説

答え=2 JavaScriptは、ウェブページに動的な機能を追加する際の、最もポピュラーなプログラム言語です。もちろんカメラやマイクの制御も可能です。

第10問の解説

答え=2 ウェブセーフカラーとは、例えばWindowsやMacOSなど、異なるOSでも同じ色を再現できる色の範囲のことです。ウェブセーフカラーとして定義されている色数は216色で、この範囲であればどのOSで見ても、制作者が意図した通りの色が再現できますよという、いわゆるセーフな色というわけです。

残りの40色はOSによって異なるカラーなので、これを使うと制作者が意図しない色で表示されることがあります。が、使用できないわけではありません。使えるけどリスクがあるよ的な色です。これらを合わせてウェブデザインで使える色数=256色(8ビットカラー)というわけです。

第11問の解説

答え=4 SSLとはサーバーとブラウザ間でのデータ送受信の際、そのデータを暗号化してセキュリティを高める技術のことです。

例えばネット通販で買い物をした時、商品の郵送先として自宅の住所を入力したり、電話番号を入れたりしますよね。この時に暗号化されていないと入力した内容がハッカーの人たちに丸見えとなって非常に危険です。これを導入することで、情報が暗号化され、もし外部の人に見られたとしても、何が書いてあるのかさっぱり分からないということです。たいてい通販などではこの技術を導入しています。

ちなみにSSL導入サイトは、アドレスの先頭がhttpではなくhttpsとなっているので、ここで見分けることができます。

第12問の解説

答え=3 スタイルシートは外部に書いて読み込もうが、内部に直書きしようが、それでレイアウトが変わることはありませんが、現在はスタイルシートは外部に書いて読み込む方法が推奨されています。

第13問の解説

答え=1 視認性が高いとは、文字と背景のコントラストが高くて見やすいということです。ホームページでは色を16段階で表現するのですが、考え方としては0(黒)からf(白)に向かって色がだんだん薄くなっていって、fで真っ白になると憶えておくと良いです。色の濃淡は以下のように変化していきます。

(黒)0→1→2→3→4→5→6→7→8→9→A→B→C→D→E→F(白)

たとえば文字色#666666と背景色#333333では、濃いグレーの上にそれよりちょっとうすいグレー文字が乗っかっているというイメージです。これだともうほとんど見えないと思います。文字色と背景色のコントラストに関する問題は、この16段階の0~Fへの色の変化の流れについて憶えておくと大丈夫です。

第14問の解説

答え=4 HTMLではブロック要素とインライン要素とあって、ブロック要素はそのタグで囲ったところが、見えない四角のボックスでレイアウトされているとイメージすると良いです。マージン指定なんかは、対象がブロック要素でないと反応しません。

以下にHTMLタグの中で何がブロック要素、何がインライン要素か書いてあるので、目を通しておくと良いでしょう。
もっと詳しく見る>>

第15問の解説

答え=2 外部CSSのファイルは、HTMLの<head>から</head>内に記述して読み込みます。 <link href="〇〇〇.css" rel="stylesheet" type="text/css" /> と記述するとCSSファイルが読み込まれます。
(※〇〇〇.cssは任意でつけた名前)

第16問の解説

答え=2 パスワードリスト攻撃とは、悪い人がなんらかの方法で入手したID、パスワードを、手あたり次第にためし入力して、それがどこのインターネットサービスのパスワードかを探す行為です。同じID、パスワードを使いまわしていると、それだけヒット率が上がって被害にあいやすくなります。以下にそれぞれの解説をしているページのアドレスを貼っていますので、目をとおしておくと良いでしょう。
DDoS攻撃とは?
パスワードリスト攻撃とは?
セッションハイジャックとは?
ドライブバイダウンロード攻撃とは?

第17問の解説

答え=3 同じ名前のid属性は、そのウェブページの中で一つしか使えず、重複して使用することはできません。よく見かける使い方では<div id=〇〇〇>ってやつです。

第18問の解説

答え=1 リンクにマウスが重なったときの動作は:hoverで指定します。ちなみに:activeはクリックした瞬間、:linkは何もしていない状態、:visitedはクリック後です。よくあるのはそれぞれで色を変えて、ユーザーに分かりやすくするという方法があります。

第19問の解説

答え=2 色の16進数コードはここでのyellowだけではなく、主要な色は丸暗記しておきましょう。すべてを憶えるのは無理なので、とりあえず赤、緑、青、紫、黄色、アクア、マゼンタ、黒、白を憶えておけば大丈夫です。
もっと詳しく見る>>

第20問の解説

答え=4 TransitionalとStrictの区別の仕方ですが、我々のように素人でも分かりやすく簡単にいうと、「Transitionalは多少のことは許してくれる」、「Strictは世界標準規格に厳密なHTML」と憶えてください。center要素は、現在はHTMLの中に記述せずにCSSで記述するようになっていますが、Transitionalだとcenter要素をHTMLの中に記述しても「まあ、そのくらいならいいでしょう」と許してくれるといったものです。他にもStrictでは使えない要素がありますので、追々おぼえていってください。

第21問の解説

答え=1 これは標準規格として指定されているので、そのまま憶えましょう。

第22問の解説

答え=3 これはフォームを作る際のHTMLの記述です。Aにはtype、Bにはchecked、Cにはforが入ります。

第23問の解説

答え=3 マルウェア対策のためにも、OSやソフトのアップデートは必ず迅速に行いましょう。

第24問の解説

答え=2 これは法律で定められているのでそのまま憶えましょう。

第25問の解説

答え=3 トップレベルドメインには他にも.netや.infoなどがあります。それぞれで意味があるので、追々憶えていってください。
もっと詳しく見る>>

目次へ戻る

過去問の解説(平成28年度第1回学科試験)

ウェブデザイン技能検定3級学科(平成28年第1回試験)

〇平成28年度-第1回学科試験の過去問題と解答pdfはこちら

第1問の解説

答え=2 HTML5ではタグの省略が可能です。

第2問の解説

答え=2 イーサネットとは、LANで繋がった複数のコンピュータが、主となる通信回線を効率よく利用してインターネットにアクセスしたり、ファイル共有をおこなう技術のことで、おもに会社や家庭内でのネットワークで広く利用されています。インターネットは世界中とつながっていますが、イーサネットは限られた範囲で閉鎖的につながっているネットワークです。

第3問の解説

答え=2 ファイルをサーバーにアップロードする際は、先に画像やCSSなど必要なパーツをアップしてから、最後にHTMLドキュメントをアップするほうが望ましいです。

第4問の解説

答え=2 労働安全衛生法では、職場の安全衛生に関する責任はたしかに事業者にありますが、労働者もそれに対する自覚と協力は義務付けられています。

第5問の解説

答え=1 W3CはWorld Wide Web Consortiumの略で、ワールド・ワイド・ウェブ・コンソーシアムと読みます。

第6問の解説

答え=1 クロスブラウザチェックとは、問題に書いてある通り複数のブラウザを使った表示チェックのことです。ブラウザの種類によって微妙に表示が崩れたりはよくあることなので、Webサイトやページを公開、更新した際は、必ずクロスブラウザチェックをおこないましょう。

第7問の解説

答え=1 PNGはJPEGなどと同様に、ラスターグラフィックスのファイルフォーマットです。グラフィックデータのフォーマットは、もうひとつ「ベクターグラフィックス」というものがあります。こちらは拡大しても粗くならないという特徴があって、Adobe Illustratorで作成したデータやSVGなどが有名です。

第8問の解説

答え=2 ウェブデザイナーの仕事にCSSの知識は不可欠です。簡単なスクリプトであれば、そのままデザイナーが作成することもよくあります。

第9問の解説

答え=2 罰せられます。他人への誹謗中傷はしないようにしましょう。

第10問の解説

答え=2 スマホもウイルスに感染しますのでご注意を。セキュリティソフトは有料だけでなく、無料で高機能のものも多々ありますので、必ずインストールしておきましょう。

第11問の解説

答え=2 マージン設定の数値が三つありますので、この場合それぞれが充てられる箇所は10px=上、20px=左右、30px=下となります。

第12問の解説

答え=4 blockquoteで囲まれた部分は引用や転載であることを示します。引用する文章が長い際は<blockquote>、改行を必要としないほどの短い文章の場合は<q>を使います。

第13問の解説

答え=2 NAT/NAPTとは、プライベートIPアドレスをグローバルIPアドレスに変換する技術のことです。

プライベートIPアドレスとは、会社や家庭でLANを使ってネットワーク環境を構築している際、そこにはPCが複数あるので、それら個々のPCをルーターが識別するために割り当てられた番号のことです。これがあることで複数のPCが重複せずに、ローカルネットワークが正常に稼働する仕組みとなっています。

通常このプライベートIPアドレスではインターネットに接続できないので、ルーターがこのプライベートIPアドレスをグローバルIPアドレスに変換します。それによってインターネットにつながるという仕組みです。
もっと詳しく見る>>

第14問の解説

答え=3 この作り方の問題点は「変更点の詳細」リンクが背景画像となっている点です。ユーザビリティの観点からも、リンクはテキストであるほうが好ましいです。

第15問の解説

答え=4 ページビューとはサイトのアクセス解析に出てくる用語で、見られたページの数を表します。アクセス解析においてとても重要なポイントです。

第16問の解説

答え=3 Webサイトを作成する際、このワイヤーフレームの制作から始まります。ビジュアル面はまだ後の話で、サイトの目的を踏まえた上で、コンテンツやレイアウトをどうしていくか、大まかな構成をここで考えます。

第17問の解説

答え=4 JavaScriptは元々は1995年にNetScape社が開発したプログラム言語です。当時はブラウザによって動作が変わったり、それぞれのプラウザ独自のJavaScriptがあったりと、互換性がない言語でした。現在はECMA Internationalによって標準化されています(ECMAScript/エクマスクリプト)。
もっと詳しく見る>>

第18問の解説

答え=4 パスワードを設定する際は、可能な限り英数字を混在させて意味不明にし、他人に予測されないようにしましょう。

第19問の解説

答え=2 色階調とは明るさや濃淡の段階数のことです。この階調(段階数)が多いと表現がなめらかとなって、結果画質が良くなります。2階調、16階調、256階調というように数で表現します。

第20問の解説

答え=4 ユニバーサルデザインとは、老若男女、障害、能力の如何を問わずに利用することができる施設・製品・情報の設計のことを言います。できるだけ多くの人が利用可能であるようにというのがこのデザインの考え方です。

第21問の解説

答え=4 フォームでラジオボタンを設置する際のソースの書き方は、<label for = 〇〇>と書きます。ここは丸暗記で大丈夫です。

第22問の解説

答え=1 黄色を表す際は、赤と緑の掛け合わせで表現できます。ともにマックスのFF(255)で黄色となります。

第23問の解説

答え=1 MIMEタイプとはドキュメントの種類を伝える機能です。CSSの種類はテキストなので、text/cssとなります。

第24問の解説

答え=1 Nginxと書いてエンジンエックスと言います。フリーでオープンソースのWebサーバーです。他の選択肢のOpera、Chrome、Firefoxはすべてブラウザです。

第25問の解説

答え=3 small要素は以前は文字を小さくするためのものでしたが、HTML5からは免責、警告、著作権などの注釈や細目を表すと変更されました。他にも意味が変わったものがありますので、合わせて憶えておきましょう。
もっと詳しく見る>>

目次へ戻る