社会と情報実践報告

HTML と CSS の役割と関係を探究的に理解する授業実践
神奈川県立生田東高等学校■１大石智広

科目：社会と情報（1 年生 2 単位）
内容：情報通信ネットワークの仕組み
クラス：3 クラス 各 40 名
時間：4 時間中の 2 時間
時期：11 月初旬

先生
②を実現するために，次のような手法をとった。まねらいと背景ず，Web ページに表示したいテキストだけが入力さ本校では，以前から「情報通信ネットワークの仕組れている HTML ファイルを配布する。この HTML ファみ」の単元の学習として，Web ページの制作に取り組イルにタグを１つ入力したら，すぐにブラウザ上で確んできた。しかし，当初は，この学習を通じて身につ認し，必要なら修正，次のタグを入力し，またブラウけて欲しいものが明確となっていなかった。授業の内ザで確認，という手順を細かく繰り返すようにした。

容も，CSS を使わずに <FONT> ～ </FONT> など

この繰り返しを経験することで，主体的に Web ペーのタグで修飾するという，過去の Web ページのお作ジを編集できるようになることと，自分が入力したタ法に沿ったものになっていた。その後 CSS を導入しグとできあがった Web ページの構造の因果関係を明たが，授業の中で，HTML から CSS を参照するとい確に理解できるようになることを意図した。これは，う関係性を十分に理解させることができず，「このペー

Web ページの制作の授業だけではなく，プログラミジの背景色を変更したら，他のページも変わったんだ

ングの授業にも応用できる手法だと考えている。

けどなんで？」という質問が，単元の学習が終わった①を実現するために，事例対比という授業デザイン後に出てきてしまっていた。授業の中では説明していの原則を取り入れた。これは，「複数の似た事例を比たが，十分に学習できていなかったことになる。

較させ，共通点や差異・矛盾に注目させることで，そまた，HTML を学習させる過程も，プリントに印れぞれの情報で示されている特定の機能や特徴に気づ刷した見本の Web ページの HTML を，生徒がそのまかせる」( 大島・千代西尾，2019，p.130) 手法である。

ま入力する，というものだった。後続の単元で，自分この手法を利用して，構造のある Web ページと構造の作りたい Web ページを自由に制作する授業をおこのない Web ページとを比較させ，読みやすく見やすなっていたが，主体的に制作することができない生徒が多く見られた。このことは，それまでの授業で，内▼表１

容を理解せずに入力していただけであったためと考え

時

タイトル

１

・事例対比を用いて，見やすく読みやす
い文書とそうでない文書の違いを考えHTML とる。
CSS
・HTML ファイルと CSS ファイルを編集し，Web ページの構造とスタイルを定義する。

２・３原色とカラーコードの仕組みについ３原色とて説明を聞く。
カ ラ ー・Web ページの背景色を，カラーコードコードを利用して定義する。

３

ハイパー
リンク

４

・別のページの背景色を統一するためのHTML と方法を考える。
CSS の 関・プロパティ値を変更する方法と，同じ係を理解スタイルを参照する方法をそれぞれ試しようし，比較して違いを考察する。

られる。
そこで，それまでの授業の反省を踏まえて，次のようにねらいを整理した。
① HTML と CSS の役割の違いと関係性の理解に基づいて，それぞれの編集をおこなうことができ，適切な構造をもった Web ページを作成することができる。
②編集，確認，修正の手順を短いサイクルで繰り返すことを通して，主体的に Web ページを編集する力を身につける。
ここで，HTML の役割とは，Web ページの構造を定義することを指し，CSS の役割とは構造の修飾を定義することを指す。また，関係性とは，Web ペー
ジから CSS を参照するという関係のことを指す。

1

単元計画
授業の内容・複数ページを関連づけるハイパーリン
クを，HTML ファイルを編集して定義する。

1

いページには構造があることに気づかせる活動に取り何のために必要なのかを理解するための，事例対比演組ませることとした。また，共通のスタイルを使用し習に取り組ませた。図２，図３の２つの文書を，プリている箇所と個別のスタイルを使用している箇所を比ントと Web ページの両方の形式で生徒に提示したそ較させ，HTML と CSS の関係を理解させる，というの上で，どうして見やすさ・読みやすさが違うのか理活動をおこなうこととした。

由を考察させた。生徒は，「空白があるかないか」「文これらの考えから，表１のように単元計画を立てた。

