練習問題れんしゅうもんだいの答こたえと理由りゆう

Practice Questions: Answers and Notes

本ほんの各章かくしょうの最後さいごにある「答こたえと理由りゆう」と同おなじ内容ないようです。先生用せんせいようの採点さいてんの目安めやすは、ここには載のせません。

第だい1章しょう：Webページはどう届とどくか

自己じこチェック（1節せつ）

1. Webページはブラウザに表示ひょうじされる一ひとつの文書ぶんしょです。Webサイトは関連かんれんする複数ふくすうのページや資源しげんをまとめたものです。
2. ブラウザです。URLを使つかって資源しげんを要求ようきゅうします。
3. 応答おうとうの内容ないようを読よみ、画面がめんに表示ひょうじします。

自己じこチェック（2節せつ）

1. Web文書ぶんしょの内容ないようと構造こうぞうです。
2. CSSです。
3. あります。HTMLで内容ないようを書かき、CSSで見みた目めを整ととのえるページを表示ひょうじできます。
4. ボタン操作そうさへの応答おうとうなど、動うごきや操作そうさに合あわせた処理しょりを加くわえるときです。

確認問題かくにんもんだい

1. Q1　正答せいとうはAです。ブラウザはURLを使つかって資源しげんを要求ようきゅうし、応答おうとうを画面がめんに表示ひょうじします。Bはサーバーが画面がめんを直接操作ちょくせつそうさするとしており、CはHTMLとCSSの役割やくわりが逆ぎゃくです。DはJavaScriptを表示ひょうじの必須条件ひっすじょうけんとしていますが、HTML文書ぶんしょはJavaScriptなしでも表示ひょうじできます。

2. Q2　正答せいとうはCです。HTMLは構造こうぞう、CSSは見みた目め、JavaScriptは操作そうさへの応答おうとうを主おもに担当たんとうします。AはCSSとJavaScriptの役割やくわりを入いれ替かえ、BはJavaScriptを表示ひょうじに必須ひっすとしています。DはHTMLとCSSの役割やくわりを逆ぎゃくにし、JavaScriptをリンク先さきの指定していに使つかうとしています。

3. Q3　正答せいとうはBです。CSSは見出みだしの役割やくわりや文章ぶんしょうを保たもちながら色いろを指定していできます。AはHTMLに文字色もじいろの指定していをさせ、Cは文章変更ぶんしょうへんこうと色いろの指定していを混同こんどうしています。DはURLの取得方法しゅとくほうほうと表示色ひょうじいろを結むすびつけています。

4. Q4　正答せいとうはDです。HTMLは内容ないようと構造こうぞうを示しめし、CSSは表示ひょうじや配置はいちを整ととのえます。CSSが適用てきようされなくても、HTMLの文章ぶんしょうを読よめる場合ばあいがあります。AはCSSが読よめないと文章ぶんしょうも読よめないとしています。BはHTMLとCSSの役割やくわりを逆ぎゃくにしています。CはJavaScriptを表示ひょうじに必須ひっすとしています。

練習れんしゅう

練習れんしゅう1-1の完成例かんせいれい

矢印図やじるしずの例れい：ブラウザ → 要求ようきゅう → サーバー → 応答おうとう → ブラウザ → 表示ひょうじ → 画面がめん。ブラウザからサーバーへ要求ようきゅうし、サーバーからブラウザへ応答おうとうする向むきが合あっているか確認かくにんします。HTML・CSS・JavaScriptは同おなじ働はたらきではなく、内容ないようと構造こうぞう、表示ひょうじ、操作そうさへの応答おうとうを分担ぶんたんします。

考かんがえよう・グループで話はなそう

考かんがえようの例れいでは、HTMLで開催日かいさいびや会場かいじょうを記述きじゅつし、CSSで文字もじや情報じょうほうの間隔かんかくを整ととのえます。読よむだけの案内あんないならJavaScriptは必須ひっすではありません。グループ活動かつどうでは、読よむ人ひと、最初さいしょに示しめす情報じょうほう、その順じゅんにする理由りゆう、三みっつの言語げんごの役割やくわりを説明せつめいできているかを確認かくにんします。別べつの案あんでも、目的もくてきと役割やくわりが合あえば認みとめます。

ワークシート1-1

記入例きにゅうれいは「読よむ人ひと：学校がっこうを知しりたい人ひと」「最初さいしょに知しりたい情報じょうほう：開催日かいさいびと会場かいじょう」です。自分じぶんの案あんは、読よむ人ひと・目的もくてき・必要ひつような情報じょうほう・確認かくにんする相手あいてが書かかれているか、HTML・CSS・JavaScriptの役割やくわりと使つかう理由りゆうが合あっているかを確たしかめます。JavaScriptを使つかわない案あんも、目的もくてきに照てらした説明せつめいがあればよいでしょう。

第だい2章しょう：HTMLの要素ようそとタグ

自己じこチェック（1節せつ）

1. Web文書ぶんしょの内容ないようと構造こうぞうです。
2. ファイルを保存ほぞんしてから、ブラウザを再さい読よみ込こみします。
3. body要素ようそです。ページに表示ひょうじする内容ないようを置おきます。

自己じこチェック（2節せつ）

1. <h1>と</h1>がタグです。開始かいしタグ・内容ないよう・終了しゅうりょうタグを合あわせた全体ぜんたいが見出みだし要素ようそです。
2. hrefは属性名ぞくせいめいで、program.htmlは属性値ぞくせいあたいです。Programは要素ようその内容ないようで、画面がめんに表示ひょうじされるリンク文字もじです。
3. 文字もじの大おおきさではなく、文書内ぶんしょないの内容ないようの親子関係おやこかんけいで選えらびます。見みた目めの調整ちょうせいにはCSSを使つかいます。
4. ulでリストを作つくり、その中なかの各項目かくこうもくをliで表あらわします。
5. 相対そうたいパスです。現在げんざいの文書ぶんしょと同おなじフォルダーを基準きじゅんに、別べつのファイルの場所ばしょを示しめします。

確認問題かくにんもんだい

1. Q1　正答せいとうはBです。aはリンク要素ようそ、hrefは属性名ぞくせいめい、program.htmlは属性値ぞくせいあたいで、Programは要素ようその内容ないようです。Aは要素名ようそめい・属性名ぞくせいめい・値あたい・内容ないようを取とり違ちがえています。Cは属性名ぞくせいめいと属性値ぞくせいあたいを取とり違ちがえています。Dはリンク文字もじを要素ようその内容ないように置おけることと、相対そうたいURLを使つかえることを否定ひていしています。

