2023年度 愛知学泉短期大学シラバス
シラバス番号

科目名

担当者名

32206

Webプログラミング演習
Web programming exercises

村上拓也、村田仁

実務経験のある教 基礎・専門 単位数 選択・必修 開講年次・員による授業科目
別別時期

✔

専門

1選択

1・2後期

科目の概要
WEBサイトを構成するプログラム言語（HTML・CSS・JavaScript）の基礎知識と技術を習得する。テキストの例題に沿ってHTML・CSSを書き、その概念を理解しコーディング技術を高める。JavaScriptは一般知識習得程度に収め、主にjQueryを取り扱う。広い視野を持ってプログラム言語の活用までを考察する能力を持つことを求める。これらの学びにより建学の精神・社会人基礎力・pisa 型学力を統合的に身に付けていく。
（当科目はWebプログラミングに主軸を置くため、Photoshopなどによるデザインカンプの制作は行わない。）

学修内容① HTML言語を理解する。
② CSSを理解する。
③ JavaScriptを理解する。
④ 画像などのコンテンツデータの管理を理解する。
⑤ 作品課題のテーマの趣旨を理解し、的確に表現する。

到達目標① HTMLの基本を編集できるようになる。
② CSSでデザインを編集、管理できるようになる。
③ JavaScriptで動的なwebサイトを編集、管理できるようになる。
④ webサイト製作のために必要な画像データの管理知識を持ち、編集することができる。
⑤ 作品課題のテーマの趣旨を理解し、的確に表現することができる。

学生に発揮させる社会人基礎力の能力要素
主体性

具体的に各種プログラム言語を入力、編集する演習を通して、技術を習得する。

前に踏 働きかけ力
み出す力
実行力

プログラムの入力、管理を行う。

課題発見力

学生に求める社会人基礎力の能力要素の具体的行動事例

プログラム言語の構造を理解し、提案を行う。

考え抜 計画力
く力
創造力

CSS、JavaScrpitにおいて、ユーザーに最適化されたデザインを考える。

発信力

プログラムの関係を図式化し提示できる。

傾聴力プログラムについての解説を聴き、構造を理解する。

柔軟性
チーム
で働く
情況把握力
力
規律性

遅刻、無断欠席など、学修意欲欠如をきたす行動をせず、授業が円滑に進行するようルー
ルを守ることができる。

ｽﾄﾚｽｺﾝﾄﾛｰﾙ力
テキスト及び参考文献
テキスト：世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書
ISBN：978-4-297-10302-6（https://gihyo.jp/book/2019/978-4-297-10302-6）
他科目との関連、資格との関連
他科目との関連：「Webデザイン」「Webデザイン応用演習」「Webデザイン基礎演習」
資格との関連：ウェブデザイン実務士

学修上の助言受講生とのルール
Google Classroomを併用し毎回の授業を録画しますので、 円滑に授業を進めるために、授業開始5分前には着席し、不明な点はビデオを見て復習してください。
Google Classroomへのログインを済ませておいてください。

【評価方法】
評価対象

評価方法

評価の割合

到達目標

各評価方法、評価にあたって重視する観点、評価についてのコメント

①
学期
末試
験

筆記（レポート含む）・実技・口頭試験②0③④⑤①②小テスト

0③④

学
修成果

⑤① ✓② ✓レポート

0③ ✓④ ✓平
常評価⑤ ✓

成果発表（プレゼンテーション・作品制作等）

80

① ✓

14回目（または15回目）に課題の紹介を行う。

② ✓課題テーマのコンセプトが的確であるか、オリジナリティに富んでいるか、完成度が高く表現にも工夫が見られるか、学生審査（投票）にて得票があるか、PISA型学力が身についているかを総合的に判断し採点する。

③ ✓
④ ✓
⑤ ✓
① ✓

学
修行動

② ✓
社会人基礎力（学修態度）

20

③ ✓
④ ✓
⑤ ✓

総合評価
割合

（主体性） アプリケーションの扱いについて、繰り返す学習を行った。
（実行力） 不明点を確認しながら学習する姿勢を持つことができた。
（課題発見力） 自分の学修上の問題点の解決策を考えた。
（創造力） 授業で修得した事を応用して、新しい発想のもと課題に取り組むことができた。
（発信力） 話だけで伝えるのが難しい場合には、資料などを用意した。
（傾聴力） 質問された場合は、何を聞かれているか理解して回答を行った。
（規律性） 遅刻、無断欠席など、学修意欲欠如をきたす行動をせず、授業が円滑に進行するようルールを守ることができる。欠席した場合は欠席届を提出し、フォローレポート課題を行う。

