【R02_4-3級_復習】

サイト内の文章は「ウェブデザイン技能検定」のサイトから個人利用を目的とし引用しています、ご理解お願いします。

当サイトは、特定非営利活動法人インターネットスキル認定普及協会が実施する「２・３級ウェブデザイン技能検定」合格を目指す過程でのサイト運営です。

コンプセットが、曖昧で未熟のため不適切な記事が有ります、その点をご理解お願いします。

This is an info. 当サイトは、ネットからの引用で問題を解決しております。当然、「間違い」が存在します。

確認後は、「Close」ボタンで閉じて下さい。

This is a warning. 当サイト購読には、十分な注意が「不可欠」です。

確認後は、「Close」ボタンで閉じて下さい。

This is a prohibited. 当サイトは「学術的根拠なき記事」なのでご了承下さい。

確認後は、「Close」ボタンで閉じて下さい。

【令和４年度第２回ウェブデザイン技能検定試験要項３級（学科・実技共通）学科試験科目及びその範囲】

学科及び実技

試験日令和 4 年 8 月 28 日（日）

厚生労働大臣指定試験機関特定非営利活動法人インターネットスキル認定普及協会
https://www.netskill.jp/

令和４年度第２回ウェブデザイン技能検定　実技試験概要を公表しました

2022.07.28

令和4年第2回ウェブデザイン技能検定実技試験概要を公表しました。

受検票を8/10(水)に発送いたしました

2022.08.10

令和4年度　第2回　ウェブデザイン技能検定試験　8月28日(日)開催受検票は8/10(水)に一斉発送いたしました。

令和4年度　第2回ウェブデザイン技能検定　学科試験　解答公表

2022.08.29

令和4年度第2回ウェブデザイン技能検定（8/28開催）の学科試験の解答を公表致しました。

当サイトは、全てが「学術的根拠なき記事」の参考サイトです。

ウェブデザイン技能検定試験３級

【実技試験科目及びその範囲】

ウェブサイトデザイン

ウェブサイト構築に関するデザイン作業が出来ること

ウェブサイトデザイン
- ハイパテキストマーク付け言語(HTML)、拡張可能なハイパテキストマーク付け言語(XHTML)、スタイルシート(CSS)によるコーディング
  <h1></h1>,<h2></h2>,<p></p>,<ul><li></li></ul>,<ol><li></li></ol>
  <link rel="stylesheet" href="style.css">
- 画像の利用
  <img src="../img/magnifying_glass.png" alt="検索">
  虫眼鏡のアイコン画像でも、検索のテキスト入力欄に使用するために説明文は、「検索」にする。
  (例^*)
  画像には、代替テキストを入れましょう
```
<img src="../img/dog.png" alt="芝生を駆け回る柴犬の写真">

```
- マルチメディアデータの利用
```
<audio src="../mp3/audio.mp3" controls loop><p>HTML5 Audioに対応したブラウザをご利用ください</p></audio>
```
```
<video poster="../img/video.jpg" controls autoplay muted controls width="99.9999%"><source src="../mp4/video.mp4" type="video/mp4"><p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p></video>
```
- ページデザイン・レイアウト
  margin: 20px auto 50px;
  color: #000000 /* blak */ ;
  color: #ffffff /* white */ ;
  color: #ff0000 /* red */ ;
  color: #00ff00 /* lime */ ;
  color: #0000ff /* blue */ ;
- アクセシビリティ
  パンくずリストで、サイト内での現在位置を確かめ、どのように今のページに到着したのかを知ることができます。
```
<ul class="list-inline">
<li class="list-inline-item"><a href="#">HOME</a></li>
<li class="list-inline-item"><a href="#">リンク</a></li>
<li class="list-inline-item"><a href="#">サイトマップ</a></li></ul>
```

ウェブサイト運用管理

ウェブサイト運用・管理に関する作業が出来ること

ウェブサイト運用管理
- 更新、管理
  ＜試験用 PC＞
  試験では以下のPC環境
  - 文字コードはUTF-8
  - Windows 8.1 以降のOS
  - キーボードおよびマウスの操作
  ＜アプリケーション＞
  試験では以下のテキストエディタがインストールされている
  - メモ帳（※）など Windows 標準のアクセサリが利用可能
  - サクラエディタプロジェクトサクラエディタ https://sakura-editor.github.io/
  - 寺尾進氏 TeraPad https://tera-net.com/library/tpad.html
  - Sublime Text Sublime Text http://www.sublimetext.com/
  ＜ブラウザ＞
  試験では以下を指定ブラウザとする
  - Microsoft社 Microsoft Edge 最新安定版
  - Mozilla Foundation Mozilla Firefox 最新安定版
  - Google Google Chrome 最新安定版
  - ※Internet Explorerは使用可能だが非推奨とする。