2. Q2　正答せいとうはDです。ulは順序じゅんじょを示しめさないリスト、liはその各項目かくこうもくです。Aは見出みだしと段落だんらくの並ならびで項目こうもくを示しめし、リストの意味いみを表あらわしていません。Bは順序じゅんじょ付つきのolを選えらび、見みた目めだけを変更へんこうしています。Cは段落だんらくを続つづけてもリストの意味いみにはならない点てんを見落みおとしています。

3. Q3　正答せいとうはCです。内側うちがわのstrongを先さきに閉とじ、その後あとに外側そとがわのpを閉とじます。Aは外側そとがわの要素ようそを内側うちがわより先さきに閉とじます。Bはstrongの終了しゅうりょうタグを省はぶいています。Dはpの終了しゅうりょうタグだけで内側うちがわのstrongまで閉とじられると誤解ごかいしています。

4. Q4　正答せいとうはCです。見出みだし、段落だんらく、リスト項目こうもくをそれぞれの要素ようそで表あらわし、liをulの中なかに置おいています。Aはliより先さきにulを閉とじています。Bはpの途中とちゅうでh1を閉とじ、要素ようその範囲はんいが交差こうさしています。Dはliをリスト要素ようその外そとに置おいています。

5. Q5　正答せいとうはAです。hrefにprogram.htmlを書かくと、現在地げんざいちを基準きじゅんにする相対そうたいパスになります。Bは相対そうたいパスを絶対ぜったいURLと呼よんでいます。Cでは表示用ひょうじようのリンク文字もじを属性値ぞくせいあたいの位置いちに置おいており、ファイル名めいを指定していしていません。Dはa要素ようその内容ないようだけでは移動先いどうさきを指定していできず、href属性ぞくせいが必要ひつようです。

練習れんしゅう

練習れんしゅう2-1の完成例かんせいれい

<h1>Open Campus</h1>
<p>Choose one event to explore.</p>
<ul>
  <li>Campus tour</li>
  <li>Design class</li>
  <li>Science show</li>
</ul>
<p><a href="program.html">See the program</a></p>

h1はページの題だい、pは案内文あんないぶん、ulとliは順不同じゅんふどうのイベント、aとhrefはリンクを表あらわします。href属性値ぞくせいあたいがprogram.htmlで、リンク文字もじは「See the program」です。開始かいしタグと終了しゅうりょうタグが対応たいおうし、リストの項目こうもくがulの内側うちがわに入はいっていれば、別べつの架空かくうイベント名めいでも正答せいとうです。

考かんがえよう・グループで話はなそう

説明文せつめいぶんはpで表あらわし、ページ全体ぜんたいの題だいにはh1を使つかいます。見出みだし要素ようそは文字もじを大おおきくするためでなく、内容ないようの階層かいそうを示しめすために選えらびます。行事ぎょうじの順じゅんに意味いみがあればol、自由じゆうに選えらべる項目こうもくならulが合あいます。リンク文字もじには、移動後いどうごに何なにを見みられるかが分わかる言葉ことばを使つかいます。別べつの例れいでも内容ないようと要素ようその役割やくわりが合あっていれば認みとめます。

ワークシート2-1

穴埋あなうめの答こたえは順じゅんにh1、href、ul、liです。記入例きにゅうれいは、ページの題だい、説明段落せつめいだんらく、三みっつの順不同じゅんふどうの項目こうもく、詳細しょうさいページのリンクを対応たいおうさせています。自分じぶんの案あんでは、ulの中なかに三みっつのliがあり、a要素ようそのhref属性ぞくせいに移動先いどうさきがあることを確たしかめます。

第だい3章しょう：文書ぶんしょを意味いみで組くみ立たてる

自己じこチェック（1節せつ）

1. mainは、そのページの中心ちゅうしんとなる内容ないようを示しめします。
2. ページ内ないや別べつのページへの、主要しゅような案内あんないリンクです。
3. sectionは一ひとつの主題しゅだいに関係かんけいする内容ないようをまとめます。divは特別とくべつな意味いみを加くわえない汎用はんようの箱はこです。
4. 置おけます。ページ全体ぜんたいだけでなく、記事きじや節ふしの導入どうにゅうをまとめる場合ばあいもあります。

自己じこチェック（2節せつ）

1. h1はページの題名だいめい、h2は大おおきな主題しゅだい、h3はその下したの話題わだいを表あらわす例れいがあります。
2. 主題しゅだいとその下したの話題わだいの間あいだにある段階だんかいが抜ぬけ、話題わだいの関係かんけいを追おいにくくなります。
3. いいえ。見出みだしの段階だんかいは、話題わだいのつながりを考かんがえて選えらびます。
4. 話題わだいの関係かんけいに合あう見出みだし要素ようそを選えらび、文字もじの大おおきさはCSSで調整ちょうせいします。

確認問題かくにんもんだい

1. Q1　正答せいとうはCです。mainはページの中心ちゅうしんとなる内容ないようを示しめします。Aはsectionを主内容しゅないようと同おなじ役割やくわりにしています。Bはheaderの役割やくわりを見みた目めの大おおきさと混同こんどうしています。Dはfooterとnavの役割やくわりを取とり違ちがえています。

2. Q2　正答せいとうはAです。HTML要素ようその役割やくわりは、CSSで表示ひょうじを調整ちょうせいしても保たもてます。Bはsectionとdivの役割やくわりを同おなじとし、主題しゅだいのまとまりを表あらわすかどうかの違ちがいを見落みおとしています。Cは意味要素いみようその役割やくわりをCSSに依存いぞんさせています。Dはsectionとdivを同おなじ意味いみとし、見出みだしが常つねに必要ひつようだとしています。

3. Q3　正答せいとうはBです。授業紹介じゅぎょうしょうかいと参加方法さんかほうほうがそれぞれ主題しゅだいのまとまりなら、見出みだしを付つけたsectionをmainに置おけます。Aはページや節ふしの導入どうにゅうを示しめすheaderに内容ないようをまとめています。Cは末尾まつびの補足ほそくを置おくfooterに中心内容ちゅうしんないようを入いれています。Dは案内あんないリンクを示しめすnavを、リンクではない説明せつめいのまとまりに使つかっています。

4. Q4　正答せいとうはDです。ページの題名だいめいから主題しゅだい、その下したの話題わだいへと段階だんかいを進すすめています。Aは主題しゅだいとその下したの話題わだいの順じゅんが逆ぎゃくです。Bは見出みだしの意味いみを見みた目めで代用だいようしています。Cはsectionを入いれ子こにしても見出みだしを付つけない理由りゆうになりません。

練習れんしゅう

