『学び合い』という授業の考え方に基づいて行った、プログラミングの授業実践を記録しています。
HTMLとCSSを併用する
今回はWebサイト制作の授業の中で、Webページ上に表示する文字や画像情報を記述したHTMLファイルに、文字色やレイアウトなどの装飾を記述したCSSを連動させる方法を学習した授業についてです。
最初に反省
今プリントを見直すと、授業のねらいが多すぎて学生達にとってはどこまでやればいいのか不安になったかもしれないと思いました。
こうなった背景としては、この年の授業スケジュールがタイトだったことや、学生の理解度にばらつきがあったことで、ここまでは最低限クリアしてほしいことをMissionとして、よりチャレンジできる人はチェックポイントも、という意図でした。
改善の余地がありです。
授業概要
授業で配布したプリントは次のようなものです。
「HTMLとCSSの連携」
Mission：HTMLとCSSを両方使ってWebページを作ることができる。
課題 下記のフォルダ＆ファイル構成で、HTMLとCSSを連携させた１つのWebページを作る。
フォルダ＆ファイル構成
GWフォルダの中に、index.htmlとstyle.cssが入っている。
※実際には樹形図で指示
作業
１）index.htmlとstyle.cssファイルを作成する。
２）index.htmlに見出し１と段落を作る。
見出し1にはゴールデンウィークにしたこと、言った場所など。段落にはその説明を表示させる。
（文章は短くてOK）
３）index.htmlとstyle.cssを連携させること。
ヒント：linkタグを使う。
４）style.cssにCSSを記述し、文字色や背景色を設定する。
チェックポイント
HTMLとCSSの役割の違いを説明できる。
CSSの「タグセレクタ」の役割を説明できる。
反省の追加
「技術」を身に付けるのか、「考え方」を理解するのか、ゴールの種類もいくつかあると思います。そういったことも今後は明確に分けて考えていけたらと思います。
『学び合い』について
『学び合い』（二重括弧付き）は、授業の考え方です。授業方法ではないため、単純にプリントを配ればアクティブラーニングが成立するというものではないだろうと考えています。もし私のプリントを参考にして下さる方は、『学び合い』についての様々なサイトや書籍がありますのでそちらもぜひご覧くださいね。