試験要項(R02_4)

実技実技試験概要(PDF)

更新日：2022-08-24

令和2年度第4回は、
2021-028-21(日)試験でした。

３級ウェブデザイン技能検定実技試験は次のとおり実施します。

【出題形式】：課題選択方式

【合格基準】：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 50px;
```
作業D

ウェブサイトデザイン
HTML・XHTML・CSSによるコーディング、画像の利用
ウェブサイト運用管理
更新･管理
作業の概要
指示される要素に関連する背景色と文字色について、CSS ファイルを修正し、更新すること。
作業のポイント
```
/* コメント：修正コード記載 */
h1 {
  border: double 3px #333333;
  font-size: 1.2em;
  margin-top: 0;
  padding: 10px 15px;
  background-color: #70a088;
  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.png);
}

#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.gif);
}

作業F

ウェブサイトデザイン: HTML・XHTML・CSSによるコーディング、画像の利用

ウェブサイト運用管理: 更新･管理

作業の概要: 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)

更新日：2022-08-24

令和2年度第4回は、
2021-028-21(日)試験でした。

３級ウェブデザイン技能検定学科試験は次のとおり実施します。

【出題形式】：筆記試験（マーク方式）・「多肢選択法」「真偽法」形式

【合格基準】：70点以上（100点満点）

Ｑ&Ａ答え：１

GIFアニメーション [ウィキペディア参照]

GIF の使用は色数の制約や過去のサブマリン特許問題（→Graphics Interchange Format#特許問題とその顛末）などから減りつつあるが、主要な代替規格であるアニメーションPNG (Animated Portable Network Graphics, APNG) はウェブブラウザの対応がまだ途上であり、JPEG にはアニメーション機能そのものがないため、多くの環境で対応しているGIFアニメーションは、2021年現在でも広く使われている。

Graphics Interchange Format [ウィキペディア参照]

GIFは256色以下の画像を扱うことができる可逆圧縮形式のファイルフォーマットである。圧縮画像ファイルフォーマットでは歴史の長いもののひとつで、WebブラウザではJPEGと並んで標準的にサポートされる。圧縮形式の特性上、同一色が連続する画像の圧縮率が高くなるため、イラストやボタン画像など、使用色数の少ない画像への使用に適している。
Ｑ&Ａ答え：１

コンテンツ区分要素 [Mozilla参照]

<div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。

使用上の注意
<div> 要素は、他に適切な意味的要素（<article> や <nav> など）がない場合に限り使用してください。
Ｑ&Ａ答え：１

サイバーセキュリティ基本法 [ウィキペディア参照]
サイバーセキュリティ基本法（サイバーセキュリティきほんほう）とは、日本の法律。衆議院において2014年（平成26年）11月6日に可決・成立した。
サイバーセキュリティ基本法

第一条

この法律は、インターネットその他の高度情報通信ネットワークの整備及びデジタル社会形成基本法（令和三年法律第三十五号）第二条に規定する情報通信技術（以下「情報通信技術」という。）の活用の進展に伴って世界的規模で生じているサイバーセキュリティに対する脅威の深刻化その他の内外の諸情勢の変化に伴い、情報の自由な流通を確保しつつ、サイバーセキュリティの確保を図ることが喫緊の課題となっている状況に鑑み、我が国のサイバーセキュリティに関する施策に関し、基本理念を定め、国及び地方公共団体の責務等を明らかにし、並びにサイバーセキュリティ戦略の策定その他サイバーセキュリティに関する施策の基本となる事項を定めるとともに、サイバーセキュリティ戦略本部を設置すること等により、同法と相まって、サイバーセキュリティに関する施策を総合的かつ効果的に推進し、もって経済社会の活力の向上及び持続的発展並びに国民が安全で安心して暮らせる社会の実現を図るとともに、国際社会の平和及び安全の確保並びに我が国の安全保障に寄与すること目的とする。
Ｑ&Ａ答え：２
WCAG 2.0 [ウィキペディア参照]
知覚可能
- イドライン 1.1: すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。
- ガイドライン 1.2: 時間依存メディアには代替コンテンツを提供すること。
- ガイドライン 1.3: 情報、および構造を損なうことなく、様々な方法（例えば、よりシンプルなレイアウト）で提供できるようにコンテンツを制作すること。
- ガイドライン 1.4: コンテンツを、利用者にとって見やすく、聞きやすいものにすること。これには、前景と背景を区別することも含む
操作可能
- ガイドライン 2.1: すべての機能をキーボードから利用できるようにすること。
- ガイドライン 2.2: 利用者がコンテンツを読み、使用するために十分な時間を提供すること。
- ガイドライン 2.3: 発作を引き起こすようなコンテンツを設計しないこと。
- ガイドライン 2.4: 利用者がナビゲートしたり、コンテンツを探し出したり、現在位置を確認したりすることを手助けする手段を提供すること。
理解可能
- ガイドライン 3.1: テキストのコンテンツを読みやすく理解可能にすること。
- ガイドライン 3.2: ウェブページの表示や挙動を予測可能にすること。
- ガイドライン 3.3: 利用者の間違いを防ぎ、修正を支援すること。
コントラスト [ウィキペディア参照]

