試験要項(R03_4)
実技実技試験概要(PDF)
更新日：
令和3年度第4回は、
2022-02-20(日)試験でした。
作業データは、現在 none です。
３級ウェブデザイン技能検定実技試験は次のとおり実施します。
【出題形式】：課題選択方式
【合格基準】：70点以上（100点満点）
作業A
- ウェブサイトデザイン
- HTML・XHTML・CSSによるコーディング、画像の利用
- ウェブサイト運用管理
- 更新･管理
- 作業の概要
- 指示されるディレクトリ構造を示す図に従い、HTML ファイル、CSS ファイル、および画像などのソースファイルを適切に配置すること。またその構造に適応するよう、各ファイルの記述内容を修正し、更新すること。
- 作業のポイント
(1) デスクトップ上のdata3 フォルダのq1 フォルダ内にある fs.jpg に従い、index.html、CSSファイル、画像等の ソースファイルおよびディレクトリ構成を適切に訂正し完成させなさい。その際、必要に応じフォルダ等は作成し、 CSSファイル、画像等が正しく適用されるよう、index.htmlおよびCSSファイルを編集すること。
(2) デスクトップ上のwd3 フォルダ内にa1 という名前でフォルダを作成し、フォルダおよびソースファイルを構成に 留意して保存しなさい。
-
<!-- コメント：修正コード記載 -->/* コメント：修正コード記載 */
作業B
- ウェブサイトデザイン
- HTML・XHTML・CSSによるコーディング、画像の利用
- ウェブサイト運用管理
- 更新･管理
- 作業の概要
- 指定されるエリアにあるグローバルナビゲーションに対して、対応した各ページへのリンクを設定すること。併せて HTML ファイルの内容を指示のとおりに修正し、更新すること。
- 作業のポイント
-
(1） デスクトップ上の data3 フォルダの q2 フォルダ内にある index.html、info.html、skilltest.html、form.html の nav 要素で指定されたエリアにあるグローバルナビゲーションの各要素に対して、対応する各ページへのリンクが正常に行われるようにしなさい。「ホーム」は index.html に、「協会情報」は info.html に、「試験概要」はskilltest.html に、「お問い合わせ」は form.html にそれぞれリンクを設定しなさい。その他は無視してよい。
(2） info.html、skilltest.html、form.html の main 要素内にある「A」、「B」、「C」の箇所をそれぞれのページタイトルと同じテキストに修正しなさい。
(3） 修正した index.html および表示に必要な他のファイル等とともに、デスクトップ上の wd3 フォルダ内に a2 と いう名前でフォルダを作成し保存しなさい。
<!-- コメント：修正コード記載 -->
作業C
- ウェブサイトデザイン
- HTML・XHTML・CSSによるコーディング、画像の利用
- ウェブサイト運用管理
- 更新･管理
- 作業の概要
- 指定されたコンテンツのブロックレベル要素を指示されたレイアウトになるよう、CSS ファイルを修正し、更新すること。
- 作業のポイント
-
(1) デスクトップ上の data3 フォルダの q3 フォルダ内にある style.css を編集し、左に寄って配置されているコンテ ンツが中央に表示されるように変更しなさい。ここでいう中央とは、横方向の中央であって、縦方向の中央に配置する必要はない。
(2) 修正した style.css や index.html ファイルおよび表示に必要な他のファイル等とともに、デスクトップ上の wd3フォルダ内に a3 という名前でフォルダを作成し保存しなさい。
-
/* コメント：修正コード記載 */
作業D
- ウェブサイトデザイン
- HTML・XHTML・CSSによるコーディング、画像の利用
- ウェブサイト運用管理
- 更新･管理
- 作業の概要
- 指示される要素に関連する背景色と文字色について、CSS ファイルを修正し、更新すること。
- 作業のポイント
-
(1） デスクトップ上の data3 フォルダの q4 フォルダ内にある style.css を編集して、h1 要素の背景の色を#221100、文字の色を #ffffff に変更しなさい。指定以外の要素は特に変更する必要はない。
(2） 修正した style.css や index.html ファイルおよび表示に必要な他のファイル等とともに、デスクトップ上の wd3フォルダ内に a4 という名前でフォルダを作成し保存しなさい。
-
/* コメント：修正コード記載 */
作業E
- ウェブサイトデザイン
- HTML・XHTML・CSSによるコーディング、画像の利用
- ウェブサイト運用管理
- 更新･管理
- 作業の概要
- 与えられる画像と同じブラウジング結果となるよう、HTML ファイルの body 要素、div 要素に対応する CSS ファイルの記述を修正し、更新すること。
- 作業のポイント
-
(1） デスクトップ上の data3 フォルダの q5 フォルダ内にある index.html の body 要素および id="wrap"が指定されている div 要素に、style.css を編集して、img.png での表示結果と同じとなるように背景画像を適用しなさい。背景画像は q5 フォルダ内の img フォルダより適切なものを選択し適用しなさい。なお、適用される背景画像以外の、検定指定ウェブブラウザ間の種類並びにバージョンの違いによる表示の僅かな異なりは、無視できるものとする。
(2） 修正した style.css や index.html ファイルおよび表示に必要な他のファイル等とともに、デスクトップ上の wd3フォルダ内に a5 という名前でフォルダを作成し保存しなさい。
-
/* コメント：修正コード記載 */
作業F
- ウェブサイトデザイン
- HTML・XHTML・CSSによるコーディング、画像の利用
- ウェブサイト運用管理
- 更新･管理
- 作業の概要
- HTML HTML ファイルのコンテンツエリア内の記述を削除し、与えられる文章に対し h1 要素、h2 要素、p 要素、ol要素、ul 要素のすべてをもれなく使用し構造化を行い、更新すること。
- 作業のポイント
-
(1） デスクトップ上の data3 フォルダの q6 フォルダ内にある index.html の main 要素で指定されたエリアに、現在配置されているテキストを削除して、sample.txt に記載されている文章を配置し、ウェブページを更新しなさい。その際は文章をよく読み、h1 要素、h2 要素、p 要素、ol 要素、ul 要素のすべてをもれなく使用し構造化を行うこと。指定以外の要素については使用する必要はない。なお、各リスト項目の文頭につくマーカーについては、ol 要素、ul 要素のデフォルトのスタイルを適用させ実現すること。
(2） 修正した index.html および表示に必要な他のファイル等とともに、デスクトップ上の wd3 フォルダ内に a6 という名前でフォルダを作成し保存しなさい。
-
<!-- コメント：修正コード記載 -->
学科試験要項(学科・実技共通)(PDF)
更新日：
令和3年度第4回は、
2022-02-20(日)試験でした。
３級ウェブデザイン技能検定学科試験は次のとおり実施します。
【出題形式】：筆記試験（マーク方式）・「多肢選択法」「真偽法」形式
【合格基準】：70点以上（100点満点）
Ｑ&Ａ答え：１
コンテンツカテゴリー [Mozilla参照]
ほとんどの HTML 要素は 1 つ以上のコンテンツカテゴリーに属していて、カテゴリーごとに共通した特徴を持つ要素を分類しています。これは緩やかなグループ分けです（実際にはこれらのカテゴリーの要素間の関係を作成していません）。しかし、これらは、特にその複雑な詳細に遭遇したときに、カテゴリーの共有動作とその関連ルールを定義し記述するのに役立ちます。どのカテゴリーにも属さない要素も存在します。
- 記述コンテンツ
- 記述コンテンツ (phrasing content) は、文章とその中に含まれるマークアップを定義します。記述コンテンツの集まりで段落を構成します。
Phrasing content [HTML Living Standard参照]
Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.
https://html.spec.whatwg.org/images/content-venn.svg
フレージング コンテンツは、ドキュメントのテキストと、段落内レベルでそのテキストをマークアップする要素です。 一連のフレージング コンテンツ フォーム パラグラフ。[Google 翻訳]
Ｑ&Ａ答え：１
「情報機器作業における労働衛生管理のためのガイドラインの概要*（パンフレット）」［PDF形式：718KB］ [厚生労働省参照]
以下の画像・テキストは、厚生労働省サイトから引用し、加工した物です。
疲れない方法で作業をしましょう
- ＜作業時間＞
- １日の作業時間が長すぎないよう
- １時間以内で１サイクル、サイクルの間は10-15分の作業休止、サイクル中にも１、２回の小休止を
- 事業者は、作業者に応じた業務量を
- ＜作業姿勢＞
- 椅子に深く正しく座り、足は足裏の全体が接するように
- 長時間同じ姿勢にならないよう、ときおり立ち上がるか立ち作業を
- ＜機器の調整＞
- ディスプレイは、眼から40cm以上の距離、画面の上端は眼の高さまで
- ディスプレイの位置角度、輝度を調節
- ディスプレイと書類を交互に見る作業では、書類を眼が疲れない位置に
厚生労働省 > 政策について > 分野別の政策一覧 > 雇用・労働 > 労働基準 > 安全・衛生 > 職場における労働衛生対策「「情報機器作業における労働衛生管理のためのガイドラインの概要（パンフレット）」［PDF形式：718KB］」（厚生労働省）（https://www.mhlw.go.jp/content/11300000/000546922.pdf）（2022-08-06利用）を加工して作成
- ＜作業時間＞
Ｑ&Ａ答え：１
GIF [Mozilla参照]
GIF (Graphics Interchange Format)は、可逆圧縮とアニメーションに使える画像フォーマットです。GIFは1ピクセル毎8ビットまでと、24ビットの色領域から最大256色まで扱えます。
Ｑ&Ａ答え：１
JPEG_ノイズ [ウィキペディア参照]
JPEGではブロック単位で変換を行うため、圧縮率を上げるとブロックの境界にブロックノイズと呼ばれるノイズが生じる。
Ｑ&Ａ答え：１
ブロック引用要素 [Mozilla参照]
HTML の <blockquote> 要素 (HTML ブロック引用要素) は、内包する要素の文字列が引用文であることを示します。通常、字下げを伴ってレンダリングされます (整形方法については注意の項を参照してください)。 cite 属性により引用元の文書の URL を、 <cite> 要素により引用元の文書のタイトルなどを明示可能です。
Ｑ&Ａ答え：２
ワイヤーフレーム [ウィキペディア参照]
ワイヤーフレーム (wire frame) とは、3次元形状のモデリングやレンダリングの手法のひとつで、立体の辺だけから成るような線の集合で表現するものである。
Ｑ&Ａ答え：２
アクセシビリティ [Mozilla参照]
ウェブ開発者になりたい場合、HTML, CSS, JavaScript の学習は役立ちます。しかし知識は単に技術を使うよりも前に進める必要があります — それらを責任を持って使う必要があり、その結果ウェブサイトの聴衆を増やし、またそれを使わないことに縛らないことになります。これを達成するには、一般的な成功事例 (HTML, CSS, JavaScript のトピックに示されています) を積み上げ、クロスブラウザーテストを行って、最初からアクセシビリティを考慮しておきます。このモジュールでは後者を詳しく扱います。
Ｑ&Ａ答え：１
入力欄 (フォーム入力) 要素-属性 [Mozilla参照]
<input>要素の属性で、 HTML のグローバル属性を含むもの属性 型 説明 alt image image 型の alt 属性です。アクセシビリティのために必要です。 Ｑ&Ａ答え：２
サブドメイン [ウィキペディア参照]
サブドメインとは、Domain Name System(DNS)におけるドメイン名の階層構造における、他のドメインの一部であるドメインである[1]
- 概要
- ドメイン名は階層構造かつツリー構造になっている。サブドメインとは、より大きなドメインの一部であるドメインであり、ルートドメイン以外の全てのドメインは、他のドメインのサブドメインである[1]。例えば、west.example.comとeast.example.comはexample.comのサブドメインであり、さらにexample.comはcom（トップレベルドメイン）のサブドメイン、comはルートドメインのサブドメインである。 Subdomain-en.svg 理論上は、この細分化は127レベルまで可能である[2]（ただし、その制限は公開されているRFCには明記されていない）。
Ｑ&Ａ答え：２
OSI参照モデル [ウィキペディア参照]
OSI参照モデル（OSIさんしょうモデル、英: OSI reference model）は、コンピュータネットワークで利用されている多数のプロトコルについて、それぞれの役割を分類し、明確化するためのモデルである[1]。国際標準化機構(ISO)によって策定された。OSI基本参照モデル、OSIモデルなどとも呼ばれ、通信機能（通信プロトコル）を7つの階層に分けて定義している。
- レイヤー構成
-
- 第7層 - アプリケーション層[6]
- 具体的な通信サービス（例えばファイル・メールの転送、遠隔データベースアクセスなど）を提供。HTTPやFTPなどの通信サービス。
- 第6層 - プレゼンテーション層
- データの表現方法（例えばEBCDICコードのテキストファイルをASCIIコードのファイルへ変換する）。
- 第5層 - セッション層
- 通信プログラム間の通信の開始から終了までの手順（例えば接続が途切れた場合、接続の回復を試みる）。
- 第4層 - トランスポート層
- ネットワークの端から端までの通信管理（エラー訂正、再送制御など）。
- 第3層 - ネットワーク層
- ネットワークにおける通信経路の選択（ルーティング）。データ中継。
- 第2層 - データリンク層
- 直接的（隣接的）に接続されている通信機器間の信号の受け渡し。
- 第1層 - 物理層
- 物理的な接続。コネクタのピンの数、コネクタ形状の規定など。銅線-光ファイバ間の電気信号の変換など。
- 第7層 - アプリケーション層[6]
Ｑ&Ａ答え：２
整形済みテキスト要素 [Mozilla参照]
<pre> は HTML の要素で、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。
- アクセシビリティの考慮
- <figure> および <figcaption> 要素の組み合わせに、 id および ARIA role および aria-labelledby 属性を補ったもので、整形済みテキストを図形として扱い、 figcaption を図形の別の説明として提供することができます。
<figure role="img" aria-labelledby="cow-caption"> <pre> __________________ < 私は牧場の達人です。> ------------------ \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || </pre> <figcaption id="cow-caption"> 「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。 </figcaption> </figure>行内コード要素 [Mozilla参照]
HTML の <code> 要素は、コンピューターコードの短い断片の文字列であると識別できるような外見のコンテンツを表示します。既定では、中の文字列がユーザーエージェントの既定の等幅フォントを使用して表示されます。
- 補足
複数行のコードを表すには、 <code> 要素を <pre> 要素の中に入れてください。 <code> 要素自身は、コードの単一のフレーズや1行のみを表します。
CSS の規則によって、 code セレクターを定義して、ブラウザーの既定のフォントを上書きすることができます。ユーザーによる設定を CSS による指定より優先させることもできます。
Ｑ&Ａ答え：４
色の三属性 [ウィキペディア参照]
色の見えは光源や物体によって変化するが、色味とその濃淡（強度）や明暗を具えている点で共通する。これは、色相・彩度・明度と呼ばれる。色相・彩度・明度は合わせて色の三属性と呼ぶ[1]。
Ｑ&Ａ答え：３
タイルシート言語 [ウィキペディア参照]
スタイルシート言語（英語: style sheet language）とは、構造化文書の見た目を記述するコンピュータ言語。構造化文書とは、節や段落が明確に定義・分類された文書である。内容が明確に分類されているので、その文書を表示するプログラムは任意の表示スタイルを設定できる。広く使われているスタイルシート言語としてはCSSがあり、HTML、XHTML、SVG、XUL、その他のマークアップ言語で書かれた文書のスタイルを指定するのに使われる。構造化文書の利点の一つとして、内容を様々な状況で再利用でき、様々な方法で表示可能という点が挙げられる。構造化文書の論理構造に異なるスタイルシートを付与することで、異なる表示が得られる。
Ｑ&Ａ答え：１
<input type="checkbox"> [Mozilla参照]
<input> 要素の checkbox 型は、既定でボックスとして描画され、政府の書類で見られるように、有効な時にはチェックが入ります。正確な外見はブラウザーが実行されているオペレーティングシステムの構成によります。一般にこれは四角形ですが、角が丸くなることもあります。チェックボックスによって、フォームで単一の値を選択して (または選択せずに) 送信することができます。
display [Mozilla参照]
display は CSS のプロパティで、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。
- 構文
display: block;display: inline;display: inline-block;display: none;- …その他あり
display: block;指定項目01項目02項目03display: inline-block;指定項目01項目02項目03Ｑ&Ａ答え：３
説明リスト要素 [Mozilla参照]
<dl> は HTML の要素で、説明リストを表します。この要素は、一連の用語（<dt> 要素を使用して指定）と説明（<dd> 要素によって提供）をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ（キーと値のペアのリスト）の表示が挙げられます。
(例*)
<dl> <dt>Name</dt> <dd>Godzilla</dd> <dt>Born</dt> <dd>1952</dd> <dt>Birthplace</dt> <dd>Japan</dd> <dt>Color</dt> <dd>Green</dd> </dl>- Name
- Godzilla
- Born
- 1952
- Birthplace
- Japan
- Color
- Green
Ｑ&Ａ答え：１
「情報機器作業における労働衛生管理のためのガイドラインの概要（パンフレット）」［PDF形式：718KB］ [厚生労働省参照]
以下の画像・テキストは、厚生労働省サイトから引用し、加工した物
疲れない方法で作業をしましょう
- ＜作業時間＞
- １日の作業時間が長すぎないよう
- １時間以内で１サイクル、サイクルの間は10-15分の作業休止、サイクル中にも１、２回の小休止を
- 事業者は、作業者に応じた業務量を
- ＜作業姿勢＞
- 椅子に深く正しく座り、足は足裏の全体が接するように
- 長時間同じ姿勢にならないよう、ときおり立ち上がるか立ち作業を
- ＜機器の調整＞
- ディスプレイは、眼から40cm以上の距離、画面の上端は眼の高さまで
- ディスプレイの位置角度、輝度を調節
- ディスプレイと書類を交互に見る作業では、書類を眼が疲れない位置に
厚生労働省 > 政策について > 分野別の政策一覧 > 雇用・労働 > 労働基準 > 安全・衛生 > 職場における労働衛生対策「「情報機器作業における労働衛生管理のためのガイドラインの概要（パンフレット）」［PDF形式：718KB］」（厚生労働省）（https://www.mhlw.go.jp/content/11300000/000546922.pdf）（2022-08-06利用）を加工して作成
- ＜作業時間＞
Ｑ&Ａ答え：３
<input type="submit"> [Mozilla参照]
<input> 要素の submit 型は、ボタンとして描画されます。 click イベントが発生したとき (ふつうはユーザーがボタンをクリックしたとき)、ユーザーエージェントはサーバーへフォームを送信しようとします。
Ｑ&Ａ答え：３
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参照]
HTML の <p> 要素は、テキストの段落を表します。視覚メディアにおいて、段落はふつう隣接するブロックと上下の空白や最初の行の字下げによって隔てられたテキストのブロックとして表現されますが、 HTML の段落は画像やフォーム欄などの関連するコンテンツを構造的にまとめることができます。
Ｑ&Ａ答え：３
ユニバーサルデザイン [ウィキペディア参照]
文化・言語・国籍や年齢・性別・能力などの違いにかかわらず、出来るだけ多くの人が利用できることを目指した建築・製品・情報などの設計のことであり、またそれを実現するためのプロセスである。
Ｑ&Ａ答え：４
アクセシビリティとは* [ウェブアクセシビリティ基盤委員会参照]
さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うようになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは必要不可欠な品質と言えます。
WCAG 2.1 関連文書 更新のお知らせ (2022年7月5日)- WCAG 2.0関連翻訳文書
とそのコントラスト [Mozilla参照]
自分のウェブサイト用のカラー・スキームを選ぶときには、テキスト (前景) の色が背景色と十分に差があることを確認してください。あなたのデザインはかっこよく見えるかもしれませんが、もし色盲などの視覚障碍のある人々がコンテンツを読めなかったら、まったく良いデザインではありません。
Ｑ&Ａ答え：２
順序なしリスト要素 [Mozilla参照]
HTML の <ul> 要素は、項目の順序なしリストを表します。一般的に、行頭記号を伴うリストとして描画されます。
- タグの省略
- 不可。開始と終了タグの両方が必要。
Ｑ&Ａ答え：４
画像埋め込み要素_属性 [Mozilla参照]
Ｑ&Ａ答え：１
border-top-style [Mozilla参照]
border-top-style は CSS のプロパティで、要素の上側の境界 (border) における線の形状を設定します。
- 公式定義
- 初期値：none
Ｑ&Ａ答え：１
権利の内容と譲渡可能性 [ウィキペディア参照]
日本の著作権法の下では、原則として、著作権は創作の時点で自動的に創作者（著作者）に帰属する（無方式主義 cf.方式主義）。たとえ創作活動を職業としない一般人であっても、創作された時点で自動的に帰属される。つまり、原始的には著作者たる地位と著作権者たる地位が同一人に帰属する。
もっとも、著作権は財産権の一種であり、譲渡することが可能であり、さらには、以下のような支分権ごとにも譲渡可能と理解されている。したがって、創作を行った者と現時点の著作権者とは一致しないことや、支分権ごとに権利者が異なることもありうる。ただし、譲渡を受けた者が第三者に対抗するためには、文化庁に著作権を登録しておく必要がある。また、映画の著作物については、著作権の原始的帰属について特例が設けられている（16条）。この場合でも人格権としての著作者人格権は著作者に残されるため（59条）、著作権者であるといえども無断で著作物を公表・改変したり、氏名表示を書き換えたりすることはできない[71]。
なお、著作者と著作権者の用語の使い分けが分かりづらいためか、2005年1月に文化審議会著作権分科会から発表された「著作権法に関する今後の検討課題」の中では、用語の整理の検討が必要であると言及されている。
著作権 [ウィキペディア参照]
著作権[1]（ちょさくけん、英語: copyright、コピーライト）は、作品を創作した者が有する権利である。また、作品がどう使われるか決めることができる権利である[2]。作者の思想や感情が表現された文芸・学術・美術・音楽などを著作物といい[3]、創作した者を著作者という。知的財産権の一種。
著作権の保護期間 [ウィキペディア参照]
著作権の保護期間（ちょさくけんのほごきかん）とは、著作権の発生から消滅までの期間をいう。
この期間において著作権は保護され、著作権者は権利の対象である著作物を、原則として独占排他的に利用することができる。著作権の発生要件と消滅時期は各国の国内法令に委ねられているが、世界160ヶ国以上（2016年現在）が締結する文学的及び美術的著作物の保護に関するベルヌ条約（ベルヌ条約）が、権利の発生要件として「無方式主義」（同条約5条(2)）、著作権の保護期間として「著作者の生存期間及び著作者の死後50年」（同条約7条(1)）を原則としていることから、著作権は著作物の創作と同時に発生し、著作者の死後50年（あるいはそれ以上）まで存続するものと規定する国が多数を占める。