授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
webサイトに適したファイル容量の感覚を身につける。 |
印刷向きの大きなファイルをPhotoshopのweb用に保存モードで適切にリサイズ＆圧縮してweb用ファイルを生成し、webサイトに適したファイル容量の感覚を身につける。 |
| 【理解度確認】画面共有による進捗確認。 |
| 2 |
階層構造（ディレクトリ）のしくみを身につける。 |
ブラウザ上でエラーを起こしているwebサイトを、リンクを正しく繋げて修正し、ディレクトリのしくみを身につける。絶対パスと相対パスについて学ぶ。 |
| 【理解度確認】画面共有による進捗確認。 |
| 3 |
主要なデバイスのブラウザ画面サイズを把握する。 |
スマートフォンの普及状況から、スマホサイトの必要性を理解する。PCサイトと比較して、スマートフォン向けサイトの特徴を知る。PCブラウザに標準搭載されているウェブ開発者向けツール（デベロッパーツール）の使用方法を学ぶ。 |
| 【理解度確認】画面共有による進捗確認。 |
| 4 |
ボックスモデルを理解する。 |
HTML文書内のすべての要素は、ボックスと呼ばれる四角形の領域を生成しており、そのボックスモデルについて、小課題を通して理解を深める。 |
| 【理解度確認】画面共有による進捗確認。課題の提出。 |
| 5 |
レスポンシブWebサイトを組む際に必要な基本を理解する。 |
モバイルファーストで作成したページをレスポンシブにして、大きい画面ではPC版のレイアウトで表示するように設定する。レスポンシブの基本、ビューポート（viewport）とメディアクエリ（@media）を理解する。フロート（float）でレイアウトする。 |
| 【理解度確認】画面共有による進捗確認。 |
| 6 |
自分の得意分野（作品）をより良く伝える「コンセプト」を生かせるレイアウトを選ぶ。 |
当授業の制作課題となるポートフォリオサイトのデザインコンセプトを決定し、それを生かせるレイアウトを選ぶ。ポートフォリオサイトに組み込む写真素材と文言を準備＆作成。 |
| 【理解度確認】画面共有による進捗確認。 |
| 7 |
CMSを導入し自身のポートフォリオサイトを作成開始する。 |
CMSの管理画面を操作し、編集する箇所を把握する。 |
| 【理解度確認】画面共有による進捗確認。 |
| 8 |
ポートフォリオサイトにヘッダーとフッターを作成する。 |
個人制作課題「ポートフォリオサイト」をコーディングする① |
| 【理解度確認】画面共有による進捗確認。 |
| 9 |
ポートフォリオサイトに必須のページを新規作成する。 |
個人制作課題「ポートフォリオサイト」をコーディングする②
|
| 【理解度確認】画面共有による進捗確認。 |
| 10 |
自身のポートフォリオサイトにグローバルナビゲーションを挿入する。 |
個人制作課題「ポートフォリオサイト」をコーディングする③
|
| 【理解度確認】画面共有による進捗確認。 |
| 11 |
自身のポートフォリオサイトをレスポンシブにする。 |
個人制作課題「ポートフォリオサイト」をコーディングする④
|
| 【理解度確認】画面共有による進捗確認。 |
| 12 |
自身のポートフォリオサイトのレイアウトをCSSで調整する。 |
個人制作課題「ポートフォリオサイト」をコーディングする⑤ |
| 【理解度確認】画面共有による進捗確認。 |
| 13 |
アイコン画像とアイコンフォントの違いを理解し、アイコンフォントの導入方法を学ぶ。 |
webフォント、アイコンフォントの導入方法を学ぶ。 |
| 【理解度確認】画面共有による進捗確認。 |
| 14 |
サイトを公開する。 |
文字のヌケや画像の入れ忘れでレイアウトが崩れていないか等、すべてのページをPCとスマホからチェックする。 |
| 【理解度確認】画面共有による進捗確認。 |
| 15 |
完成サイトについて自身のデバイスを通して客観的視点を持ち、改善の余地がある点を自ら発見・補完し、サイトをよりよいものに仕上げられるようになる。 |
個人制作課題「ポートフォリオサイト」の適宜ブラッシュアップを行う。 |
| 【理解度確認】課題の提出。 |