コントラスト（contrast）とは、
- 並置されているものごとや近縁のものごとと、著しく異なっていること[1]。「対比」。「対照」。
- ・トーン・形などの差違のことで、視覚効果（en:visual effect）、デザイン、イメージなどに役立てられるもの[1]。視覚的な特徴乳の差。
- モノや人に関して、他との著しい質の差[1]。
ディスプレイなどについて取り扱う際は、コントラスト比 Lmax / Lmin を用いることが多い。ディスプレイで言えばLmaxは白を表示したときの輝度、Lminは黒を表示したときの輝度である。
Ｑ&Ａ答え：２

著作権 [ウィキペディア参照]

著作権（ちょさくけん、英語: copyright、コピーライト）は、作品を創作した者が有する権利である。また、作品がどう使われるか決めることができる権利である。作者の思想や感情が表現された文芸・学術・美術・音楽などを著作物といい、創作した者を著作者という。知的財産権の一種。
Ｑ&Ａ答え：２

ユニバーサルデザイン [ウィキペディア参照]

文化・言語・国籍や年齢・性別・能力などの違いにかかわらず、出来るだけ多くの人が利用できることを目指した建築・製品・情報などの設計のことであり、またそれを実現するためのプロセスである。
Ｑ&Ａ答え：２

自宅等でテレワークを行う際の作業環境整備^* [厚生労働省参照]

「テレワークを行う作業場が、労働者の自宅等事業者が業務のために提供している作業場以外である場合には、事務所衛生基準規則（昭和47 年労働省令第43 号）、労働安全衛生規則（一部、労働者を就業させる建設物その他の作業場に係る規定）及び「情報機器作業における労働衛生管理のためのガイドライン」（令和元年７月12 日基発0712 第３号）は一般には適用されないが、安全衛生に配慮したテレワークが実施されるよう、これらの衛生基準と同等の作業環境となるよう、事業者はテレワークを行う労働者に教育・助言等を行い、別紙２の「自宅等においてテレワークを行う際の作業環境を確認するためのチェックリスト（労働者用）」を活用すること等により、自宅等の作業環境に関する状況の報告を求めるとともに、必要な場合には、労使が協力して改善を図る又は自宅以外の場所（サテライトオフィス等）の活用を検討することが重要である。」

厚生労働省 > 政策について > 分野別の政策一覧 > 雇用・労働 > 労働基準 > 安全・衛生 > 職場における労働衛生対策 > 自宅等でテレワークを行う際の作業環境整備「自宅等でテレワークを行う際の作業環境整備イメージ［pdfファイル：374KB］」（厚生労働省）（https://www.mhlw.go.jp/content/11300000/000546922.pdf）（2022-08-06利用）を加工して作成
Ｑ&Ａ答え：２
OSI参照モデル [ウィキペディア参照]

OSI参照モデル（OSIさんしょうモデル、英: OSI reference model）は、コンピュータネットワークで利用されている多数のプロトコルについて、それぞれの役割を分類し、明確化するためのモデルである[1]。国際標準化機構(ISO)によって策定された。OSI基本参照モデル、OSIモデルなどとも呼ばれ、通信機能（通信プロトコル）を7つの階層に分けて定義している。
レイヤー構成
- 第7層 - アプリケーション層[6]
  具体的な通信サービス（例えばファイル・メールの転送、遠隔データベースアクセスなど）を提供。HTTPやFTPなどの通信サービス。