字の大きさを変えているかどうか」といった表現で，本稿では，このうち１時間目と４時間目の内容につ構造の有無を理由として回答することができた。ただし，「段落」「見出し」といった構造を指す用語が出ていて詳しく報告する。

こないことが多かったため，「文字が大きい部分を何■２と呼ぶのですか」などの発問をして，引き出す必要が準備あった。この演習を踏まえて，見やすいページには構配布用の HTML ファイル（図１）と CSS ファイル造が必要で，その構造を定義するのが HTML である，を用意した。と解説をおこなった。また，CSS は文字の大きさや色，CSS ファイルには，見出し用，背景用など，最低背景色などの見た目を定義する，という役割であるこ限のスタイルをあらかじめ定義しておいた。
また，それぞれの授業で使用するワークシートと，HTML タグと CSS プロパティの解説を掲載したレ■ 3.1

つ１つの構造を，編集・確認・修正，という手順を繰り返しながら定義していく実習に取り組ませた。構造授業展開
１時間目とは何かがあらかじめ明確になっていたことと，入力しようとしている HTML タグがどの構造を定義しよHTML と CSSうとしているのか，目的が明確になっていたことから，Web ページの構造を定義する，という HTML の役
割を理解するために，まずは，文書の構造とは何で，▲図１2

続いて，「実際に HTML タグを入力して構造を定義しよう」と目的を示し，見出し，改行，段落などの１ファレンス用のプリントを準備した。

■３ともあわせて解説した。

生徒に配布した HTML ファイル2

スムーズに実習をおこなうことができた。

▲図２

構造がある Web ページ▲図３

構造がない Web ページ

■ 3.2

４時間目

HTML と CSS の関係を理解しよう▼表３

生徒に取り組ませた活動

ここまでの４時間の授業で，生徒は図４に示す練習

活動の内容

方式

時間用の Web ページを完成させている。ここでは，それ①背景色を揃える方法の考察。

ペア

2分

ペア

5分

③「共通スタイル方式」「個別スタイル方式」で作成されている２つのボックスの背景色をそれぞれ変更し，作業手順を記録する。

ペア

10 分

④③で記録した作業手順を比較する。

個人

2分⑤共通スタイルの方が手順が少な
い の は， ど の よ う な 仕 組 み になっているか考察する。

個人
グループ

10 分

②２つの異なる方法で背景色を揃

ぞれをトップページとアクセスページと呼ぶことにすえる実習。

る。２時間目にカラーコードを学習した上で，見出しやボックスなどの構造ごとに，文字の色や，背景色を定義し，３時間目に２ページ目であるアクセスページを作成し，それぞれのページに対するハイパーリンクの作成をおこなっている。

最初に，第２ボックスの背景色をトップページの色に揃えるにはどのような方法があるか，生徒にペアワークで考察させた（表３①）。ここでは，「CSS のカ▲図４

トップページとアクセスページラーコードを揃える」「同じスタイルを参照するようにする」という２つの方法が出ることを期待した。最作成したページは３つのボックスからなっており，初に，「方法は２つある」というヒントを与えることで，意図的に，２ページで共通のスタイルを利用している

生徒は２つとも見出すことができた。次に，ペアで役ボックスと，個別のスタイルを使っているボックスに割分担した上で，２つの方法を用いて実際に Web ペー分けている。ここでは，２つのページで同じスタイルジの編集をおこなわせ（表３②），どちらの方法でもを利用していることを共通スタイルと呼び，異なるス背景色を揃えられることを確認させた。

タイルを使用していることを，個別スタイルと呼ぶこ

続いて，それぞれの方法を「個別スタイル方式」「共ととする ( 図 5，表 2)。

通スタイル方式」と呼ぶことを解説した上で，「どちらの方法が良い方法だろう」と発問し，それを確かめ第１ボックス 共通スタイルるという次の目標を提示した。そのための活動として，共通スタイル方式で作成している第１ボックスと，個別スタイル方式の第３ボックスの背景色を，それぞれ別の色に統一する，という活動に取り組ませた（表３第２ボックス 個別スタイル③）。その際に，どんな手順が必要だったのかに注目し比較させるため，ペアで取り組ませた上で，１人が編集し，もう１人が作業手順を記録する，という役割

第３ボックス 個別スタイル

