試験要項(R04_1)
実技実技試験概要(PDF)
更新日:
令和4年度第1回は、
2022-05-29(日)試験でした。
作業データは、現在 none です。
3級ウェブデザイン技能検定実技試験は次のとおり実施します。
【出題形式】:課題選択方式
【合格基準】: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 要素の背景の色を#443333、文字の色を #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)
更新日:
令和4年度第1回は、
2022-05-29(日)試験でした。
3級ウェブデザイン技能検定学科試験は次のとおり実施します。
【出題形式】:筆記試験(マーク方式)・「多肢選択法」「真偽法」形式
【合格基準】:70点以上(100点満点)
Q&A答え:2
コンテンツ区分要素 [Mozilla参照]
<div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。
Q&A答え:1
自宅等でテレワークを行う際の作業環境整備* [厚生労働省参照]
「テレワークを行う作業場が、労働者の自宅等事業者が業務のために提供している作業場以外である場合には、事務所衛生基準規則(昭和47 年労働省令第43 号)、労働安全衛生規則(一部、労働者を就業させる建設物その他の作業場に係る規定)及び「情報機器作業における労働衛生管理のためのガイドライン」(令和元年7月12 日基発0712 第3号)は一般には適用されないが、安全衛生に配慮したテレワークが実施されるよう、これらの衛生基準と同等の作業環境となるよう、事業者はテレワークを行う労働者に教育・助言等を行い、別紙2の「自宅等においてテレワークを行う際の作業環境を確認するためのチェックリスト(労働者用)」を活用すること等により、自宅等の作業環境に関する状況の報告を求めるとともに、必要な場合には、労使が協力して改善を図る又は自宅以外の場所(サテライトオフィス等)の活用を検討することが重要である。」
厚生労働省 > 政策について > 分野別の政策一覧 > 雇用・労働 > 労働基準 > 安全・衛生 > 職場における労働衛生対策 > 自宅等でテレワークを行う際の作業環境整備「自宅等でテレワークを行う際の作業環境整備イメージ[pdfファイル:374KB]」(厚生労働省)(https://www.mhlw.go.jp/content/11300000/000546922.pdf)(2022-08-06利用)を加工して作成
Q&A答え:1
強い重要性要素 [Mozilla参照]
HTML の強い重要性要素 (<strong>) は、内容の重要性、重大性、または緊急性が高いテキストを表します。ブラウザーは一般的に太字で描画します。
Q&A答え:1
font-family [Mozilla参照]
CSS の font-family プロパティは、選択した要素に対して、フォントファミリー名や総称ファミリー名の優先順位リストを指定することができます。
- sans-serif
- 平たい角の端を持つ字形です。
- monospace
- すべての字が同じ幅を持つ字形です。
- cursive
- 筆記体フォントの字形には、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の筆記体の特性があります。
Q&A答え:2
Basic 認証方式 [Mozilla参照]
"Basic" HTTP 認証方式は RFC 7617 で定義されており、資格情報を送信するのに、ユーザー ID とパスワードの組を base64 を使用してエンコードします。
Q&A答え:1
著作権 [ウィキペディア参照]
著作権[1](ちょさくけん、英語: copyright、コピーライト)は、作品を創作した者が有する権利である。また、作品がどう使われるか決めることができる権利である[2]。作者の思想や感情が表現された文芸・学術・美術・音楽などを著作物といい[3]、創作した者を著作者という。知的財産権の一種。
Q&A答え:1
クロスブラウザテストとは [Mozilla参照]
クロスブラウザテストは、作成した Web サイトと Web アプリケーションが許容できる数の Web ブラウザにわたって動作することを確認することです。Web 開発者として、自分のプロジェクトが機能するだけでなく、使用しているブラウザ、デバイス、その他の補助ツールに関係なく、すべてのユーザに対して機能することを確認するのはあなたの責任です。あなたは考える必要があります:
Q&A答え:1
フレージングコンテンツ* [HTML 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.
フレージング コンテンツは、ドキュメントのテキストと、段落内レベルでそのテキストをマークアップする要素です。 一連のフレージング コンテンツ フォーム パラグラフ。Q&A答え:2
ユニバーサルデザイン [ウィキペディア参照]
文化・言語・国籍や年齢・性別・能力などの違いにかかわらず、出来るだけ多くの人が利用できることを目指した建築・製品・情報などの設計のことであり、またそれを実現するためのプロセスである。
Q&A答え:2
GIF [Mozilla参照]
GIF (Graphics Interchange Format)は、可逆圧縮とアニメーションに使える画像フォーマットです。GIFは1ピクセル毎8ビットまでと、24ビットの色領域から最大256色まで扱えます。
Q&A答え:2
list-style [Mozilla参照]
list-style は CSS の一括指定プロパティで、リストのすべてのスタイルプロパティを設定します。
- アクセシビリティの考慮
- 注意すべき例外として、Safari は順序なしリストで list-style の値に none が適用されると、アクセシビリティツリー上でリストとして認識しません。
Q&A答え:3
順序なしリスト要素_例 [Mozilla参照]
- シンプルな例
<ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul>
Q&A答え:4
サイバーセキュリティ基本法 [ウィキペディア参照]
サイバーセキュリティ基本法(サイバーセキュリティきほんほう)とは、日本の法律。衆議院において2014年(平成26年)11月6日に可決・成立した。
サイバーセキュリティ基本法
- 第一条
- この法律は、インターネットその他の高度情報通信ネットワークの整備及びデジタル社会形成基本法(令和三年法律第三十五号)第二条に規定する情報通信技術(以下「情報通信技術」という。)の活用の進展に伴って世界的規模で生じているサイバーセキュリティに対する脅威の深刻化その他の内外の諸情勢の変化に伴い、情報の自由な流通を確保しつつ、サイバーセキュリティの確保を図ることが喫緊の課題となっている状況に鑑み、我が国のサイバーセキュリティに関する施策に関し、基本理念を定め、国及び地方公共団体の責務等を明らかにし、並びにサイバーセキュリティ戦略の策定その他サイバーセキュリティに関する施策の基本となる事項を定めるとともに、サイバーセキュリティ戦略本部を設置すること等により、同法と相まって、サイバーセキュリティに関する施策を総合的かつ効果的に推進し、もって経済社会の活力の向上及び持続的発展並びに国民が安全で安心して暮らせる社会の実現を図るとともに、国際社会の平和及び安全の確保並びに我が国の安全保障に寄与すること目的とする。
Q&A答え:1
表データセル要素 [Mozilla参照]
<td> は HTML の要素で、表でデータを包含するセルを定義します。これはモデルに関与します。
表要素 [Mozilla参照]
HTML の &<table> 要素は表形式のデータ、つまり、行と列の組み合わせによるセルに含まれたデータによる二次元の表で表現される情報です。
表見出し要素 [Mozilla参照]
<th> は HTML の要素で、表のセルのグループ用の見出しであるセルを定義します。このグループの正確な性質は、scope 属性と headers 属性で定義します。
表の行要素 [Mozilla参照]
<tr> は HTML の要素で、表内でセルの行を定義します。行のセルには <td> (データセル)および <th> (見出しセル)要素をを混在させることができます。
Q&A答え:2
十分な時間 [ウェブアクセシビリティ基盤委員会参照]
ガイドライン 2.2: 利用者がコンテンツを読み、使用するために十分な時間を提供すること。
- ガイドライン 2.2 の意図
- 障害のある多くの利用者は、大多数の利用者よりもタスクを完了するのにより多くの時間を必要とする
Q&A答え:1
cursor [Mozilla参照]
cursor は CSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。
- not-allowed
- 要求された操作が受け付けられないことを示します。
- none
- カーソルを表示しません。
Q&A答え:2
セレクター [Mozilla参照]
CSS 言語には、競合が発生した場合にどちらのセレクターが強いかを制御するための規則があります。これらの規則はカスケードと詳細度と呼ばれています。以下のコードブロックでは、 p セレクターに対して2つの規則が定義されていますが、段落テキストは青くなります。これは、段落テキストを青に設定する宣言がスタイルシートの後に現れているからです。後のスタイルは、それより前のスタイルシートに現れた競合するスタイルを置き換えます。これがカスケード規則です。
p { color: red; } p { color: blue; }
- カスケードを理解する
- HTML 構造に深くネストされた段落が body の CSS と同じ色である理由がわかりました。また導入レッスンではドキュメントの任意の時点で CSS を変更する方法がわかりました(CSS を要素自体に割り当てたり、クラスを作成したり)。そしてここからは、スタイルを設定できるものが複数ある場合に、カスケードがどのようにして CSS ルールを適用していくかを見ていきます。
Q&A答え:4
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]
Q&A答え:3
display [Mozilla参照]
display は CSS のプロパティで、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。
- 構文
display
: none;
Q&A答え:1
ワーム [ウィキペディア参照]
ワーム (worm) は、英語でミミズやサナダムシなど細長い虫の俗称。蠕虫(ぜんちゅう)。
- ワーム (コンピュータ) - コンピュータ用語で、自身を複製し増殖するプログラム
- ワーム (ゲーム) - キャラクター端末用に開発されたコンピュータゲーム
- 一番目の細長い虫を模した釣り用のルアー(疑似餌)の一種。 ⇒ ルアーを参照
- ワーム (伝説の生物)
- Write Once Read Manyの略
- 特撮テレビドラマ『仮面ライダーカブト』に登場する宇宙生命体の総称
- テレビアニメ『スカイガールズ』に登場する金属生命体の総称
Q&A答え:1
Scalable Vector Graphics [ウィキペディア参照]
Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG、日: 変倍ベクタ図形[2][3])は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。
SVG教本 [Mozilla参照]
変倍ベクタ図形 (Scalable Vector Graphics; SVG) は図形をタグ付けするW3CのXML派生言語です。SVGは,Firefox、Opera、WebKitブラウザ、Internet Explorer及び他のブラウザにおいて部分的に実装されています。
↓<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-windows" viewBox="0 0 16 16"> <path d="M6.555 1.375 0 2.237v5.45h6.555V1.375zM0 13.795l6.555.933V8.313H0v5.482zm7.278-5.4.026 6.378L16 16V8.395H7.278zM16 0 7.33 1.244v6.414H16V0z"/> </svg>
title_DOM インターフェイス [Mozilla参照]
この要素は SVGTitleElement (en-US) インターフェイスを実装します。
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> <g> <title>SVG Title Demo example</title> <rect x="10" y="10" width="200" height="50" style="fill:none; stroke:blue; stroke-width:1px"/> </g> </svg>
Q&A答え:2
スタイルシート言語 [ウィキペディア参照]
スタイルシート言語(英語: style sheet language)とは、構造化文書の見た目を記述するコンピュータ言語。構造化文書とは、節や段落が明確に定義・分類された文書である。内容が明確に分類されているので、その文書を表示するプログラムは任意の表示スタイルを設定できる。広く使われているスタイルシート言語としてはCSSがあり、HTML、XHTML、SVG、XUL、その他のマークアップ言語で書かれた文書のスタイルを指定するのに使われる。構造化文書の利点の一つとして、内容を様々な状況で再利用でき、様々な方法で表示可能という点が挙げられる。構造化文書の論理構造に異なるスタイルシートを付与することで、異なる表示が得られる。
Q&A答え:4
主題区切り (水平線) 要素 [Mozilla参照]
HTML の <hr> 要素は、段落レベルの要素間において、テーマの意味的な区切りを表します。例えば、話の場面の切り替えや、節内での話題の転換などです。
Q&A答え:2
キーボード操作可能 [WCAG 2.0 解説書参照]
ガイドライン 2.1 を理解する
ガイドライン 2.1: すべての機能をキーボードから利用できるようにすること。
- ガイドライン 2.1 の意図
- すべての機能がキーボードを用いて実現できる場合、キーボードの利用者、(キーボード入力を生成する) 音声入力、(オンスクリーンキーボードを使用する) マウス、及び出力として疑似的なキーストロークを生成する様々な支援技術により、その機能を実現できる。
Q&A答え:2
画像埋め込み要素 [Mozilla参照]
- img 要素
- src 属性は必須で、埋め込みたい画像へのパスを入れます。
- alt 属性は画像のテキストによる説明で、必須ではありませんがアクセシビリティのために非常に有用です。 — 画面リーダーがこの説明を読み上げることで、画像が何を表すかをユーザーが知ることができます。また、ネットワークエラーやコンテンツのブロック、リンク切れ等の理由で画像が読み込めなかった場合にも代替テキストが表示されます。
画像埋め込み要素_属性 [Mozilla参照]