- 第6層 - プレゼンテーション層
  データの表現方法（例えばEBCDICコードのテキストファイルをASCIIコードのファイルへ変換する）。
- 第5層 - セッション層
  通信プログラム間の通信の開始から終了までの手順（例えば接続が途切れた場合、接続の回復を試みる）。
- 第4層 - トランスポート層
  ネットワークの端から端までの通信管理（エラー訂正、再送制御など）。
- 第3層 - ネットワーク層
  ネットワークにおける通信経路の選択（ルーティング）。データ中継。
- 第2層 - データリンク層
  直接的（隣接的）に接続されている通信機器間の信号の受け渡し。
- 第1層 - 物理層
  物理的な接続。コネクタのピンの数、コネクタ形状の規定など。銅線-光ファイバ間の電気信号の変換など。
Ｑ&Ａ答え：２

ワイヤーフレーム [ウィキペディア参照]

ワイヤーフレーム (wire frame) とは、3次元形状のモデリングやレンダリングの手法のひとつで、立体の辺だけから成るような線の集合で表現するものである。

3DCG作成ソフト等でリアルタイム・インタラクティブなレンダリング結果など、ワイヤーフレームを利用した透視図がよく利用されている。
Ｑ&Ａ答え：２
CSS は実際にはどう機能するのか？ [Mozilla参照]

ブラウザーがドキュメントを表示するとき、ブラウザーはそのコンテンツをスタイル情報と結合する必要があります。以下にリストしたいくつかの段階でドキュメントが処理されます。これはブラウザーがウェブページを読み込むときに起こることを単純化したものであり、各ブラウザーで処理は異なるものの、おおよそ何が起こるかを示しています。
1. ブラウザーが HTML をロードします（ネットワークから受信するなど）。
2. HTML が DOM (Document Object Model) に変換されます。DOM はコンピューターのメモリー内のドキュメントです。次のセクションで詳述します。
3. その後ブラウザーは埋め込まれた画像やビデオなどの HTML ドキュメントにリンクされているリソースと CSS を取得します。JavaScript はもう少し後に処理されるため、ここでは簡略化のため説明しません。
4. ブラウザーは取得した CSS を解析し、要素、クラス、ID などセレクタの種類ごとに分類します。見つけたセレクターに基づいて、DOM のどのノードにどのルールを適用するかを決定し、スタイルを適用します（この中間ステップはレンダーツリーと呼ばれます）。
5. レンダーツリーは、ルール適用後の構造にレイアウトされます。
6. ページが画面に表示されます（この段階はペイントと呼ばれます）。
ブラウザーが解釈できない CSS に遭遇したらどうなるのか？ [Mozilla参照]

ブラウザーがルールを解析しているときに、理解できないプロパティまたは値に遭遇した場合、ブラウザーはそれを無視して次の宣言に進みます。こういうことは、プロパティまたは値のスペルが間違っている場合や、プロパティまたは値が新しすぎてブラウザーがまだサポートしていない場合に起こりえます。

同様に、ブラウザーが理解できないセレクターを検出した場合もそのルール全体を無視し、次のルールに進みます。
Ｑ&Ａ答え：４

ナビゲーションセクション要素 [Mozilla参照]

HTML の <nav> 要素は、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。
Ｑ&Ａ答え：３

子結合子 [Mozilla参照]
子結合子 (child combinator) (>) は 2 つの CSS セレクターの間に配置されます。 2 つ目のセレクターが 1 つ目のセレクターの直接の子要素の場合にのみ一致します。
構文
セレクター1 > セレクター2 { スタイルプロパティ }
Ｑ&Ａ答え：１
DoS攻撃 [Mozilla参照]

DoS (Denial of Service) は、大量のリクエスト送信によりサーバーの適正なリソース使用を妨げるネットワーク攻撃手法です。
DoS 攻撃の手法
- 帯域幅攻撃
- リクエストフラッド攻撃
- SYN フラッド攻撃
- ICMP フラッド攻撃
- ピア・ツー・ピアネットワークへの攻撃
- PDoS 攻撃
- アプリケーションレイヤー攻撃
Ｑ&Ａ答え：１

JPEG [ウィキペディア参照]