練習れんしゅう3-1の完成例かんせいれい

授業紹介じゅぎょうしょうかいと参加方法さんかほうほうの二ふたつのsectionをmainで囲かこみます。ページ全体ぜんたいのheader、nav、footerはmainの外そとに置おきます。navにはそれぞれへのリンクを置おきます。授業紹介じゅぎょうしょうかいの中なかに持もち物ものの話題わだいがあれば、同おなじ主題しゅだいの内側うちがわにsectionを置おき、h3で示しめせます。

考かんがえよう・グループで話はなそう

授業紹介じゅぎょうしょうかいはh2の主題しゅだいにします。その中なかの「持もち物もの」はh3で示しめします。この主題しゅだいと下したの話題わだいの関係かんけいを説明せつめいできればよいでしょう。グループでは、移動先いどうさきへの案内あんないリンクと、ページの中心内容ちゅうしんないようを区別くべつできているかを確たしかめます。別べつの構造こうぞうでも、要素ようその役割やくわりを説明せつめいできていれば認みとめます。

ワークシート3-1

穴埋あなうめの答こたえ

ページの主要内容しゅようないようはmain、一ひとつの主題しゅだいのまとまりはsectionです。

HTMLの完成例かんせいれい

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Open Campus</title>
</head>
<body>
  <header><h1>Open Campus</h1></header>
  <nav><a href="#classes">Classes</a> <a href="#visit">Visit</a></nav>
  <main>
    <section id="classes"><h2>Classes</h2><p>Try a design class.</p></section>
    <section id="visit"><h2>Visit</h2><p>Check the meeting place before you come.</p></section>
  </main>
  <footer><p>Contact the school office.</p></footer>
</body>
</html>

採点さいてんの目安めやす

各観点かくかんてん1点てん、合計ごうけい4点てんです。

記入例きにゅうれいでは、ページの主要内容しゅようないようをmainにし、授業紹介じゅぎょうしょうかいと参加方法さんかほうほうを見出みだし付つきのsectionにしています。自分じぶんの図ずも、navとmainの関係かんけい、mainとsectionの関係かんけい、見出みだしの階層かいそうが分わかるかを確認かくにんします。

第だい4章しょう：画像がぞう・表ひょう・フォームを使つかう

自己じこチェック（1節せつ）

1. src属性ぞくせいには画像がぞうファイルの場所ばしょを書かきます。
   
2. 例れいは「Library building entrance」のように、画像がぞうが伝つたえる場所ばしょを短みじかく書かけます。
   
3. alt=""と書かきます。空そらのalt属性ぞくせいを置おきます。
   
4. 開催日時かいさいにちじなど、行事ぎょうじに必要ひつような情報じょうほうをページの文章ぶんしょうにも書かきます。

自己じこチェック（2節せつ）

1. 表ひょうの題だいや、どのようなデータかを書かきます。例れいは「Tour schedule」です。
   
2. th要素ようそで表あらわします。
   
3. id属性ぞくせいです。forとidの値あたいを同おなじにします。
   
4. いいえ。既定きていの送信そうしんボタンがdisabledのため、クリックでも入力欄にゅうりょくらんのEnterキーでも送信そうしんしません。

確認問題かくにんもんだい

1. Q1　正答せいとうはDです。画像がぞうが伝つたえる情報じょうほうを短みじかくaltに示しめし、周囲しゅういの本文ほんぶんと同おなじ説明せつめいを重かさねないようにします。Aはファイル名めいだけでは画像がぞうの内容ないようが分わからないことがあります。Bは本文ほんぶんとaltに同おなじ文ぶんを常つねに重かさねています。Cは画像がぞうごとの役割やくわりを考かんがえていません。

2. Q2　正答せいとうはBです。captionで表ひょうの題だいを示しめし、thに見出みだし、tdにデータを入いれます。Aはデータ表ひょうをページ配置はいちに使つかっています。Cは見出みだしの役割やくわりをtdや色いろだけで表あらわしています。Dは表ひょうの行ぎょう・列れつの関係かんけいを画像がぞうだけにして、データとして示しめしていません。

3. Q3　正答せいとうはAです。labelのforとinputのidを同おなじ値あたいにすると、説明せつめいと入力欄にゅうりょくらんが関連かんれん付づけられます。Bはnameを画面上がめんじょうの説明せつめいとの関連かんれん付づけに使つかっています。Cはlabelと入力欄にゅうりょくらんの属性ぞくせいを逆ぎゃくにしています。Dは入力にゅうりょくの種類しゅるいを表あらわすtypeを関連かんれん付づけに使つかっています。

4. Q4　正答せいとうはCです。時刻じこくと行事内容ぎょうじないようは行ぎょうと列れつで関係かんけいを持もつデータなので、HTMLの表ひょうで示しめせます。A・B・Dはページの領域りょういき、余白よはく、カードの並ならびを整ととのえる用途ようとです。表ひょうではなくCSSで配置はいちします。

練習れんしゅう

練習れんしゅう4-1

練習れんしゅう4-1の完成例かんせいれい

画像がぞうの代替だいたいは、画像がぞうを見みられないときに何なんの情報じょうほうが必要ひつようかで考かんがえます。表ひょうは題だい、列れつ見出みだし、値あたいの関係かんけいを要素ようそで示しめします。フォームは説明せつめいと入力欄にゅうりょくらんを同おなじ値あたいで関連かんれん付づけます。

考かんがえよう・グループで話はなそう

考かんがえようの例れいでは、本文ほんぶんに開催日時かいさいにちじを文字もじで書かきます。altには画像がぞうの役割やくわりに合あった説明せつめいを書かき、日時にちじを本文ほんぶんに示しめしているなら同おなじ日時にちじを重かさねません。日時にちじを示しめすことが画像がぞうの主おもな役割やくわりなら、altにその情報じょうほうを含ふくめる場合ばあいもあります。グループで話はなすときは、比くらべたい値あたいが行ぎょうと列れつで見みつかること、見出みだしが色いろだけに頼たよらず分わかることを確たしかめます。

ワークシート4-1

穴埋あなうめの答こたえ

idです。

HTMLの完成例かんせいれい

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Campus tour</title></head>
<body><main><h1>Campus tour</h1><p>May 10, 10:00. Meet at the library entrance.</p>
<img src="campus-map.svg" alt="Map showing the library with its entrance marked at the lower middle of the building">
<table><caption>Tour schedule</caption><thead><tr><th scope="col">Time</th><th scope="col">Event</th></tr></thead><tbody><tr><td>10:00</td><td>Welcome</td></tr><tr><td>11:00</td><td>Library</td></tr></tbody></table>
<form><label for="email">Email</label><input id="email" name="email" type="email"><button type="submit" disabled>Send</button></form>
</main></body></html>

