『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。
CSSのクラスセレクタと複合セレクタを理解する
今回はWebサイト制作の授業の中でも、Webページの装飾に関わるCSSプログラムのセレクタについての授業例です。
CSSではWebページのどの部分に装飾を行うか（文字や背景の色の変更や、パーツのレイアウトなど）を、セレクタを使って指定します。
そしてこのセレクタが初学者には分かりにくく、講義を聞いたり手本のとおりにプログラムを作ってみてなんとなく分かった気がしても、実際に自分でWebページを作ってみると困る学生が多くいました。
そこでできるだけ授業の課題だけでなく、試行錯誤できる時間の確保や授業環境が大切と考えていました。
課題中のHTMLプログラムの難易度について
CSSプログラムを学ぶ時には、仕組み上必ずHTMLプログラムも必要になります。つまり、授業の中でCSSとHTMLという２つのプログラミング言語を同時に扱う必要がある訳です。あくまで学習の中心はCSSですので、HTMLプログラムの内容や難易度は適切にしておきたいところです。
なぜなら同じWeb制作を学ぶといっても、目的は様々だからです。
例えば、
・Bracketsなどのテキストエディタを用いてプログラミングの理解をメインに行う授業
・Dreamweaverを使ったWeb制作技術をメインに学ぶ授業
前者はプログラマやネットワークエンジニアを目指す学生が多い学科で行われるため、プログラミングそのものへの理解がより求められます。それに対して後者はWebサイトのデザインを学びたい学生が多い学科で行われるため、プログラミングの習得に合わせてDreamweaverの複雑な操作も覚えなくてはならないといった違いがあります。
授業概要
以下は、テキストエディタを用いたWebプログラミングの授業で配布したプリントの例です。
※今回から下記サイトを参考にPDFファイルを埋め込んでみました。
『学び合い』について
『学び合い』（二重括弧付き）は、授業の考え方です。教員の授業観などを学生に共有しつつ学習を進めて行きます。
授業方法ではないため、単純にプリントを配ればアクティブラーニングが成立するというものではないと考えています。そのため、もし私のプリントを参考にして下さる方は、『学び合い』についての多くのサイトや書籍がありますのでぜひ一度ご覧ください。