ボックス分担を指定した（図６）。

▲図５

使用しているスタイル▼表２

参照しているスタイル名

共通／個別 トップページ

アクセスページ

第１共通boxhead

boxhead第２個別boxmainA

boxmainB

第３

個別boxfootAboxfootB▲図６

このページを利用して，HTML と CSS の関係性を作業手順の記録の例理解する授業に取り組ませた。この授業で取り組ませた活動を，表３に示す。

33

▲

図7
作業手順を比較した考察の例

どちらか片方の仕組みの記述しかないものなどを，不次に，この作業を比較して気づいたことは何か考察十分と分類した。

させた（表３④）。多くの生徒が，共通スタイル方式

グループワークの際に，特に指示を行わずにグルーの方が，手順が少なくてすむ，ということに気づくこ

プワークをおこなったクラス（ホワイトボードなしクとができた（図７）。
その気づきをクラス全体で共有した上で，「共通スラス）と，ホワイトボードを渡して使用するように指タイルの方が，手順が少なくてすむのは，どのような示しておこなったクラス（ホワイトボードありクラス）仕組みになっているか説明しよう」という課題に取りに分けて，それぞれ分析をおこなった。この分析は，組ませた（表３⑤）。個人で考察させた後に，グルー

ホワイトボードなしクラス 2 クラス 75 人，ホワイトプで引き続き同じ課題に取り組ませている。文章と図ボードありクラス１クラス 37 人を対象におこなった。のどちらを使っても良い，と指示したが，文章で表現結果を，表３と表４に示す。

するのが難しいことはあらかじめわかっていたため，図で表現することを推奨した。また，ヒントとして，

▼表３
記述の方法

HTML ファイルやスタイルをどのように表記したら未記入良いかを示した（図８）。

ホワイトボードなしクラスの分類

HTML と CSS の関係を説明できているかできていない
不十分
できている
13

図

171217

文章231

図と文章046

合計

321924( 単位：人 )

▼表４▲

記述の方法
図８
生徒に示したヒント

未記入
図授業の最後に，個人のワークシートにグループで考えた仕組みの説明を記載させた。

■４

ホワイトボードありクラスの分類

HTML と CSS の関係を説明できているかできていない
不十分
できている
440

文章

022

図と文章

103

合計

9226( 単位：人 )

結果と反応どれくらい生徒が HTML と CSS の関係性を理解し説明できている人数を比較すると，ホワイトボードたか測るため，仕組みを説明する課題の記述を分析しなしクラスが 75 人中 24 人なのに対し，ホワイトボーた。個別スタイル方式は２つのページがそれぞれ別のドありクラスは 37 人中 26 人となっており，説明でスタイルを参照しており，共通スタイル方式は同じスきている割合が大幅に改善している。これは，ホワイタイルを参照している，という説明が記述できていトボードを利用することによって，書いたり，修正しるものを，説明できていると分類した（図９）。また，たりという試行錯誤をおこないやすくなった結果，よ▲

4214

図９
説明できていると分類した記述の例

りよい表現を追求することができたからだと推測している。ただし，まだ記述できていない生徒も多く，ヒントを工夫するなどの改善が必要である。今回は授業の仕方が安定していなかったため成績評価には用いなかったが，将来的にはこの分析の仕方を成績評価に利用できると考えている。
後続の Web ページを自由に作成する単元に入った
ときに，以前のような HTML と CSS の関係を理解できていない事から生じる質問は大幅に減ったと感じた。逆に，「背景の色をそれぞれ分けたいときは，別のスタイルを使えばいいんですね」といった，これまでの授業の理解を踏まえた質問が増えたという感触を得ている。
今後の課題としては，４時間目の授業の仕組みを説明する課題において，説明できていると分類される生徒を増やすための改善をおこなうことがあげられる。
また，今回の授業でおこなった，編集・確認・修正という手順を短いサイクルで繰り返す，という手法と，仕組みを説明させる，という取り組みを，プログラミングの授業に応用することを試みていきたい。

■５
(1)

参考資料
大島純・千代西尾祐司 ( 編 )(2019) 主体的・対話的で深い学びに導く学習科学ガイドブック , 北大路書房(2)

大石智広・望月俊男 (2019) 比べて深める授業実
践～ HTML と CSS の関係を理解～ 神奈川県情報部会令和元年度情報科実践事例報告会

55