採点さいてんの目安めやす

各観点かくかんてん1点てん、合計ごうけい5点てんです。実在じつざいする個人情報こじんじょうほうを含ふくめず、短みじかい英語えいごの架空かくうの案内あんないで作つくります.

第だい5章しょう：CSSで文字もじと余白よはくを整ととのえる

自己じこチェック（1節せつ）

1. HTMLのheadの中なかです。link要素ようそで外部がいぶCSSの場所ばしょを指定していします。
   
2. class="notice"を持もつ要素ようそです。CSSのclassセレクターは先頭せんとうに点てんを付つけます。
   
3. colorはプロパティ、#19324aは値あたいです。
   
4. この例れいでは、後あとに書かかれた宣言せんげんの値あたいです。同おなじ対象たいしょう・同おなじ詳細度しょうさいどという前提ぜんていに限かぎった説明せつめいです。

2節せつ

1. 文字もじの大おおきさを指定していします。
   
2. 行ぎょうの高たかさが変かわり、行ぎょうと行ぎょうの間隔かんかくを調整ちょうせいできます。
   
3. paddingです。
   
4. 276pxです。240＋16＋16＋2＋2を計算けいさんします。
   
5. borderの外側そとがわです。隣となりの箱はことの間隔かんかくなどに使つかいます。

確認問題かくにんもんだい

1. Q1　正答せいとうはAです。.noticeはclassセレクター、colorは色いろを指定していするプロパティ、#19324aはその値あたいです。Bはセレクターと値あたいの位置いちが違ちがいます。Cは三みっつの役割やくわりが入いれ替かわっています。DはCSSの指定していをHTMLの要素ようそ・属性ぞくせい・リンク先さきと混同こんどうしています。

2. Q2　正答せいとうはBです。content幅はば240pxに左右さゆうpaddingとborderを加くわえて276pxです。Aは左右両側さゆうりょうがわを足たしていません。Cはborderを加くわえていません。Dはmargin込ごみの幅はばで、問といの範囲はんいを超こえています。

3. Q3　正答せいとうはCです。文字もじと背景はいけいの色いろの差さが小ちいさいことが原因げんいんなので、色いろの差さを大おおきくすると文字もじを読よみ取とりやすくなります。Aは文字もじを大おおきく・太ふとくしても、色いろが近ちかい問題もんだいは残のこります。Bは行ぎょうと行ぎょうの間あいだや余白よはくを広ひろげても、文字もじと背景はいけいの見分みわけにくさは変かわりません。Dはカードどうしの間隔かんかくや外側そとがわの余白よはくを広ひろげても、文字もじの見みえにくさは直なおりません。

4. Q4　正答せいとうはDです。border-boxではwidthにpaddingとborderを含ふくむため、content幅はばは240－16－16－2－2＝204pxです。Aはwidthをcontent幅はばと取とり違ちがえています。Bはcontent-boxの外端がいたんを求もとめています。Cは左右さゆうmarginまでwidthに含ふくむとしています。

練習れんしゅう

練習れんしゅう5-1

見出みだしのCSSはh1 { color: #19324a; }です。カードの内側うちがわの余白よはくは.notice { padding: 1rem; }です。書かき方かたが異ことなっても、対象たいしょう、プロパティ、値あたいが正ただしく分わかれ、目的もくてきの要素ようそに適用てきようされれば合あっています。

練習れんしゅう5-2

1. 境界線きょうかいせんの外端がいたんまで：240＋16＋16＋2＋2＝276px。
   
2. margin込こみ：276＋20＋20＝316px。

二ふたつの幅はばを区別くべつし、式しきも正ただしければできています。

考かんがえよう・グループで話はなそう

考かんがえように唯一ゆいいつの答こたえはありません。「注意ちゅうい」などの文字もじを添そえ、色いろが見分みわけにくくても内容ないようが伝つたわる理由りゆうを書かきます。グループではcontent-boxの幅はば、padding、border、marginを分わけて式しきで示しめします。

ワークシート

ワークシート5-1の空欄くうらんは、上うえから「文字色もじしょく」「内容ないようと境界線きょうかいせんの間あいだの余白よはく」「箱はこの境界線きょうかいせん」です。ページ作成さくせいでは、色いろ・文字もじサイズ・行間ぎょうかん・余白よはくを設定せっていし、classの対象たいしょうがHTMLと一致いっちすることを確たしかめます。ルール表ひょうと、ブラウザで表示ひょうじを確認かくにんしたHTML・CSSの両方りょうほうがそろえば完成かんせいです。

ワークシート5-2はpadding32px、border4px、外端がいたん276px、margin40px、margin込こみ316pxです。content-boxの各部分かくぶぶんを分わけていれば合あっています。

第だい6章しょう：FlexboxとGridで配置はいちする

自己じこチェック（1節せつ）

1. 並ならべたい子項目ここうもくを含ふくむ親要素おやようそです。子こごとにdisplay: flexを付つけるのではありません。
2. 交差軸こうさじくです。主軸しゅじくと交差こうさする方向ほうこうを指さします。
3. flex-wrap: wrapです。横幅よこはばに入はいらない項目こうもくは次つぎの行ぎょうへ移うつります。

自己じこチェック（2節せつ）

1. 親要素おやようそです。親おやをGridコンテナーにして、子この項目こうもくを同おなじ列れつの仕組しくみに配置はいちします。
2. grid-template-columnsです。親おやのGridコンテナーに列れつトラックを指定していします。
3. 2列れつになります。repeat()の数かずが繰くり返かえす列指定れつしていの数かずだからです。
4. はい。flex-wrap: wrapで次つぎの行ぎょうへ送おくれます。Gridのように複数行ふくすうぎょうの列境界れつきょうかいを共通きょうつうに定義ていぎする用途ようととは異ことなります。

確認問題かくにんもんだい

1. Q1　正答せいとうはCです。

Flexboxは一方向いちほうこうに項目こうもくを並ならべ、項目こうもくが使つかえる空間くうかんに応おうじて伸縮しんしゅくできる方式ほうしきです。AのGridでも一列いちれつに並ならべられますが、空あき幅はばを使つかわず間隔かんかくを固定こていする設定せっていという条件じょうけんが用途ようとに合あいません。Bは子こごとに指定していするため、項目こうもくどうしを一ひとつの並ならびにまとめられません。Dはナビを表ひょうで組くむ誤あやまりです。

2. Q2　正答せいとうはDです。

Gridでは親おやにdisplay: gridを指定していします。列れつは親おやのgrid-template-columnsで決きめます。gapで間隔かんかくを作つくります。Aはmarginだけで行列ぎょうれつの列境界れつきょうかいを共有きょうゆうしません。Bは折返おりかえしができても、複数ふくすうのFlexboxの行ぎょうが共通きょうつうの列れつトラックを使つかうとは限かぎりません。Cは列れつの指定先していさきを各かくカードに置おき、親おやにGridを指定していしていません。

3. Q3　正答せいとうはAです。

gapはFlexboxやGridの子項目ここうもくの間隔かんかくを指定していします。Bは文字色もじしょく、Cは文字もじの大おおきさ、Dは要素ようその内側うちがわの余白よはくを指定していするプロパティで、項目こうもくどうしの間隔かんかくを作つくるものではありません。

4. Q4　正答せいとうはAです。

親おやにflex-wrap: wrapを指定していすると、子項目ここうもくを一行いちぎょうに収おさめられないとき次つぎの行ぎょうへ折おり返かえせます。BはGridの列指定れつしてい、Cは交差軸上こうさじくじょうの配置はいち、Dは子項目ここうもくに指定していして、親おやの並ならべ方かたを取とり違ちがえています。

練習れんしゅう

1. 一例いちれいとして、ナビゲーションはFlexboxです。一方向いっぽうむきに流ながれるリンクをまとめます。折おり返かえす関連かんれんリンクもFlexboxで配置はいちできます。6枚まいのカードはGridです。複数行ふくすうぎょうの列境界れつきょうかいをそろえるためです。別べつの方式ほうしきでも、折返おりかえしや列境界れつきょうかいの理由りゆうを説明せつめいできれば認みとめます。
2. 親要素おやようそにdisplay: gridとgrid-template-columnsを置おきます。.cardが一覧いちらんの親おやならこのクラス名めいで構かまいませんが、.cardが各かくカードを示しめすなら、カードを囲かこむ要素ようそを選えらびます。
3. 例れい：.event-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }。.event-listは6枚まいのカードをまとめる親おやです。

