ICT・Education
＞
No.45
＞ p6〜p9
教育実践例
HTMLとCSSによるWebページ作成
─生徒とともに作った4年間の実践─
東京都立大島海洋国際高等学校
大和 雅俊
1．はじめに
本稿では，昨年度の3学期に前任校の東京都立府中西高等学校でおこなった授業実践を紹介する。本授業実践は，平成18〜19年度に佐藤義弘教諭（現東京都立東大和高等学校情報科）とTTでおこなった授業を基にしている。
前任校は，平成15年度から3年間「ITを活用した教育推進校」の指定を受け，ITを活用し，学習指導方法や学び方の新たなスタイルを研究した。平成18年度からの2年間は，「IT教育普及支援校」の指定を受け，近隣の学校にIT教育普及を目指した活動や，都民の皆様へ「インターネット親子セーフティ講座」などをおこない，学校や地域の実態に即した情報モラル教育を推進してきた。様々な指定を受けてきたこともあり，ICT機器の整備が早くから進み，様々な授業においてICTを活用した授業が展開されてきた。
これまでの指定校等での実践や，教育の情報化の進展により，東京都では，昨年度までの2年間に教員一人につき1台，校務用パソコンが配布された。各クラス数分の電子黒板ユニットやプロジェクター，タブレットパソコン，20台のノートパソコンなどが導入され，わかりやすい授業の実現や校務の効率化を目指し活用されている。
2．情報科
前任校は，8クラス編成と学校の規模が大きい。パソコン教室は主に情報科の授業で使われている。ICT機器の利用促進を考え，「情報A」を1年生で必履修としている。そのほか，「情報B」を2年生，「情報と表現」を3年生で選択授業として設定している。
「情報B」は，上級学校などで情報を学んでいく生徒を対象としている。「情報と表現」は，全員を対象とし，定員いっぱいになる年もしばしばある。指定校の名残もあり，情報科に興味・関心が高い生徒が毎年数人入学して来る。
3．環境
授業は，毎回パソコン教室でおこなった。座学と実習を取り入れながら授業を進めている。昨年の8月に機器更新となり，OSや教室のレイアウトを変更した。従来は島ごとに机がなっていたが生徒全員が前を向く形にした。そのおかげで生徒の集中が高まり，座学と実習の切り替えが上手にできるようになった。
▲写真1 パソコン教室のレイアウト
生徒のパソコンの隣には中間モニターがあり，そこで板書や操作説明などを提示している。また，パソコン教室の前方にプロジェクター及び映写機を設置し，座学の説明時には，前を向いて聞いてもらっている。また，前方には電子黒板も設置し，同時に活用している。電子黒板は，ペンや図形などを使って強調したい部分を生徒に示すことができるので重宝している。特に，プレゼンテーションの際には生徒にも電子黒板を活用させている。電子黒板を使いスライドの切り替えをスムーズにしたり，ペンを用いて印象の残るプレゼンテーションをしたりする生徒もいる。
▲写真2 電子黒板
校内のサーバを活用して，個人ユーザの登録をし，個人のパスワードでネットワークに入る。個人のフォルダ，学年ごとのフォルダ，生徒全員がアクセスできるフォルダなどがあり，それぞれアクセス制限をかけている。また，校内でメールサーバを立ち上げて活用している。授業では，まずメールを確認することを重要視させている。毎回の授業のはじめに生徒にメールを受信させ，授業のねらい・目標・課題・評価基準などを確認させている。授業によっては，メールの指示だけで進行する時もある。
4．情報Aの指導計画概要
大きな流れとして，すべての学期において「情報の収集」，「情報をまとめる」，「情報の発信」の繰り返しで指導を進めている。
3学期は，Webページを作成し情報発信をすることをテーマとした（表1）。それぞれ調べる内容は，第1回の授業では，「情報化社会」をテーマにして，現在の社会は技術革新や通信ネットワークの発達などにより様々な面で便利になっていることを生徒に気付かせ，情報化社会への関心を持たせた。さらに，教科書や資料集『情報最新トピック集』などを参照させ，自分で調べたいテーマを決めさせた。それぞれのテーマについて情報を収集し，その情報を基にして情報を取捨選択してまとめ，Webページで情報発信をさせた。
回
項目
内容
1
情報化社会とは
社会の中で情報がどのように活用されているのか
2
情報検索の応用
1学期のカテゴリ・キーワード検索の復習と応用
3
HTMLタグ・リンク集作成
タグの役割とブラウザとの関係
4
情報のセキュリティ
情報セキュリティ，インターネット上の落とし穴など
5
TOPページの作成
入り口のページの作成
6
情報通信ネットワーク
インターネット，通信方式，IPアドレス，プロトコル，メールなど
7
タイトルロゴの作成
画像の作成
8
「現状」のページの作成
テーマについての現状を調べたページの作成
9
「これから」のページの作成
テーマについて自分で予想したページの作成
10
知的財産権とは
知的財産権・著作権について
11
仕上げ
Webページの仕上げ
12
相互評価とフィードバック
生徒同士で評価，その集計結果でフィードバック
▲表1 3学期のWebページ作成の指導計画
5．授業について
（1）テーマ設定
テーマは，生徒が自分の好きな内容を調べていくことが大事であると考え，基本的に「情報化社会に関係すること」というかなり大きなくくりとした。様々なテーマで調べることにより，他の生徒のWebページを見ていく中で情報化社会について学ぶことも期待した。生徒は，以下のようなテーマなどでWebページを作っていった。
・ 携帯電話
・ 情報家電
・ オンラインショッピング
・ GPS
・ コンピュータウイルス
・ テクノストレス など
（2）Webページの作成
Webページとそのソースを見比べ，Webページがどのようにして成り立っているのか学習させた。
次に，以下のような基本的なタグを打たせて，開始タグと終了タグを意識させた。
＜html＞
＜head＞
＜/head＞
＜body＞
＜/body＞
＜html＞
さらに次は，ブラウザへの表示の実習。＜body＞〜＜/body＞の間に文字を入力してhtml形式に保存させ，ブラウザで表示させて確認させる。生徒は，ブラウザでの表示とソースとの関係の理解が難しいので，この部分の学習は，今後のために非常に重要である。
多くの生徒は，この後面白がって作成に向かう。タグを打ってWebページを作成することで，普段何気なく閲覧しているWebページの仕組みを理解することができる。Webページ作成ソフトなどを活用している学校もあるが，本校では，1年生では仕組みを理解させるためにタグを用いて作成し，その上で3年生の選択の授業でWebページ作成ソフトを活用させている。
（3）タグ
タグについては，ある程度厳選して生徒に提示している（表2）。Webページの内容部分を作るには，この程度のタグで十分である。このタグを示しWebページの内容部分の作成を進めさせている。
タグ一覧
意味
＜h1＞〜＜h1＞
見出し
＜p＞〜＜/p＞
段落
＜a href=””＞〜＜/a＞
アンカー
＜hr＞
改行
＜img src=”” alt=””＞
画像表示
＜title＞〜＜/title＞
タイトル
▲表2 授業で提示するタグ一覧
（4）スタイルシート
Webページの彩りなどを整えるためにスタイルシートを学習させる。タグと同じように，厳選して示している（表3）。
スタイルシート
意味
body {background-color:;}
ページの背景色
hr {color:;}
水平線の色
h1 { color: 色指定;}
文字の色
h3{font-style: italic;}
文字のスタイル
p {font-size: 13pt;}
文字の大きさ
p {font-weight: bold;}
文字ボールド
p {margin-left: 30px;}
余白
a:{ color:;}
ハイパーリンクの文字色(通常)
a:active { color:;}
ハイパーリンクの文字色(アクティブ時)
▲表3 授業で提示するスタイルシート一覧
htmlファイルと関連付けができる外部スタイルシートを使い，彩りを付けている。生徒は，彩りが付くと感動する。外部スタイルシートは，タグをある程度付けることによって一括で彩りが付くので，一瞬でいろいろな色に変えられる。仕組みが理解できると生徒は面白がり試行錯誤して自分のテーマに合った色を考える。また，サンプルの色などを示して色による見る側の感じ方などを学習している。
（5）情報セキュリティ
インターネット上での個人情報の取り扱いや暗号化の仕組みなどを理解させ，フィッシングやワンクリック詐欺など，インターネット上での詐欺行為についても注意を促す。Webページに関連させ，情報セキュリティに関して多岐に渡る内容を理解させるとともに，どう行動するべきかを明確に意識させるように注意している。
（6）情報通信ネットワーク
Webページがブラウザに表示されるまでに，インターネット上でデータがどのように伝送されるのか，その大まかな流れをドメイン名とIPアドレスの関連も含め，動画を使って理解させる。さらに，パケットの流れやTCP/IP，通信方式（回線交換方式やパケット交換方式），LAN，WAN，インターネットのしくみなどを説明する。
（7）情報通信ネットワーク
Webページを作成する上で，特に著作権などに注意を向ける必要がある。法律の話なので難しい内容が多いが，「作った人の気持ちを考えて行動する」ということが重要だと強調している。生徒は，創作されたものに対してそれがどれだけの努力によってできているのかということへの認識が薄い。音楽や映画など生徒にとって身近な著作物を取り上げ，娯楽が楽しめるのもたくさんの人の力によって創作されたからであることを認識させる。楽しむためには対価を払うことが当然であり，それによって創作活動が続けていけると認識してもらいたい。また，肖像権やプライバシーにも配慮し，Webページをインターネット上に公開することで，内輪ではなく世界に発信しているという発信者の責任を理解させる。
（8）情報の信ぴょう性
インターネット上の情報は，全て正しいとは限らない。間違った情報を発信する者や偏った表現なども含まれる。そのような中で生徒には，情報の真偽を確かめるために複数の情報源を参照することを強調している。また，発信元や発信日などに注意させながら情報を集めさせている。インターネットに限らず，教科書や資料集，図書室の本，詳しい人に話を聞くなどいろいろな方法で情報を得るように指導している。
（9）相互評価
Webページの評価については，教員の評価もあるが，生徒同士の相互評価もしている。
評価の観点は以下の3点である。
1．
内容は的確で十分か，テーマに沿っているか
2．
見やすく工夫されているか
3．
ページ間の移動，リンク切れはないか
強く思うほうが数字を高く選択させている（1〜4の4段階)
（10）フィードバック
生徒に相互評価させた結果を示している。40人の評価の平均を示し，自分で作成したWebページの内容・見栄え・リンクのどこか良かったのか，悪かったのかを判断させる。全員の平均と照らし合わせながら考えさせる。生徒は，人からの評価を気にする傾向があるので，自分のWebページがどう評価されたかは非常に気になるようである。
6．考察と課題
このWebページ作成の実践は，何年もかけて練り上げたものの集大成である。年間を通じて何が一番印象に残っているかアンケートを取ると，Webページ作成をあげる生徒が多い。生徒にとってWebページは，非常に身近なものである。しかし，その作成方法はごく一部の生徒にとっては未知の領域であり，それを実際に作っていく過程を経ることで，Webページの仕組みを理解した充実感とともに，自分で丹精込めて作っていく充実感を覚えるのかも知れない。
Webページ作成から情報セキュリティ，情報通信ネットワーク，知的財産権，情報の信ぴょう性に至るまで，かなり短い時間の中にいろいろなことを習得させ作品を作っていく。やはり時間数の問題が挙げられる。また，情報をまとめる力が生徒により様々であった。これは，1・2学期の情報検索の授業によることが大きいのかも知れない。さらに，フィードバックの先を考える必要がある。フィードバックとして評価を見せた後で，それを改善する方法を考えさせてWebページを改善させたい。生徒に相互評価で感想も入力させているので，感想の中にこう改善すると良いというアドバイスを入力させ，それを基にしてWebページを改善させたい。その後，改善されたWebページを再度評価させても良いかも知れない。まだまだ改善や修正の余地はあるので，今後も模索していきたい。
7．終わりに
Webページにおいては,HTML5やCSS3が進められている。今後,パソコン以外での閲覧への対応やWebアプリケーションへの連携が更に進められるようである。
また,今年度で情報科が始まって8年目となった。私は,現在5年目である。今一度生徒のための授業ができているのか再検討の時期に来ている。この実践も,4年間生徒とともに試行錯誤したからできたものである。教材は時間をかけて改善・改良を加えていく必要があると考えている。
本校は伊豆諸島の大島にある。島では本州に比べて,生徒が受信する情報は乏しく,そのほとんどは携帯電話による情報の受発信であるのが現状である。そのような状況で,情報科がどのような役割を果たすべきなのか模索している。
