中高生向けデジタル表現入門（Web 制作）コースの教材化	 
Development of the Beginner's Course for Web Page Design for High SchoolStudents
河田承子

永野和男	  	  望月なを子*

Shoko KAWATA	  Kazuo NAGANO	  Naoko MOCHIZUKI*

聖心女子大学	  	  	  情報ネットワーク教育活用研究協議会*
The Graduate School of Human Sciences, University of the Sacred HeartJNK4 : Research Association for ICT Use in Education*＜あらまし＞	  	 	  現在，高校生にとってコンピュータは身近な存在であり，コンピュータが動作する基本原理に直接触れ，コンピュータを操作し発展させることを目指すことが必要とされている．しかし，初学者が，すぐに取り組むことができ，達成感があり，しかも言語やその振る舞いを理解できるソフトウ
エア環境や学習教材はほとんどない．本研究では，PBL	 (Project-Based	 Learning)という枠組みのもと，中高生でも，簡単に洗練された Web を作成し，HTML	 CSS などの記述の基本を理解できる教材を開発した．	 

＜キーワード＞	  中学	  高校	  初学者	  記述言語	  教材	  学習コース	  開発１．問題	 	  教育課程審議会が 1998 年 7 月に発表した教育課程の基準の改善に関する答申には，「小学校，中学校および高等学校を通じ，各教科などの学習においてコンピュータなどの積極的な活用を図ること」と記している(中谷ほか2002)．特に高校における教科情報においては，情報や情報処理の「科学的な理解」が重要な項目になっていることから，コンピュータによる情報処理の原理を，具体的な操作で身をもって体験することが，情報や情報処理の科学的理解に繋がると江澤(2007)は指摘する．	  広くインターネットが利用されるようになった現在，高校生にとってコンピュータ，とりわけスマホや Web は身近な存在であり，中谷ら（2002）は，コンピュータが動作する基
本原理に直接触れ，コンピュータを操作し発展させることを目指す高度な授業の必要性に言及している．しかしながら，大学などで行われている手続き型言語によるプログラミン
グ教育は，プログラミングを始める前に言語の複雑な文法を理解し，アルゴリズムを組み立てるといった前提知識や準備が必要であるものが多い（中谷ほか 2002）．加えて，現状の情報の授業では，コンピュータの簡単な机上学習に留まる学校が多く，社会に通用するICT 人材の育成の役割を果たしていないことから，単なる知識を教えるだけの従来型の教育では対応できない(中村ほか	  2009)．	  ところで，Web ページの作成は，中学校や高校の教科書でその制作が扱われるようになって以来，多くの学校で実施されているが，初期のころと異なり，HTML のタグテキストを入力しているだけでは，思い通りの（日常目にするようなレベルの）表現ができない状
況になってきている．その後，ワープロやプレゼンテーションソフトから（ソースは解読できないが）レイアウトが簡単に Web 化できる機能，サイトに文字や写真を流し込むだけで Web が仕上がるツールなどが提供・利用され，授業が行われてきたが，原理はブラックボックスになってしまっている．さらに最近
では CSS を用いたテンプレートが普及し，簡単に洗練されたデザインの Web が構成できるようになってきた．しかし，（スマホ対応など）複雑で高機能な表現機能が利用されているため，ますます初心者がソースを理解して取り組めることが困難になっている．Web においても,ブラウザによって HTML，CSS などの記述言語を解釈して実行されているメカ
ニズムが演習の中で徐々に理解できる学習過程が必要と思われるが，そのような教育的配慮をした開発環境はない．従って，実際に経験し，実際の問題を発見・解決していく中で知識を身につけていく PBL	  (Project-BasedLearning) という学習方法により，中高生が1

役割分担しながら，デジタル表現を学ぶ機会を得ることができる学習環境も重要であると考える．
２．目的	 	  以上を踏まえ，本研究では，中高生向けにデジタル表現（本発表では Web 制作）を行える学習コースと教材を開発することとした．
なお，学習コースの目標は以下の様に定めた．
・初めてであってもレイアウトの整った Webページを，短時間で作成できる．
・高校生が自分で修正・変更を加えながらデザインを検討できる．
・数名で役割分担を行いながら１つの Web を完成させることができる．
・HTML, CSS などの簡単な機能をはじめから明示し，メカニズムを考えさせる．
これらの目標を組み込むことで，短期間に，表面上の操作だけでなく，その裏側にあるメカニズムも理解することを狙いとする．
３．学習内容の吟味	 
まず，初学者の中高生でも理解でき，あとで複製によって表現の追加や変更の容易な最初の見せ方を検討した．具体的には，HTML	 CSS のなかで，高校生が理解しやすい概念や用語と，理解しにくい用語・表現を抽出して整理した．そして，単純な表現によって，多様な表現が可能な記述方法を抽出し，それらをまとめた．具体的には，扱う教材は，以下の内容に精選された．
3.1 基本レイアウト
初学者でも理解できる構成として，１ページを#header，#contents，#footer の３つに分け，#header には，#mainmenu を，#contentsには#submenu（省略可）と column（複数コピー化）で構成し，これらの範囲で，多様な表現ができるようにし（図 1）．

図 1. 基本レイアウトの概要

図 2．スタイルシートの概要
3.2 スタイルシート
導入教育のために精選した CSS の記述語は，上記の例のように，以下の９つである（図 2）．
vertical-align:margin; border; padding;float:left;float:right;clear:both;width:999px;line-height:99%;
color:white,gray,yellow....;
また，color（カラー）は，細かくは３原色や 16 進数の説明が必要なため，導入では英語で記述できる一覧を採用することにした．
3.3 トライアウト
これらの記述言語のテンプレートを使用して，グループを中心とした演習のトライアウ
トを，大学生を対象に実施した．結果，洗練されたデザインの Web ページの共同制作が，ページの構想・企画・設計の時間(ここが重要)を除けば，初心者でも１～２時間で構築できた．
４．今後の展開	 	  教材のわかりやすさと実用性について，中高校生を対象に実践を行っていく予定である．
知識理解に関する事前・事後調査を行った上で，内容と本コースの完成度を評価するとともに，その内容を e-Learning のコースとしても利用できるようにする予定である．	 
参考文献
江澤義典(2007). JavaScript プログラミングと情報教養教育，関西大学総合情報学部紀要，26，1-10.
中谷多哉子ほか(2002). オブジェクトストーム：オ
ブジェクト指向言語による初中等プログラミング
教 育 の 提 案 ， 情 報 処 理 学 会 論 文 誌 ， 43(6) ，1610-1624．
中村真二ほか(2009).高等学校の課外活動におけるPBL の検討，研究報告コンピュータと教育(CE)，1-4.

2