試験要項(R03_3)
実技実技試験概要(PDF)
更新日:
令和3年度第3回は、
2021-11-28(日)試験でした。
3級ウェブデザイン技能検定実技試験は次のとおり実施します。
【出題形式】:課題選択方式
【合格基準】:70点以上(100点満点)
作業A
- ウェブサイトデザイン
- HTML・XHTML・CSSによるコーディング、画像の利用
- ウェブサイト運用管理
- 更新・管理
- 作業の概要
- 指示されるディレクトリ構造を示す図に従い、HTML ファイル、CSS ファイル、および画像などのソースファイ ルを適切に配置すること。またその構造に適応するよう、各ファイルの記述内容を修正し、更新すること。
- 作業のポイント
-
<!-- コメント:修正コード記載 --> <link rel="stylesheet" href="css/style.css"> <img src="img/logo.png" alt="ウェブデザイン技能競技大会">
<!-- コメント:修正コード記載 --> background-image: url(../img/bg.png); background-image: url(../img/bd.png); background: url(../img/main_image.jpg) no-repeat center center; background: url(../img/ar.png) no-repeat left center;
作業B
- ウェブサイトデザイン
- HTML・XHTML・CSSによるコーディング、画像の利用
- ウェブサイト運用管理
- 更新・管理
- 作業の概要
- 指定されるエリアにあるグローバルナビゲーションの各画像に対して、対応した各ページへのリンクを設定す ること。併せて HTML ファイルの内容を指示のとおりに修正し、更新すること。
- 作業のポイント
-
<!-- コメント:修正コード記載 --> <li><a href="index.html">HOME</a></li> <li><a href="info.html">競技概要</a></li> <li><a href="app.html">参加申込</a></li> <li><a href="faq.html">FAQ</a></li> <!-- コメント:修正コード記載 --> <h1>競技概要</h1> <h1>参加申込</h1> <h1>FAQ</h1>
作業C
- ウェブサイトデザイン
- HTML・XHTML・CSSによるコーディング、画像の利用
- ウェブサイト運用管理
- 更新・管理
- 作業の概要
- 指定されたコンテンツのブロックレベル要素を指示されたレイアウトになるよう、CSS ファイルを修正し、更新す ること。
- 作業のポイント
/* コメント:修正コード記載 */ #wrap { margin: 20px auto; }
作業D
- ウェブサイトデザイン
- HTML・XHTML・CSSによるコーディング、画像の利用
- ウェブサイト運用管理
- 更新・管理
- 作業の概要
- 指示される要素に関連する背景色と文字色について、CSS ファイルを修正し、更新すること。
- 作業のポイント
/* コメント:修正コード記載 */ h1 { border: double 3px #333333; font-size: 1.2em; margin-top: 0; padding: 10px 15px; background-color: #556699; color: #ffffff; }
作業E
- ウェブサイトデザイン
- HTML・XHTML・CSSによるコーディング、画像の利用
- ウェブサイト運用管理
- 更新・管理
- 作業の概要
- 与えられる画像と同じブラウジング結果となるよう、HTML ファイルの body 要素、div 要素に対応する CSS フ ァイルの記述を修正し、更新すること。
- 作業のポイント
-
/* コメント:修正コード記載 */ body { color: #333333; font-family: "メイリオ", 'MS PGothic', Osaka, sans-serif; font-size: 16px; margin: 0 0 150px 0; min-height: 100%; padding: 0; background-image: url(img/b3.gif); #wrap { background-color: #ffffff; border: solid 1px #000; line-height: 200%; margin: 20px auto 50px; min-height: 100%; padding-bottom: 40px; width: 918px; background-image: url(img/c3.png); }
作業F
- ウェブサイトデザイン
- HTML・XHTML・CSSによるコーディング、画像の利用
- ウェブサイト運用管理
- 更新・管理
- 作業の概要
- HTML HTML ファイルのコンテンツエリア内の記述を削除し、与えられる文章に対し h1 要素、h2 要素、p 要素、ol 要素、ul 要素のすべてをもれなく使用し構造化を行い、更新すること。
- 作業のポイント
-
<!-- コメント:修正コード記載 --> <h1>ウェブデザイン技能競技大会</h1> <h2>競技概要について</h2> <p>競技概要を公開しました。詳しくは下記よりご参照ください。</p> <ul> <li>一般部門概要</li> <li>若年部門概要</li> </ul> <h2>競技日程について</h2> <p>競技日程を公開しました。詳しくは下記よりご参照ください。</p> <ol> <li>若年部門 5月25日</li> <li>一般部門 6月 7日</li> <li>本選大会 8月30日</li> <li>国際大会 10月22日</li> </ol>
学科試験要項(学科・実技共通)(PDF)
更新日:
令和3年度第3回は、
2021-11-28(日)試験でした。
3級ウェブデザイン技能検定学科試験は次のとおり実施します。
【出題形式】:筆記試験(マーク方式)・「多肢選択法」「真偽法」形式
【合格基準】:70点以上(100点満点)
Q&A答え:2
送信可能化権 [ウィキペディア参照]
送信可能化権(23条1項)とは、インターネットなどで著作物を自動的に公衆に送信し得る状態に置く(2条1項9号の4)権利であり、平成9年の著作権法改正の際に導入された。
自動公衆送信においては、実際に送信行為が行われるのは、利用者のアクセスがあった時である。しかし、公衆送信権の対象は、送信行為であるため、実際にアクセスがなければ公衆送信権の侵害は生じない。また、利用者がアクセスして送信行為が行われたことを確認することが困難な場合もある。
そこで、送信行為の前提となる、自動公衆送信し得る状態に置く送信可能化行為を、著作権の対象とすることで、著作権者の権利行使を容易にしている。
Q&A答え:1
ローバル属性 [Mozilla参照]
グローバル属性は、すべての HTML 要素で共通の属性です。すべての要素で使用できますが、要素によっては効果がないこともあります。
グローバル属性は、標準仕様で定義されていない要素を含む、すべての HTML 要素で指定することができます。つまり、その要素を使用することで文書が HTML5 に準拠しなくなるような標準外の要素であっても、これらの属性は受け入れなければなりません。例えば、 <foo hidden>...</foo> とマークアップされたコンテンツは、 <foo> が妥当な HTML 要素ではなくても、 HTML5 準拠のブラウザーは非表示にします。
Q&A答え:1
<input type="radio"> [Mozilla参照]
<input> 要素の radio 型は、一般にラジオグループ、すなわち関連するオプションの組み合わせを示すラジオボタンの集まりです。グループ内でラジオボタンは一つしか同時に選択することができません。ラジオボタンはふつう、小さな円で描かれ、選択されたら塗りつぶしや強調表示されます。
Q&A答え:1
「情報機器作業における労働衛生管理のためのガイドラインの概要*(パンフレット)」[PDF形式:718KB] [厚生労働省参照]
以下の画像・テキストは、厚生労働省サイトから引用し、加工した物です。
疲れない方法で作業をしましょう
- <作業時間>
- 1日の作業時間が長すぎないよう
- 1時間以内で1サイクル、サイクルの間は10-15分の作業休止、サイクル中にも1、2回の小休止を
- 事業者は、作業者に応じた業務量を
- <作業姿勢>
- 椅子に深く正しく座り、足は足裏の全体が接するように
- 長時間同じ姿勢にならないよう、ときおり立ち上がるか立ち作業を
- <機器の調整>
- ディスプレイは、眼から40cm以上の距離、画面の上端は眼の高さまで
- ディスプレイの位置角度、輝度を調節
- ディスプレイと書類を交互に見る作業では、書類を眼が疲れない位置に
厚生労働省 > 政策について > 分野別の政策一覧 > 雇用・労働 > 労働基準 > 安全・衛生 > 職場における労働衛生対策「「情報機器作業における労働衛生管理のためのガイドラインの概要(パンフレット)」[PDF形式:718KB]」(厚生労働省)(https://www.mhlw.go.jp/content/11300000/000546922.pdf)(2022-08-06利用)を加工して作成
- <作業時間>
Q&A答え:1
コンテンツ区分要素 [Mozilla参照]
<div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。
div要素 [HTML Living Standard 日本語訳参照]
HTML Living Standard — Last Updated 22 July 2022
- 4.4.15 div要素
- 他の要素が適切でない場合、著者は最後の手段の要素としてdiv要素を検討することを強く推奨する。div要素の代わりにより適切な要素を使用することは、読者に対してより良いアクセシビリティと著者に対するより容易なメンテナンス性につながる。
Q&A答え:1
レイアウトと包含ブロック [Mozilla参照]
ユーザーエージェント (ブラウザーなど) が文書をレイアウトする時、それぞれの要素にボックスを生成します。それぞれのボックスは4つの領域に分かれます。
- コンテンツ領域
- パディング領域
- 境界領域
- マージン領域
CSS 基本ボックスモデル入門 [Mozilla参照]
それぞれのボックスは 4 つの部品 (または領域) から構成され、それぞれの縁についてコンテンツの縁 (content edge)、パディングの縁 (padding edge)、境界の縁 (border edge)、マージンの縁 (margin edge) が定義されています。
Q&A答え:2
画像埋め込み要素_属性 [Mozilla参照]
Q&A答え:2
absolute length units* [W3C参照]
5.2. Absolute Lengths: the cm, mm, Q, in, pt, pc, px units
unit name equivalence cm centimeters 1cm = 96px/2.54 mm millimeters 1mm = 1/10th of 1cm Q quarter-millimeters 1Q = 1/40th of 1cm in inches 1in = 2.54cm = 96px pc picas 1pc = 1/6th of 1in pt points 1pt = 1/72th of 1in px pixels 1px = 1/96th of 1in Q&A答え:2
JIS X 8341-3:2016 解説 [ウェブアクセシビリティ基盤委員会参照]
『JIS X 8341-3:2016』の正式名称は、『高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ』という。この規格でいう「ウェブコンテンツ」は、ブラウザや支援技術などのユーザエージェントを介して利用者に提供されるあらゆるコンテンツを指し、次のようなものが挙げられる。
- ウェブサイト
- ウェブアプリケーション
- ウェブシステム
- 携帯端末などを用いて利用されるコンテンツ
- イントラネットの業務用システム
- 電子マニュアル
- CD-ROM などの記録媒体を介して配布される電子文書
アクセシビリティとは* [ウェブアクセシビリティ基盤委員会参照]
さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うようになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは必要不可欠な品質と言えます。
WCAG 2.1 関連文書 更新のお知らせ (2022年7月5日)- WCAG 2.0関連翻訳文書
-
Q&A答え:1
ワーム (コンピュータ)* [ウィキペディア参照]
ワーム(英:Worm)とは、独立したプログラムであり、自身を複製して他のシステムに拡散する性質を持ったマルウェアである。宿主となるファイルを必要としない点で、狭義のコンピュータウイルスとは区別される。しかし、ネットワークを介して他のコンピュータに伝染していく点では共通しており、同一視されることもある。
text_x01x_01
- ほかのマルウェアとの区別
- 初めてウイルスを定義したコンピュータ科学者のフレッド・コーエンは、他のファイルに感染することで増殖するものをウイルスとしており、RFC1983もその定義に従ってワーム単体をウイルスに含めていない。また、ワームには自己増殖機能があることから、同じくマルウェアの一種であるトロイの木馬とも区別される。しかし、一般的な報道などではしばしば同種とされ、また複数のマルウェアの機能を兼ね備えたものも発生している[1]。
Q&A答え:4
非テキストコンテンツ* [WCAG 2.0 解説書参照]
1.1.1 非テキストコンテンツ: 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。ただし、次の場合は除く: (レベル A)
- この達成基準の意図
- この達成基準の意図は、非テキストコンテンツにより伝達される情報を、テキストによる代替を用いることによってアクセシブルにすることである。テキストによる代替は、利用者の要求に合わせてあらゆる感覚モダリティ (例えば、視覚、聴覚、又は触覚) を通じてレンダリング可能なので、情報をアクセシブルにするための最も重要な方法である。テキストによる代替を提供することにより、情報を様々なユーザエージェントによって様々な方法でレンダリングすることを可能にする。例えば、写真を見ることのできない利用者は、合成音声を用いてテキストによる代替を読み上げさせることができる。また、音声ファイルを聞くことができない利用者は、テキストによる代替を表示させることで、読むことができるようになる。将来的には、テキストによる代替は、情報を手話又は同じ言語のより単純な形式に、より容易に変換することも可能になるだろう。
Q&A答え:2
段落要素 [Mozilla参照]
HTML の <p> 要素は、テキストの段落を表します。視覚メディアにおいて、段落はふつう隣接するブロックと上下の空白や最初の行の字下げによって隔てられたテキストのブロックとして表現されますが、 HTML の段落は画像やフォーム欄などの関連するコンテンツを構造的にまとめることができます。
段落を英訳 [Google 翻訳参照]
段落→paragraph
Q&A答え:2
HTTP cookie [ウィキペディア参照]
HTTP cookie(エイチティーティーピークッキー)は、マジッククッキーの一種。単にクッキー(cookie)とも表記される。
- 概要
- HTTPは元来ハイパーテキストにおいて単にファイル転送を行うために開発されたため、同じURLへのアクセスならその状況によらず同一の資源[1]を提供することが前提となっている。動的なコンテンツ生成の仕組みとしてフォームが導入されているが、これは要求に直接対応する応答だけに影響をおよぼす。言い換えるとHTTPでは、同じ瞬間に同じ内容の要求を行っていれば、そのクライアントが以前にどのような通信を行っていても区別されない。HTTPはその意味で現在においてもステートレスなプロトコルである。
- 用途
- クッキーの最も代表的な用途は、ショッピングサイトにおけるカートやログイン状態の管理である。また、IPアドレスによらないクライアントの識別を可能にするため、ウェブサイト運営者やインターネット広告配信業者などがユーザの詳細なアクセス履歴を取得する用途にも使われる。
Q&A答え:3
イベント (プログラミング) [ウィキペディア参照]
- イベントドリブン
- 一般的にGUIアプリケーションソフトウェアのプログラミングでは、イベントの発生を監視しながら待機するイベントループ(メッセージループ)にて、オペレーティングシステムから受け取ったイベント(メッセージ)オブジェクトを、あらかじめ登録されたコールバック関数[2]にディスパッチ(配送)してイベントに応じたユーザー処理(イベントハンドラー)を実行し、再びイベントループに戻るポーリング的な手法が用いられている。
イベントハンドラ_入力ストリームを取得してレコーダーを設定 [Mozilla参照]
入力ストリームを取得してレコーダーを設定
- 入力ストリームを取得してレコーダーを設定
- それでは、この例で最も複雑なコードを見てみましょう。 開始ボタンをクリックしたときのイベントハンドラです。
イベントへの入門 [Mozilla参照]
onclick プロパティがこの例で使用されているイベントハンドラープロパティです。ボタンで利用可能なプロパティ(例えば btn.textContent や btn.style)のうちの 1 プロパティに過ぎませんが、特別な種類のものです(コードを代入すると、そのコードはボタンでイベントが発火した際に実行される)。
Q&A答え:3
アンカー要素 [Mozilla参照]
<a> は HTML の要素(アンカー要素)で、 href 属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。
<a> の内容は、リンク先を示すものであるべきです。 href 属性が存在する場合、 <a> 要素にフォーカスがある状態で Enter キーを押すと起動します。
注目付け要素 [Mozilla参照]
HTML の注目付け要素 (<b>) は、要素の内容に読み手の注意を惹きたい場合で、他の特別な重要性が与えられないものに使用します。これは以前は太字要素と呼ばれており、ほとんどのブラウザーでは文字列を太字で描画していました。しかし、 <b> を文字列の装飾に使うべきではありません。太字の文字列を作成するには、 CSS の font-weight プロパティを使用し、特別な重要性を持つテキストを示すには <strong> 要素を使用してください。
説明リスト要素 [Mozilla参照]
<dl> は HTML の要素で、説明リストを表します。この要素は、一連の用語(<dt> 要素を使用して指定)と説明(<dd> 要素によって提供)をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ(キーと値のペアのリスト)の表示が挙げられます。
Q&A答え:2
font-style [Mozilla参照]
font-style は CSS のプロパティで、font-family の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどのスタイルにするか設定します。
Q&A答え:3
進捗表示要素 [Mozilla参照]
HTML の <progress> 要素は、タスクの進捗状況を表示します。プログレスバーとしてよく表示されます。
Q&A答え:1
レスポンシブデザイン [Mozilla参照]
initial-scale: ページの初期ズームを設定します。 これには 1 を設定します。
Q&A答え:4
GIF [Mozilla参照]
GIF (Graphics Interchange Format)は、可逆圧縮とアニメーションに使える画像フォーマットです。GIFは1ピクセル毎8ビットまでと、24ビットの色領域から最大256色まで扱えます。
JPEG [Mozilla参照]
JPEG (Joint Photographic Experts Group) とは、一般的に使われている、デジタル画像用の非可逆圧縮の方法です。
PNG [Mozilla参照]
PNG (Portable Network Graphics) は、可逆データ圧縮サポートする画像ファイル形式です。
一般的な画像ファイルの種類* [Mozilla参照]
ウェブ上で最も一般的に使用されている画像ファイル形式は以下の通りです。
- GIF
- 単純な画像やアニメーションに適しています。 PNG の方が劣化なしかつインデックスカラーの静止画に適しており、アニメーションシーケンスには WebP, AVIF, APNG を検討してください。 対応: Chrome, Edge, Firefox, IE, Opera, Safari
- JPEG
- 静止画の非可逆圧縮に適しています(現在最も普及しています)。 PNG の方がより正確な画像の再現が必要な場合に適しており、 WebP/AVIF の方がより良い再現性と高い圧縮率の両方が必要な場合に適しています。 対応: Chrome, Edge, Firefox, IE, Opera, Safari
- PNG
- PNG は元画像をより正確に再現したい場合や、透明度が必要な場合には JPEG より好まれます。 WebP/AVIF はさらに優れた圧縮と再現性を提供しますが、ブラウザーの対応はより限定されています。 対応: Chrome, Edge, Firefox, IE, Opera, Safari
- BMP
- BMP (Bitmap 画像) ファイル形式は、 Windows コンピューターで最も普及しており、ウェブアプリやコンテンツではふつう、特殊な場合にのみ使用されます。
Q&A答え:2
SSH File Transfer Protocol [ウィキペディア参照]
SSH File Transfer Protocol(SFTP)は、信頼性の高いデータストリーム(英語版)上でのファイル転送やファイル管理を提供する通信プロトコルである。Internet Engineering Task Force(IETF)によって、安全なファイル転送機能を提供するためにSecure Shellバージョン2.0(SSH-2)の拡張として設計された。IETFのインターネットドラフトでは、このプロトコルはSSH-2に関連付けて説明されているが、TLS(Transport Layer Security)経由の安全なファイル転送や、VPNアプリケーションの管理情報の転送など、さまざまなアプリケーションで使用できると述べられている。
Q&A答え:3
強い重要性要素 [Mozilla参照]
HTML の強い重要性要素 (<strong>) は、内容の重要性、重大性、または緊急性が高いテキストを表します。ブラウザーは一般的に太字で描画します。
Q&A答え:2
順序付きリスト要素 [Mozilla参照]
<ol> は HTML の要素で、項目の順序付きリストを表します。ふつうは番号付きのリストとして表示されます。
Q&A答え:1
加法混合 [ウィキペディア参照]
色を表現する媒体のうち、様々な色の発光体を組み合わせて観る者の方へ放つことで色刺激を起こすものは、加法混合を使用して色を作っている。この場合、典型的に使われる原色は赤 (Red) ・緑 (Green) ・青 (Blue) の三色である。
白色の光を合成する為の波長を「光の三原色」や「色光の三原色」と言い、下記の三色を用いる。
Q&A答え:4
スタイル情報要素 [Mozilla参照]
HTML の <style> 要素は、文書あるいは文書の一部分のスタイル情報を含みます。 <style> 要素を含んでいる文書のコンテンツに適用される CSS を含みます。
Q&A答え:4
ユニバーサルデザイン [ウィキペディア参照]
文化・言語・国籍や年齢・性別・能力などの違いにかかわらず、出来るだけ多くの人が利用できることを目指した建築・製品・情報などの設計のことであり、またそれを実現するためのプロセスである。