100【到達目標の基準】
到達レベルS(秀)及びA(優)の基準
S(秀)：提出作品について、テーマのコンセプトが的確であり、オリジナリティに富み、かつ極めて完成度が高く表現にも工夫が見られる。レポート内容が的確である。（学生審査（投票）にて大多数の得票があるかどうかも参考とする。）

A(優)：提出作品について、完成度が高く表現にも工夫が見られる。レポート内容が的確である。（学生審査（投票）にて多数の得票があるかどうかも参考とする。）

到達レベルB(良)及びC(可)の基準
B(良)：提出作品について、完成度が一定の水準に達してはいるが、改善項目が多数存在する。レポートが提出されている。（学生審査（投票）にて少数の得票があるかどうかも参考とする。）

C(可)：提出作品について、未完成または完成度が著しく低い。レポートが未提出である。（学生審査（投票）にて得票がほとんどないかどうかも参考とする。）

週1

2

学修内容

授業の実施方法

到達レベルC(可)の基準

予習・復習【全体概要】
HTML、CSS、JavaScriptの各役割を理解する。
Dreamweaverを使用し、各基本タグを記述する。

講義
演習
テキストに沿って、該当頁の演習を行う。

テキスト該当頁の理解ができ、概要を説明できる。

(予習)テキスト「P31〜P76」に目を通しておく。
(復習)授業内容をまとめておく。

演習
テキストに沿って、該当頁の演習を行う。

テキスト該当頁の理解ができ、HTMLの内容を適切に書くことができる。

(予習)テキスト「P42〜P45、P135〜P152」に目を通しておく。
(復習)授業内容をまとめておく。

テキスト該当頁の理解ができ、HTMLの内容を適切に書くことができる。

(予習)テキスト「P135〜P152」に目を通しておく。
(復習)授業内容をまとめておく。

テキスト該当頁の理解ができ、CSSの内容を適切に書くことができる。

(予習)テキスト「P135〜P152」に目を通しておく。
(復習)授業内容をまとめておく。

テキスト該当頁の理解ができ、CSSの内容を適切に書くことができる。

(予習)テキスト「P150〜P151、P87〜P91、P226〜P245」に目を通しておく。
(復習)授業内容をまとめておく。

小テストの理解ができ、HTML・CSSの内容を適切に書くことができる。

(予習)テキスト「P153〜P182、P183〜P198」に目を通しておく。
(復習)授業内容をまとめておく。

テキスト該当頁の理解ができ、HTML・CSSの内容を適切に書くことができる。

(予習)テキスト「P199〜P224」に目を通しておく。
(復習)授業内容をまとめておく。

テキスト該当頁の理解ができ、HTML・CSSの内容を適切に書くことができる。

(予習)テキスト「教科書P51のデザイン」に目を通しておく。
(復習)授業内容をまとめておく。

・講師紹介・初回アンケート
・WWWやWEBサイト制作の基本（テキスト：P11〜P30）
・HTMLコーディングの基本を学ぼう（P31〜P52）【HTML（マークアップ概要）】
head要素・文書構造の理解を理解する。
Dreamweaverを使用し、各基本タグを記述する。
・HTMLコーディングの基本 続き（P31〜P52）
・画像表示とリンクをマークアップ（P53〜P76）【HTML（img・リンク・リスト・ナビ）】
Dreamweaverを使用し、各基本タグを記述する。

3

演習
テキストに沿って、該当頁の演習を行う。

・初回アンケート結果共有
・head要素の中に入る要素（P42〜P45）
・HTMLの文書構造を理解する・CSSコーディングの基本を学ぼう（P135〜P152）【CSS（基本ルール）】
演習
Dreamweaverを使用し、基 テキストに沿って、該本となるCSSを記述する。 当頁の演習を行う。

4

5・HTMLの文書構造理解 続
き・CSSコーディングの基本を学ぼう（P135〜P152）【CSS（セレクタ ・クラス・IDなど）】
Dreamweaverを使用し、基本となるCSSを記述する。

演習
テキストに沿って、該当頁の演習を行う。

・CSSコーディングの基本を学ぼう（P135〜P152）

6

7【HTML・CSS（確認テスト）】
HTML・CSSの理解度を測る小テストを行う。

演習
小テストを行う。

【CSS（擬似クラス・見出しの装飾）】
Dreamweaverを使用し、HTML・CSSを記述する。

演習
テキストに沿って、該当頁の演習を行う。

・CSSコーディングの基本「擬似要素」（P150〜P151）
・HTMLを記述しリストでナビを作る（P87〜P91）
・CSSを記述しリストでナビを作る（P226〜P245）【CSS（リスト・ナビ）】
Dreamweaverを使用し、HTML・CSSを記述する。