一般的に非可逆圧縮の画像フォーマットとして知られている。可逆圧縮形式もサポートしているが、可逆圧縮は特許などの関係でほとんど利用されていない。1992年9月18日に最初のリリースが行われた比較的古いフォーマットである。JPEGの欠点を克服すべく数々の後継規格が提案されてきたが、企業間の思惑なども絡み[要出典]、いずれも主流になるには至らず、JPEGが現在も静止画像規格の主流である
Ｑ&Ａ答え：１

明リスト要素 [Mozilla参照]

<dl> は HTML の要素で、説明リストを表します。この要素は、一連の用語（<dt> 要素を使用して指定）と説明（<dd> 要素によって提供）をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ（キーと値のペアのリスト）の表示が挙げられます。
Ｑ&Ａ答え：１

EventTarget.addEventListener() [Mozilla参照]

addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。

Event [Mozilla参照]

Event インターフェイスは DOM で発生するイベントを表します。

ユーザーの操作によって発生するイベント（マウスボタンのクリック、キーボードを叩くなど）もありますし、非同期タスクの進捗を表すための API によって生成されるイベントもあります。要素の HTMLElement.click() の呼び出しや、イベントを定義し、 EventTarget.dispatchEvent() を使用して指定されたターゲットに送信するなどのようにプログラムから起動されるものもあります。
Ｑ&Ａ答え：１

margin [Mozilla参照]

margin は CSS のプロパティで、要素の全四辺のマージン領域を設定します。

マージンの相殺
要素の上下のマージンは、相殺されて 2 つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくはマージンの相殺の習得を参照してください。

マージンの相殺の習得 [Mozilla参照]

ブロックの上端と下端のマージンは、それぞれのマージンの最も大きい寸法 (または等しい場合はいずれか 1 つ) の単一のマージンに結合される (折り畳まれる、collapsed) ことがあり、マージンの相殺という動作として知られています。なお、浮動要素と絶対位置指定要素では折り畳まれません。
Ｑ&Ａ答え：１

段落要素 [Mozilla参照]

HTML の <p> 要素は、テキストの段落を表します。視覚メディアにおいて、段落はふつう隣接するブロックと上下の空白や最初の行の字下げによって隔てられたテキストのブロックとして表現されますが、 HTML の段落は画像やフォーム欄などの関連するコンテンツを構造的にまとめることができます。
Ｑ&Ａ答え：４

カスケーディングスタイルシート [Mozilla参照]