考かんがえよう・グループで話はなそう

正解せいかいは一ひとつに限かぎりません。どの方向ほうこうに項目こうもくが流ながれるか、行ぎょうをまたぐ列境界れつきょうかいが必要ひつようかを理由りゆうに含ふくめます。画面幅がめんはばや内容ないようが変かわる可能性かのうせいを考かんがえ、ブラウザで項目こうもくの順番じゅんばん、折返おりかえし、列数れつすう、すき間まを確認かくにんする手順てじゅんを書かけていればよいでしょう。

ワークシート6-1

• Flexboxを使つかう親おや：nav.site-nav。子こは三みっつのリンクです。
• Gridを使つかう親おや：section.event-list。子こは六むっつのカードです。
• Flexbox：親おやにdisplay: flexを指定していします。gapで間隔かんかくを作つくります。折返おりかえしにはflex-wrap: wrapを使つかいます。
• Grid：親おやにdisplay: gridを指定していします。列れつはgrid-template-columnsで決きめます。
• 確認点かくにんてん：ナビの全項目ぜんこうもくが読よめること、カードが3列れつ×2行ぎょうになり列境界れつきょうかいがそろうこと、読よむ順じゅんがHTMLの順じゅんと合あうこと。

第だい7章しょう：小ちいさい画面がめんから考かんがえる

自己じこチェック（1節せつ）

1. ブラウザでWebページの内容ないようを表示ひょうじできる領域りょういきです。
   
2. 表示領域ひょうじりょういきを端末たんまつの画面幅がめんはばに合あわせる情報じょうほうを伝つたえられます。
   
3. カードの右端みぎはしが画面がめんの外そとへ出でて、横おうスクロールが必要ひつようになりやすいです。
   
4. 画像がぞうの縦横たてよこの比ひです。

2節せつ

1. 画面幅がめんはばなどの条件じょうけんです。
   
2. メディアクエリを適用てきようする条件値じょうけんあたいです。
   
3. 狭せまい幅はばでの表示ひょうじです。
   
4. いいえ。42remはこの章しょうの例れいであり、内容ないように合あわせて決きめます。

確認問題かくにんもんだい

1. Q1　正答せいとうはBです。viewport meta要素ようそは、表示領域ひょうじりょういきを端末たんまつの画面幅がめんはばに合あわせる情報じょうほうを示しめします。Aのように拡大操作かくだいそうさを禁止きんしする目的もくてきではありません。Cは画像がぞうの代替だいたいテキストと混同こんどうしています。DはメディアクエリをHTMLで実行じっこうするという誤あやまりです。
   
2. Q2　正答せいとうはAです。基本きほんを一列いちれつにし、幅はばの条件じょうけんに合あう場合ばあいに二列にれつを加くわえる設計せっけいです。Bは固定幅こていはばのはみ出だしを隠かくします。Cは狭せまい幅はばと広ひろい幅はばの切きり替かえが逆ぎゃくです。Dは機種きしゅごとの別べつページを作つくる説明せつめいで、同おなじページの幅はばに応おうじて表示ひょうじする考かんがえ方かたではありません。
   
3. Q3　正答せいとうはBです。CSSのメディアクエリで条件じょうけんと適用てきようするスタイルを指定していします。Aは列数れつすうを一列いちれつに限かぎるとしていますが、列数れつすうは条件じょうけんごとに指定していできます。Cは画面幅がめんはばをJavaScriptで読よみ取とる必要ひつようがあるとしていますが、CSSのメディアクエリは条件じょうけんに応おうじてスタイルを適用てきようできます。DはHTMLの要素ようそを幅はばに応おうじて入いれ替かえる説明せつめいです。
   
4. Q4　正答せいとうはCです。カード幅はばと親おやの幅はばを確認かくにんし、375 CSS pxに収おさまる基本きほんの配置はいちを作つくります。Aは文字もじを小ちいさくするだけで固定幅こていはばの問題もんだいが残のこります。Bは使つかいにくさを残のこし、他たの幅はばも確認かくにんしません。Dはviewport meta要素ようそを外はずす説明せつめいで、幅はばを柔軟じゅうなんにする修正しゅうせいになりません。

練習れんしゅう7-1

解答例かいとうれい

