ワークシート（印刷用いんさつよう）

ワークシート1-1：架空かくうイベントの企画きかくカード

利用者りようしゃは学校がっこうを知しりたい人ひとです。最初さいしょに知しりたい情報じょうほうは開催日かいさいびと会場かいじょうです。

自分じぶんの学校がっこうについて、実在じつざいの行事情報ぎょうじじょうほうを使つかわず、架空かくうのイベント案内あんないを考かんがえましょう。読よむ人ひと、ページの目的もくてき、必要ひつような情報じょうほう、確認かくにんする相手あいてを書かきます。三みっつの言語げんごを使つかうかどうかも理由りゆうと一緒いっしょに考かんがえます。

ワークシート1-1

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

ワークシート2-1：行事案内ぎょうじあんないを組くみ立たてる

記入例きにゅうれい

穴埋あなうめ

この案内あんないページの主題しゅだいを表あらわす見出みだし要素ようそは＿＿です。リンク先さきを示しめす属性ぞくせいは＿＿です。順番じゅんばんがない項目こうもくのまとまりには＿＿と＿＿を使つかいます。

自分じぶんで書かく

架空かくうの学校がっこうイベントを三みっつ考かんがえ、順序じゅんじょなしリストにします。その中なかから一ひとつを選えらび、詳細しょうさいページへのリンクを一ひとつ作つくります。見出みだしはページの題だいと内容ないようの段階だんかいに合あわせます。イベントや学校がっこうは実在じつざいの情報じょうほうを使つかわず、学習用がくしゅうように作つくります。

ワークシート2-1

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

ワークシート3-1：学校案内がっこうあんないの構造図こうぞうず

次つぎは架空かくうの学校案内がっこうあんないの構造例こうぞうれいです。navとmainは同おなじ階層かいそうで、二ふたつのsectionはmainの内側うちがわにあります。

表ひょう3-1　学校案内がっこうあんないの構造例こうぞうれい

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

穴埋あなうめ

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

自分じぶんで書かく

読よむ人ひとに伝つたえる情報じょうほうを三みっつ以上いじょう決きめ、題名だいめい、主おもな移動先いどうさき、中心内容ちゅうしんないよう、末尾まつびの補足ほそくに分わけます。main内うちのsectionには見出みだしを書かきましょう。

表ひょう3-2　自分じぶんで作つくる構造図こうぞうず

HTMLコードを作つくる

構造図こうぞうずをHTMLにします。ページ名めいはh1、主おもな移動先いどうさきはnav、中心内容ちゅうしんないようは一ひとつのmain、二ふたつの主題しゅだいはmain内うちの見出みだし付つきsection、問とい合あわせ情報じょうほうはfooterにします。完成かんせいしたHTMLコードを提出ていしゅつし、index.htmlとして保存ほぞんしてブラウザで表示ひょうじします。

提出時ていしゅつじに、navとmainが同おなじ階層かいそうであること、二ふたつのsectionがmainの内側うちがわにあること、見出みだしの順序じゅんじょを確たしかめます。

ワークシート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：行事表ぎょうじひょうと申込欄もうしこみらん

記入例きにゅうれい

穴埋あなうめ

labelのforと入力欄にゅうりょくらんの＿＿を同おなじ値あたいにします。

自分じぶんで書かく

次つぎの欄らんに、自分じぶんで考かんがえた架空かくうの行事ぎょうじについて書かきましょう。予定よていは2行ぎょうにします。実在じつざいする人ひとや学校がっこうの情報じょうほうは使つかいません。

HTMLコードを作つくる

自分じぶんの行事表ぎょうじひょうとメール入力欄にゅうりょくらんをHTMLにします。caption、TimeとEventの列れつ見出みだし、2行ぎょうのデータ、情報画像じょうほうがぞうとalt、labelとinputをコードで書かきます。送信そうしんボタンは<button type="submit" disabled>Send</button>にします。完成かんせいしたコードを提出ていしゅつし、index.htmlとして保存ほぞんしてブラウザで表示ひょうじします。情報画像じょうほうがぞう・飾かざり画像がぞうを両方りょうほう使つかう場合ばあいは、画像がぞうファイルも同おなじフォルダーに置おきます。

表示ひょうじした後あと、表ひょうの内容ないよう、画像がぞうの説明せつめい、forとidの一致いっちを確たしかめます。Enterキーを押おしてもページが送信そうしんされず、URLが変かわらないことも確認かくにんします。