カスケーディングスタイルシート (CSS) はスタイルシート言語であり、HTML や XML (方言である SVG、MathML、XHTML などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。 CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。
Ｑ&Ａ答え：２
アクセシビリティの基礎 [Mozilla参照]

正確な HTML要素が、常に正しい目的で使用されているかを確認するだけで、たくさんのウェブコンテンツがアクセシブルになります。ここでは、最大限のアクセシビリティを確保するために、HTML をどのように使用できるかについて詳しく説明します。

もしプロジェクトの最初から首尾一貫して意味的な HTML を書くならば、意味的な HTML を書く方が非意味的な (駄目な) マークアップを書くよりも長くなったりはしません。それに、意味的な HTML には、アクセシビリティ以外の他の利点もあります。
- より開発しやすい——上述のとおり、ある種の機能がただで手に入りますし、それに、より理解しやすいという点はまず間違いないところです。
- モバイル機器に関して、より優れている——意味的な HTML は非意味的なスパゲッティ・コードよりも、ファイルサイズの点でほぼ間違いなく軽量ですし、レスポンシブにするのも簡単です。
- SEO に関しても良好である——検索エンジンは、非意味的な <div> などに含まれるキーワードよりも、見出しやリンクなどの中のキーワードの方に重みを持たせているので、ドキュメントが顧客に見つけてもらいやすくなるでしょう。
Ｑ&Ａ答え：２

input要素 [Mozilla参照]

<input> の動作は type 属性の値に応じて大きく異なりますので、個別のリファレンスページでさまざまな型を扱っています。この属性を指定しない場合の既定の型は text です。
Ｑ&Ａ答え：３

段落要素 [ウィキペディア参照]

HTML の <p> 要素は、テキストの段落を表します。視覚メディアにおいて、段落はふつう隣接するブロックと上下の空白や最初の行の字下げによって隔てられたテキストのブロックとして表現されますが、 HTML の段落は画像やフォーム欄などの関連するコンテンツを構造的にまとめることができます。

span [Mozilla参照]

HTML の <span> 要素は、記述コンテンツの汎用的な行内コンテナーであり、何かを表すものではありません。スタイル付けのため (class または id 属性を使用して)、または lang のような属性値を共有したりするために要素をグループ化する用途で使用することができます。他に適切な意味的要素がない時にのみ使用してください。 <span> は <div> 要素ととても似ていますが、 <div> がブロックレベル要素であるのに対し、 <span> はインライン要素です。
Ｑ&Ａ答え：４

HTTPS [ウィキペディア参照]

HTTPSは、メッセージを平文のままで送受信する標準のHTTPと異なり、SSL/TLSプロトコルを用いて、サーバの認証・通信内容の暗号化・改竄検出などを行う。これによって、なりすまし・中間者攻撃・盗聴などの攻撃を防ぐことができる。HTTPSでは、ウェルノウンポート番号として443が使われる。
Ｑ&Ａ答え：２
順序なしリスト要素 [Mozilla参照]

HTML の <ul> 要素は、項目の順序なしリストを表します。一般的に、行頭記号を伴うリストとして描画されます。

タグの省略
不可。開始と終了タグの両方が必要。
type
- circle
- disc
- square
Ｑ&Ａ答え：２

代替テキスト [Mozilla参照]

テキストによるコンテンツは本質的にアクセシブルですが、マルチメディア・コンテンツについては必ずしも同じことが言えるわけではありません。画像 / 動画コンテンツは視覚障碍者には見えず、音声コンテンツは聴覚障碍者には聞こえません。動画と音声のコンテンツについては、アクセシブルなマルチメディアという記事で後に詳しく扱うことにしますが、本記事では、ごく普通の <img> 要素についてのアクセシビリティを見てゆきましょう。

考えるべきことの一つは、画像がコンテンツの内部で意味を持っているのか、あるいは、純粋に視覚的装飾のためのものであって意味は持たないのか、ということです。もし画像が装飾用であれば、その画像を CSS 背景画像としてページ内に含めるだけにする方が良いのです。
空の代替テキスト [Mozilla参照]
```
<h3>
  <img src="article-icon.png" alt="">
  ティラノサウルス・レックス: 恐竜の王
</h3>
```
画像がページのデザインに含まれるけれども、主目的は視覚的装飾である、といった場合もあるかもしれません。上記のコード例において、画像の alt 属性が空であることにお気づきでしょう。これは、スクリーンリーダーに画像を認識させるものですが、その画像を説明しようとさせるものではありません (説明する代わりに、スクリーンリーダーは、単に「画像」とか何とか言うでしょう)。

alt を含めないようにする代わりに空の alt を用いる理由は、alt が与えられていない場合には多くのスクリーンリーダーが画像の URL を丸々全部発声するからです。上記の例において画像は、その画像が結びつけられている見出しに対する視覚的装飾として機能しています。このような場合、および、画像が単に装飾にすぎず中身の価値がない場合には、画像に空の alt を入れるべきです。別の選択肢は、role="presentation" という ARIA role 属性を使うことです。こうすることによっても、スクリーンリーダーに代替テキスト (alt テキスト) を読み上げるのをやめさせることができます。

R03_1-3級_復習→

Nu Html Checker

【実技試験科目及びその範囲】

ウェブサイト構築

ウェブサイトデザイン

ウェブサイトデザイン

ウェブサイト運用管理

ウェブサイト運用管理

＜試験用 PC＞

＜アプリケーション＞

＜ブラウザ＞

試験要項(R02_4)

実技実技試験概要(PDF)

作業A

作業B

作業C

作業D

作業E

作業F

学科試験要項(学科・実技共通)(PDF)

Ｑ&Ａ答え：１

Ｑ&Ａ答え：１

Ｑ&Ａ答え：１

サイバーセキュリティ基本法

Ｑ&Ａ答え：２

Ｑ&Ａ答え：２

Ｑ&Ａ答え：２

Ｑ&Ａ答え：２

Ｑ&Ａ答え：２

Ｑ&Ａ答え：２

Ｑ&Ａ答え：２

Ｑ&Ａ答え：４

Ｑ&Ａ答え：３

Ｑ&Ａ答え：１

Ｑ&Ａ答え：１

Ｑ&Ａ答え：１

Ｑ&Ａ答え：１

Ｑ&Ａ答え：１

Ｑ&Ａ答え：１

Ｑ&Ａ答え：４

Ｑ&Ａ答え：２

Ｑ&Ａ答え：２

Ｑ&Ａ答え：３

Ｑ&Ａ答え：４

Ｑ&Ａ答え：２

Ｑ&Ａ答え：２