まず、カード自身じしんのwidth: 720pxを削除さくじょするか、width: autoに変かえます。必要ひつようなら同おなじカードにmin-width: 0;とbox-sizing: border-box;を加くわえます。次つぎに、head内うちに<meta name="viewport" content="width=device-width, initial-scale=1">を置おきます。カードの親おやにdisplay: gridとgrid-template-columns: 1frを指定していします。42rem以上いじょうの条件じょうけんをメディアクエリに書かきます。そこでgrid-template-columns: repeat(2, minmax(0, 1fr))を加くわえます。画像がぞうにはmax-width: 100%とheight: autoを指定していします。375 CSS pxでは一列いちれつ、800 CSS pxでは二列にれつになり、両方りょうほうとも横よこスクロールがないことを確認かくにんします。

狭せまい幅はばを基本きほんにし、広ひろい幅はばでは条件じょうけんを満みたすスタイルを追加ついかします。42remは教材例きょうざいれいです。別べつのページでは、見出みだしや本文ほんぶんが無理むりなく収おさまるかを調しらべて条件じょうけんを選えらびます。

採点さいてんの目安めやす

合計ごうけい10点てんです。CSSの記法きほうが少すこし異ことなる場合ばあいも、viewport・列数れつすう・画像幅がぞうはばの条件じょうけんが同おなじで、二ふたつの幅はばで確認かくにんできていれば評価ひょうかできます。

考かんがえよう・グループで話はなそう

考かんがえようでは、カードの文章ぶんしょうが読よみやすく収おさまる幅はばを調しらべてから、列数れつすうを切きり替かえる理由りゆうが書かけているかを見みます。画面がめんが広ひろくても二列にれつにする必要ひつようがない例れいを挙あげられます。

グループでは、横おうスクロールの有無うむだけでなく、見出みだしの折おり返かえしやカードの読よむ順じゅんも確認かくにんできているかを見みます。選えらんだ幅はばと、その幅はばを使つかう理由りゆうを説明せつめいできていれば合あっています。

ワークシート7-1

完成例かんせいれいでは、375 CSS pxを一列いちれつ、800 CSS pxを二列にれつにし、どちらも横よこはみ出だしがないことを記録きろくします。自分じぶんのページでは画面幅がめんはばを実際じっさいに設定せっていし、列数れつすう、画像がぞうの収おさまり、横おうスクロールを確たしかめてから書かきます。viewport欄らんは設定せっていした値あたいを記録きろくし、表示結果ひょうじけっかと混同こんどうしません。

第だい8章しょう：読よみやすい見みた目めを設計せっけいする

自己じこチェック（1節せつ）

1. 近接きんせつです。関係かんけいする情報じょうほうを近ちかくに置おいて、ひとまとまりに見みせます。
   
2. 整列せいれつです。共通きょうつうの線せんに要素ようその端はしを合あわせます。
   
3. 反復はんぷくです。同おなじ役割やくわりの要素ようそに、同おなじ見みた目めや配置はいちをくり返かえします。
   
4. 対比たいひです。題名だいめいと本文ほんぶんの大おおきさに差さを付つけ、重要度じゅうようどの違ちがいを示しめします。視覚的しかくてき階層かいそうにも関係かんけいします。

2節せつ

1. 「締切しめきり」などの文字もじと日付ひづけを加くわえます。必要ひつようなら枠わくや記号きごうも使つかいます。
   
2. 文字もじと背景はいけいの見分みわけやすさに関かかわる差さです。コントラストを確たしかめます。
   
3. 行ぎょうを目めで追おい、段落だんらくを読よみ続つづけられるかを画面がめんで見みます。
   
4. 見出みだしと説明せつめいを近ちかづけ、別べつのまとまりとの間あいだは少すこし広ひろくします。

確認問題かくにんもんだい

1. Q1　正答せいとうはDです。日時にちじと場所ばしょを関連情報かんれんじょうほうとして近ちかくに置おく近接きんせつと、見出みだしを共通きょうつうの線せんにそろえる整列せいれつを組くみ合あわせます。Aは見出みだしを大おおきくする対比たいひを使つかい、日時にちじと場所ばしょを離はなしています。Bは見出みだしをそろえますが、日時にちじと場所ばしょを別々べつべつの端はしへ離はなしています。Cは近接きんせつを使つかいますが、カードごとに見出みだしの形かたちと位置いちを変かえるため、整列せいれつが崩くずれます。
   
2. Q2　正答せいとうはCです。文字もじラベルや形かたちの手掛てがかりを色いろに加くわえると、色いろの違ちがいを見分みわけにくい場合ばあいにも締切しめきりを伝つたえられます。Aは文字もじが小ちいさく、背景はいけいとの明あかるさの差さも弱よわいままです。Bは文字もじラベルがあっても、期限きげんの日付ひづけを色いろだけで示しめしています。Dは日付ひづけと行事日ぎょうじひを並ならべても、どちらが締切しめきりかを赤色あかいろだけで区別くべつしています。
   
3. Q3　正答せいとうはDです。同おなじ役割やくわりの項目こうもくを同おなじ順じゅんに使つかう反復はんぷくです。Aは情報じょうほうを近ちかくに置おく近接きんせつ、Bは端はしを共通線きょうつうせんに置おく整列せいれつ、Cは文字もじの大おおきさの差さで役割やくわりを見みせる対比たいひです。
   
4. Q4　正答せいとうはAです。文字もじと背景はいけいの差さを大おおきくし、実際じっさいに画面がめんで読よんで確たしかめます。Bは行間ぎょうかんを狭せばめても、文字色もじいろと背景色せけしきの差さは変かわらず、読よみ取とりにくさが残のこります。Cは本文ほんぶんを画像がぞうに変かえるだけで色いろの問題もんだいを直なおさず、文字もじとして扱あつかう利点りてんも失うしないます。Dは文字もじを小ちいさくするだけで、色いろの差さは変かわりません。

練習れんしゅう8-1

解答例かいとうれい

変更前へんこうまえには、二ふたつの見出みだしの左端ひだりはしがずれ、二ふたつ目めの行事ぎょうじでは日時にちじと場所ばしょが離はなれています。項目こうもくの順じゅんも異ことなり、締切しめきりの意味いみは赤あかい印しるしだけで示しめされています。

変更後へんこうごは、日時にちじと場所ばしょを行事ぎょうじごとにまとめる近接きんせつ、見出みだしの左端ひだりはしをそろえる整列せいれつ、日時にちじ・場所ばしょ・申込もうしこみの順じゅんをくり返かえす反復はんぷく、行事名ぎょうじめいを少すこし大おおきくする対比たいひを使つかいます。締切しめきりには文字もじと日付ひづけも加くわえます。

採点さいてんの目安めやす

合計ごうけい10点てんです。四原則よんげんそくそれぞれに変更前へんこうまえの問題もんだいと変更後へんこうごの改善かいぜんが一ひとつずつあり、確たしかめ方かたまで書かかれていれば評価ひょうかできます。色いろの組合くみあわせだけで規格きかくへの適合てきごうを判断はんだんしないようにします。