表ひょうでは見出みだしと値あたいの関係かんけいを見みます。画像がぞうの説明せつめいが本文ほんぶんと重かさならないかも読よみ返かえします。入力欄にゅうりょくらんでは、labelのforとinputのidが同おなじかを確たしかめます。

ワークシート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-1：カードのCSSを整ととのえる

表ひょうの空欄くうらんを埋うめたあと、既存きそんのwork/ch05/ch05_css_box.htmlとstyles.cssを使つかってページを作つくります。見出みだし、本文ほんぶん、注意ちゅういカードに色いろ・文字もじサイズ・行間ぎょうかん・余白よはくを設定せっていし、保存ほぞんしてブラウザで開ひらき直なおします。ルール表ひょうとページを提出ていしゅつし、表示ひょうじの変化へんかを記録きろくします。

表ひょう5-1　　CSSルールの記録きろく

提出物ていしゅつぶつは記入きにゅうした表ひょう、HTMLファイル、CSSファイル、表示確認ひょうじかくにんの記録きろくです。color・font-size・line-height・余白よはくがどこに反映はんえいされたか、classの指定先していさきが合あっているかを確たしかめます。

ワークシート 5-2：幅はばの計算票けいさんひょう

content-boxの例れいです。合計ごうけいの範囲はんいも記しるします。

ワークシート

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

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

ワークシート6-1：案内あんないページの配置はいち

完成例かんせいれい

穴埋あなうめ

• Flexboxを使つかうとき、並ならべたい子項目ここうもくを含ふくむ親おやにdisplay: ＿＿＿＿を指定していします。
• Gridを使つかうとき、列れつトラックを親おやの＿＿＿＿＿＿＿＿＿＿＿＿に指定していします。
• 項目間こうもくかんのすき間まには、どちらの方式ほうしきでも＿＿＿＿を利用りようできます。
• ナビゲーションの子こリンクが横幅よこはばに入はいらないとき、折おり返かえす指定していは＿＿＿＿＿＿＿＿です。

自分じぶんで書かく

ナビ3項目こうもくとカード6枚まいの親おや・子こ・方式ほうしきを書かき、折返おりかえしと列境界れつきょうかいの確認点かくにんてんも記しるします。

• ナビの親おや：＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
• ナビの子こと配置方式はいちほうしき：＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
• カードの親おやと配置方式はいちほうしき：＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
• Gridの列れつの指定先していさき：＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
• 表示ひょうじを確たしかめる点てん：＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

成果物せいかぶつの完成例かんせいれい

• ナビ：nav.site-navを親おや、3個このaを子ことしてFlexboxで並ならべます。
• カード：section.event-listを親おや、6個このarticleを子ことしてGridで配置はいちします。
• 列れつ：親おやのgrid-template-columnsに3列れつを指定していします。
• 確認かくにん：リンクが読よめ、カードの列境界れつきょうかいがそろうこと。

この章しょうの専門用語せんもんようごリスト

今回こんかいから自力じりきで読よむ漢字かんじ（10語ご）

配置はいち／方向ほうこう／行列ぎょうれつ／軸じく／項目こうもく／親子おやこ／伸縮しんしゅく／折返おりかえし／間隔かんかく／整列せいれつ

まとめ

• Flexboxは、主おもに一方向いちほうこうに項目こうもくを並ならべる方式ほうしきです。親おやにdisplay: flexを指定していします。
• 主軸しゅじくは項目こうもくの並ならぶ方向ほうこうで、交差軸こうさじくは主軸しゅじくと交差こうさする方向ほうこうです。行いか列れつかはflex-directionで選えらべます。
• Gridは行ぎょうと列れつを使つかう方式ほうしきです。親おやにdisplay: gridを指定していし、列れつは親おやのgrid-template-columnsで定義ていぎします。
• gapは項目間こうもくかんのすき間まを指定していします。各子かくこへ列設定れつせっていを分わけて書かくのではなく、必要ひつような配置はいちを親おやでまとめます。
• HTMLに書かいた順番じゅんばんと、画面がめんで見みせる順番じゅんばんを確認かくにんします。配置はいちは内容ないようの役割やくわりに合あう方法ほうほうを選えらびます。

できるようになったこと

• □ FlexboxとGridの違ちがい、親おやへの指定していを説明せつめいできる。
• □ ブラウザで折返おりかえしと列境界れつきょうかいを確たしかめられる。

練習問題れんしゅうもんだい