8

・下記CSSレッスン（P153〜P182）
文字サイズ／行間／書体／Webフォント／文字の色／見出しの設定／段落の設定

演習
テキストに沿って、該当頁の演習を行う。
サイトの実装を各自で行う。

能力名：主体性 働きかけ力 実行力 課題発見力 計画力 創造力 発信力 傾聴力 柔軟性 情況把握力 規律性 ｽﾄﾚｽｺﾝﾄﾛｰﾙ力

時間(分) 能力名90

主体性
発信力
規律性

90

主体性
実行力
課題発
見力
傾聴力

90

主体性
実行力
課題発
見力
傾聴力

90

主体性
実行力
課題発
見力
傾聴力

90

主体性
実行力
課題発
見力
傾聴力

90

主体性
実行力
課題発
見力
傾聴力

90

主体性
実行力
課題発
見力
傾聴力

90

主体性
実行力
課題発
見力
創造力
傾聴力

週

910

学修内容

授業の実施方法

到達レベルC(可)の基準

予習・復習【CSS（レイアウトの基本_1）】
Dreamweaverを使用し、HTML・CSSを記述する。

演習
サイトの実装を各自で行う。
WEB制作課題の準備を行う。

サイトのレイアウトが実装できる。

(予習)WEB制作課題の準備（テーマ決め・原稿集めなど）をしておく。
(復習)授業内容をまとめておく。

演習
サイトの実装を各自で行う。
最終課題の準備を行う。

サイトのレイアウトが実装できる。
WEB制作課題のブレストができ、テーマ記入と原稿集めができる。

(予習)JavaScript（jQuery）の下調べをしておく。
(復習)授業内容をまとめておく。

演習
最終課題を各自で行う。

JavaSciptとjQueryを理解できる。
最終課題を進めることができる。

(予習)進行状況に応じて最終課題を進めておく。
(復習)授業内容をまとめておく。

最終課題を進めることができる。

(予習)進行状況に応じてWEB制作課題を進めておく。
(復習)授業内容をまとめておく。

・CSSレイアウトの基本を学ぼう（P183〜
P198）【CSS（レイアウトの基本_2）】
Dreamweaverを使用し、HTML・CSSを記述する。
WEB制作課題のブレストができ、テーマ記入と原稿集めをする。

時間(分) 能力名

90

主体性
実行力
課題発
見力
創造力
傾聴力

90

主体性
実行力課題発
見力
創造力
傾聴力

90

主体性
実行力
課題発
見力
創造力
傾聴力

90

主体性
実行力
課題発
見力
傾聴力
規律性

90

主体性
実行力
課題発
見力
創造力
傾聴力
規律性

90

主体性
実行力
課題発
見力
創造力
傾聴力
規律性

90

主体性
実行力
課題発
見力
創造力
傾聴力
規律性

・CSSレイアウトの基本を学ぼう（P183〜P198）

11【Web制作最終課題（岡崎市紹介サイト） 1週目】
最終課題のテーマを決めて、HTMLとCSSで実装する。
・JavaScript 説明・jQuery 説明

12

13

14

15

【Web制作最終課題（岡崎市紹介サイト）
2週目】
最終課題のテーマを決めて、HTMLとCSSで実装する。

演習
最終課題を各自で行う。

【Web制作最終課題（岡崎市紹介サイト）
3週目】
最終課題のテーマを決めて、HTMLとCSSで実装する。

演習
最終課題を各自で行う。

【作品閲覧と審査会】
互いの作品を閲覧し、審査する。グーグルフォームで投票を行う。

講義・演習
課題をプレゼンし投票とフィードバックを行う。

プレゼンができ、互いの作品を批評できる。

講義
講師からの講評とフィードバックを聞く。
審査結果を経て、気づいた点をレポートにまとめる。

審査結果とフィードバック内容から作品の内省ができる。
分析レポートが記入できる。

最終課題を進めることができる。

・プレゼンテーション or ポ
スター発表（＊状況による）・審査（投票）・学生同士でのフィードバッ
ク記入【講師からの講評とフィードバック】
作品を振り返り、分析しレポートにまとめる。
・審査結果返却
・総評
・分析レポート記入(予習)進行状況に応じてWEB制作課題を進めておく。
(復習)授業内容をまとめておく。

(予習)制作課題で改善事項があれば改善しておく。
(復習)授業内容をまとめておく。

(復習)授業内容をまとめておく。

能力名：主体性 働きかけ力 実行力 課題発見力 計画力 創造力 発信力 傾聴力 柔軟性 情況把握力 規律性 ｽﾄﾚｽｺﾝﾄﾛｰﾙ力