考かんがえよう・グループで話はなそう

考かんがえようは、読よむ人ひとが最初さいしょに必要ひつようとする情報じょうほうを挙あげ、見出みだし・日時にちじ・申込方法もうしこみほうほうの優先順ゆうせんじゅんを説明せつめいできていれば合あっています。すべてを同おなじ強つよさで目立めだたせるのでなく、必要ひつような情報じょうほうを選えらぶ理由りゆうを書かきます。

グループでは、読よむ人ひとが実際じっさいに見みつけた情報じょうほうを変更前後へんこうぜんごで比くらべます。意見いけんが分わかれた場合ばあいは、どの情報じょうほうを探さがしたかを言葉ことばにして、もう一度いちどカードを見みます。色いろの好このみだけで決きめず、文字もじラベルや日付ひづけが役やくに立たつかも確認かくにんします。

ワークシート8-1

穴埋あなうめの答こたえは順じゅんに「反復はんぷく・近接きんせつ・整列せいれつ」です。自分じぶんの記録きろくは、四原則よんげんそくごとに問題もんだい・変更へんこう・確認かくにんが対応たいおうしているかを見直みなおします。締切しめきりを文字もじでも示しめし、変更後へんこうごの確たしかめ方かたがあれば完成かんせいです。

第だい9章しょう：アクセシビリティと素材そざいの権利けんり

自己じこチェック（1節せつ）

1. 内容ないようの段階だんかいで決きめます。文字もじの大おおきさはCSSで調整ちょうせいします。
   
2. どこへ移動いどうするリンクか、目的もくてきが分わかりにくくなります。
   
3. alt属性ぞくせいです。画像がぞうの役割やくわりに合あう代替だいたいテキストが短みじかく書かかれているかを見みます。
   
4. Tabキーで選択せんたくが順じゅんに移うつるか、今いま選えらんでいる場所ばしょが見みえるかを確認かくにんします。

2節せつ

1. inputのid属性ぞくせいです。labelのforの値あたいと同おなじにします。
   
2. 色いろの違ちがいを区別くべつしにくい人ひとなどに、エラーの内容ないようが伝つたわりにくいことがあります。文字もじによる説明せつめいも加くわえます。
   
3. いいえ。WCAG 2.2とJIS X 8341-3:2016は別べつの文書ぶんしょです。
   
4. 「不明ふめい」と記録きろくし、配布元はいふもとなどの確認先かくにんさきを書かきます。確認かくにんが終おわるまで、使つかう素材そざいとして決きめません。

確認問題かくにんもんだい（選択式せんたくしき）

1. Q1　正答せいとうはAです。画面がめんとキーボードの両方りょうほうで見出みだし・リンク・画像がぞう・操作そうさを確たしかめ、未確認みかくにんの部分ぶぶんを分わけて書かくと、次つぎに何なにを確認かくにんすべきかが残のこります。Bは自動検査じどうけんさだけで点検てんけんを終おえています。Cは確認かくにんしていない画像がぞうを「確認かくにん済ずみ」と書かいています。Dは今回こんかいのページを見みずに、前回ぜんかいの記録きろくを流用りゅうようしています。

2. Q2　正答せいとうはDです。写真しゃしんを使つかう前まえに出所しゅっしょと利用条件りようじょうけん、必要ひつような許諾きょだくや表示ひょうじ、人物じんぶつに関係かんけいする権利けんりを確認かくにんします。Aは検索けんさくできることを利用許可りようきょかと同おなじにしています。Bは作者さくしゃや利用条件りようじょうけんの確認かくにんを公開後こうかいごまで遅おくらせています。Cも公開後こうかいごまで確認かくにんを遅おくらせています。利用条件りようじょうけんは、利用りようや公開こうかいの前まえに調しらべます。

Q3（記述式きじゅつしき）

3. Q3　答こたえはidです。label要素ようそのforと、入力欄にゅうりょくらんのidに同おなじ値あたいを指定していします。nameはフォームデータの名前なまえに使つかう属性ぞくせいで、labelとの関連かんれん付づけには使つかいません。

練習れんしゅう9-1

解答例かいとうれい

各項目かくこうもく2点てん、計けい10点てんです。修正前後しゅうせいぜんごの差さと確たしかめ方かたがそろっていれば評価ひょうかします。地図ちずの位置いちや方角ほうがくは問題もんだいに示しめされていないため、新あたらしい情報じょうほうを加くわえず、地図ちずの役割やくわりを示しめす代替だいたいテキストに留とめます。

考かんがえよう

回答例かいとうれい：素材名そざいめい、配布元はいふもと、作者さくしゃ、URL、利用条件りようじょうけん、表示義務ひょうじぎむ、人物じんぶつの有無うむを台帳だいちょうに記録きろくします。公開こうかいの条件じょうけんが分わからない項目こうもくは「不明ふめい」とします。配布元はいふもとか学校がっこうの担当者たんとうしゃに確認かくにんし、答こたえが分わかるまで公開用こうかいようの素材そざいとして決定けっていしません。法的ほうてきな可否かひを自分じぶんだけで断定だんていしない説明せつめいを評価ひょうかします。

グループで話はなそう

回答例かいとうれい：画面がめんでは見出みだしの順じゅんや文字もじと背景はいけいの差さを見みます。キーボードではTabキーでリンクや入力欄にゅうりょくらんを移動いどうし、選えらんだ位置いちが見みえるか、Enterキーでリンクを開あけるかを試ためします。直なおした後あとは同おなじ方法ほうほうでもう一度確認いちどかくにんします。異ことなる例れいでも、点検方法てんけんほうほうと問題もんだいが対応たいおうしていればよいでしょう。

ワークシート9-1の採点さいてんの目安めやす

ページ点検てんけんメモは、問題もんだい・困こまる理由りゆう・修正しゅうせい・修正後しゅうせいごの確認かくにんが対応たいおうしていれば評価ひょうかします。素材台帳そざいだいちょうは次つぎの項目こうもくを各かく1点てん、合計ごうけい5点てんで確認かくにんします。

架空かくうの素材そざいを使つかうときも、実在じつざいする配布元はいふもとや許可きょかを作つくったことにしません。利用りようできる根拠こんきょを説明せつめいできるかを見みます。

第だい10章しょう：企画きかくから公開後こうかいごの管理かんりまで

自己じこチェック（1節せつ）

1. 読よむ人ひと、ページの目的もくてき、載のせる情報じょうほう、確認かくにんする人ひとなどを書かきます。
   