ワークシート7-1：表示幅ひょうじはばの確認表かくにんひょう

次つぎの記入例きにゅうれいでは、表示幅ひょうじはば、viewport、カード列数れつすう、横よこはみ出だしを比くらべています。「合格ごうかく」は学習用がくしゅうようページの確認結果かくにんけっかを示しめす言葉ことばです。規格きかくへの適合てきごうを示しめすものではありません。

表ひょう7-1　幅はばを変かえて確認かくにんする項目こうもく

自分じぶんで確認かくにんするときは、ブラウザの表示ひょうじを見みて記録きろくします。画像がぞうが親おやの幅はばを超こえていないかも確認かくにんします。

表ひょう7-2　自分じぶんで記録きろくする確認表かくにんひょう

自分じぶんで書かく

架空かくうの案内あんないページを考かんがえ、カード二ふたつの並ならび方かたを下書したがきしてください。狭せまい幅はばではどの順番じゅんばんで読よむか、広ひろい幅はばではどのように並ならべるかを書かきます。画像がぞうを置おく場合ばあいは、親おやの幅はばに対たいしてどのように見みせるかも記入きにゅうします。

表ひょう7-3　自分じぶんで作つくる案内あんないの下書したがき

ワークシート7-1

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

ワークシート8-1：カードを見直みなおす

記入例きにゅうれい

穴埋あなうめ

同おなじ形かたちをくり返かえす考かんがえ方かたは（　　　　）です。関係かんけいする情報じょうほうを近ちかくに置おく考かんがえ方かたは（　　　　）です。見出みだしの左端ひだりはしを共通きょうつうの線せんに合あわせる考かんがえ方かたは（　　　　）です。

自分じぶんで書かく

自分じぶんが作つくった案内あんないカードを一ひとつ選えらび、読よむ人ひと、見みつけにくい情報じょうほう、変かえる見みた目め、使つかう考かんがえ方かた、変更後へんこうごに確たしかめる方法ほうほうを書かきます。配置はいちの下書したがきやカードの絵えを添そえてもかまいません。文字もじの大おおきさや色いろを変かえる場合ばあいは、変かえる前まえと後あとで何なにを見比みくらべるかも記しるします。

表ひょう8-1　自分じぶんのカードを見直みなおす記録きろく

ワークシート8-1

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

ワークシート9-1：ページ点検てんけんメモと素材台帳そざいだいちょう

記入例きにゅうれい：ページ点検てんけんメモ

記入例きにゅうれい：素材台帳そざいだいちょう

上うえのURLと条件じょうけんは教材用きょうざいように作つくった架空かくうの例れいです。現実げんじつのサイトや素材そざいのライセンスを表あらわすものではありません。

空欄くうらん：自分じぶんのページ点検てんけんメモ

空欄くうらん：素材台帳そざいだいちょう

記録きろくがない欄らんを推測すいそくで埋うめないでください。分わからない項目こうもくは「不明ふめい」とし、配布元はいふもとや学校がっこうの確認先かくにんさきを書かきます。条件じょうけんが分わかるまで、使つかう素材そざいとして確定かくていしません。

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

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

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

ワークシート10-1：要件ようけんと確認かくにんの計画けいかく

例れいとして、架空かくうのイベント案内あんないで必要ひつようなことを整理せいりします。読よむ人ひとは初はじめて学校がっこうを訪おとずれる人ひとです。目的もくてきは、日時にちじ、場所ばしょ、プログラム、参加方法さんかほうほうを知しらせることです。ページ内ないの「Program」からプログラムへ移動いどうできるようにします。確認者かくにんしゃは田中先生たなかせんせいです。

例れいを参考さんこうに空欄くうらんを記入きにゅうし、方法ほうほうと結果けっかを分わけます。

表ひょう10-1　要件ようけんと確認方法かくにんほうほうの記入例きにゅうれい

穴埋あなうめ

公開後こうかいごに情報じょうほうを直なおすときは、直なおした日ひと内容ないように加くわえ、＿＿＿＿した結果けっかも記録きろくします。
ナビゲーションの #program は、同おなじページの＿＿＿＿属性ぞくせいに結むすびます。

自分じぶんで書かく

架空かくうの学校がっこうイベント案内あんないの必要情報ひつようじょうほうと確認方法かくにんほうほうを決きめます。

表ひょう10-2　自分じぶんで作つくる要件ようけん・確認表かくにんひょう

ワークシート10-1

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