2. 情報じょうほうや部品ぶひんを置おく場所ばしょです。色いろや細こまかな装飾そうしょくは、配置はいちを考かんがえた後あとで決きめます。
   
3. 移動先いどうさきの要素ようそに id 属性ぞくせいを付つけます。値あたいはリンクの # の後うしろと同おなじにします。

2節せつ

1. 同おなじ確認かくにんではありません。HTML検査けんさは文書ぶんしょの構造こうぞう、ブラウザ確認かくにんは表示ひょうじや操作そうさを調しらべます。
   
2. 文字もじやカードが読よめるか、横よこにはみ出ださないか、並ならび方かたが内容ないように合あうかを比くらべます。リンクと入力部品にゅうりょくぶひんの操作そうさも確たしかめます。
   
3. 修正しゅうせいした日ひ、箇所かしょ、理由りゆう、担当者たんとうしゃ、再確認さいかくにんした項目こうもくと結果けっかを書かきます。

確認問題かくにんもんだい

1. Q1　正答せいとうはBです。読よむ人ひとと目的もくてき、必要ひつような情報じょうほうを先さきに決きめると、必要ひつような構造こうぞうや見みた目めを考かんがえやすくなります。その後あとに実装じっそうし、確認かくにんします。Aは装飾そうしょくを先さきに決きめ、読よむ人ひとと目的もくてきを後あとにしています。Cは公開前こうかいまえの確認かくにんを飛とばしています。Dは画像がぞうをページの構造こうぞうの代かわりにしています。
   
2. Q2　正答せいとうはCです。HTML検査けんさの結果けっかを保存ほぞんした後あと、ブラウザで表示ひょうじ、リンク、入力欄にゅうりょくらん、幅はばの違ちがいも確認かくにんします。Aは構造こうぞうと参照先さんしょうさきだけを確たしかめ、表示ひょうじと操作そうさを確たしかめていません。Bは幅はば違ちがいの表示ひょうじだけで、リンクと入力欄にゅうりょくらんの操作そうさが抜ぬけています。Dは操作そうさだけで、表示ひょうじの確認かくにんが抜ぬけています。
   
3. Q3　正答せいとうはDです。href="#program"の#より後うしろの文字もじと同おなじid値あたいを持もつ要素ようそがあり、リンク操作そうさでそこへ移動いどうすることを確たしかめます。例れいは<a href="#program">と<section id="program">です。Aは文字色もじいろを調しらべるだけで移動先いどうさきを確認かくにんしません。Bは構文検査こうぶんけんさと参照先さんしょうさき確認かくにんを混同こんどうしています。Cは幅はばを変かえるだけでリンクを押おしません。
   
4. Q4　正答せいとうはAです。日付ひづけ、変更箇所へんこうかしょ、理由りゆう、再確認さいかくにんの結果けっかを残のこすと、どこを直なおし何なにを確たしかめたか伝つたわります。Bは修正後しゅうせいごに表示ひょうじだけを見みて、リンクや入力欄にゅうりょくらんの確認かくにんが抜ぬけています。Cは確認かくにんの結果けっかを文書ぶんしょに残のこさず、確認担当かくにんたんとうと対象たいしょうが分わかりません。Dは表示ひょうじだけを記録きろくし、修正後しゅうせいごのリンクや幅はばの確認かくにんを後回あとまわしにしています。

練習れんしゅう

練習れんしゅう10-1

解答例かいとうれいは、HTML検査けんさの結果けっか、参照先さんしょうさきの確認かくにん、3つの幅はばの表示ひょうじ、リンク操作そうさ、ラベルと入力欄にゅうりょくらんの対応たいおうを別べつの行ぎょうにした表ひょうです。問題もんだいを見みつけたときは、該当がいとうするコードや配置はいちを直なおし、同おなじ確認かくにんをもう一度いちど行おこないます。確認かくにんしていない項目こうもくを「問題もんだいなし」と記録きろくしないことが大切たいせつです。

採点さいてんの目安めやすは、次つぎの5項目こうもくです。

1. 要件ようけんと配置はいち：要件表ようけんひょうと配置図はいちずが、読よむ人ひと・目的もくてき・必要情報ひつようじょうほうに対応たいおうしている。
   
2. コード：index.htmlとstyles.cssが配置図はいちずどおりで、#programの移動先いどうさき（id="program"）がある。
   
3. 素材そざい：素材台帳そざいだいちょうに、外部素材がいぶそざいの有無うむと条件じょうけんを記録きろくしている（外部素材がいぶそざいを使つかわない場合ばあいもその記録きろくがある）。
   
4. 検証けんしょうログ：HTML構造検査こうぞうけんさ、参照先さんしょうさきの確認かくにん、ブラウザ表示ひょうじ・操作そうさ（375・800・1280 CSS px）を分わけて記録きろくしている。
   
5. 更新記録こうしんきろく：変更日へんこうび・箇所かしょ・理由りゆう・再確認さいかくにんの結果けっかと、未確認みかくにんの項目こうもくを記録きろくしている。

各項目かくこうもくを2点てん、合計ごうけい10点てんで見みます。別べつの書式しょしきでも、確認対象かくにんたいしょうと結果けっかが対応たいおうしていれば同おなじ基準きじゅんで評価ひょうかできます。

考かんがえよう・グループで話はなそう

考かんがえようの回答例かいとうれいは、「HTML検査けんさで構造上こうぞうじょうの指摘してきがなくても、リンクを押おして移動先いどうさきへ着つくかはブラウザで試ためす必要ひつようがある」です。画面幅がめんはばや文字もじの読よみやすさを選えらび、検査けんさツールでは分わからない理由りゆうを説明せつめいしていればよいでしょう。

グループで話はなすときは、HTML構造こうぞう、参照先さんしょうさき、画面表示がめんひょうじ、素材条件そざいじょうけんのように確認かくにんの種類しゅるいを分わけた案あんを認みとめます。各項目かくこうもくの担当たんとうと結果けっかを記録きろくし、未確認みかくにんの仕事しごとを誰だれが引ひき継つぐかまで話はなせているかを見みます。

ワークシート10-1

穴埋あなうめの答こたえは「再確認さいかくにん」「id」です。自分じぶんで作つくる表ひょうには唯一ゆいいつの正解せいかいはありません。読よむ人ひと・目的もくてき・情報じょうほうの順番じゅんばんがつながり、リンクの名前なまえと移動先いどうさき、確認方法かくにんほうほうと結果けっかが対応たいおうしているかを点検てんけんします。未実施みじっしの確認かくにんを済すんだことにしていないことも評価ひょうかします。