36510001

Webサイト制作実践演習 I

2025年度1Q(前期)

演習

Web

小松 学史

実務家教員

2〜3

2単位

土曜1限、土曜2限

PC教室の端末や履修生のPCを使用し、デザインカンプや出題される課題を元にコーディング計画を立て、文書構造の作成・レイアウト実践を数多く行なうことで、実務レベルでのWebコーディングスキルを習得する。

デザインカンプや出題される課題からWebサイトの文書構造をイメージし、それを形にするためのマークアップを授業内で繰り返し行なうことで、実務レベルでのWebコーディング手法を理解する。

・Webサイトマークアップ演習
・Webサイトスタイリング演習

上記すべての単位修得

課題による緩和あり

・課題点100%で採点を行う。
・出席率70％未満のものは、採点を行わない。
・公欠については1回まで認め出席扱いとする。
（8回の授業において、公欠について2回以上認めてしまうと実施される授業の半分以上出席しなくても70%を超えてしまう可能性があるため）

各回に出題する課題については、難易度について配点が異なる。
基本全て提出すること。

課題については、以下の3つの観点から採点を実施する。

デザインについて
・提示されたデザインカンプの再現性が高いこと
　・指定されたビジュアルの配置、フォントファミリー、フォントサイズ、配色、レイアウト、余白がデザインカンプ通りになっていること
　・システム特有の文字間隔や行間のずれについて、不可抗力な箇所については一致しなくても良い

・HTMLについて
文法があっている
validationをクリアしている
文書がセマンテックになっている。見出しが適切につけられている。アウトラインがしっかりと取れている
HTMLのクラス名のつけ方が適切である
著作権の表記の記載が間違っていない
リストを適切に使用している
見た目を調整する形でタグを使用していない
わかりやすいコメントの記載がある

・CSSについて
文法が間違っていない
タイプセレクタにデザインの依存性の高い記載が書かれていない
クラス名について、再利用性やメンテナンス性が高くなっている
わかりやすいコメントの記載がある
詳細度が低く設定されている（IDセレクタを極力使用しない）
命名規則に一貫性がある

課題提出をもって評価する。

課題内容はグループウェアや演習中に告知する。

提出された課題をもって評価する。

試験や追試験、再試験等は行わない

・授業の進め方、評価について
・制作の環境について
・授業の内容について
・HTMLコーディングの計画について
・HTMLとCSSを使ったレイアウトの考え方について
・Flexboxについてのプロパティについて
・課題演習について
・課題１flexboxを使った、基本的なコーディングを実施する

・CSSの劣化についえｔ
・コーディングガイドライン、規約について
・W3Cのバリデーション
・OOCSSについて
・可変と固定のレイアウトについて
・質問返答
・課題１フィードバック
・課題２ 可変と固定の幅を考えるコーディングを実施

・CSSの継承と上書きについて
・CSSの詳細度について
・ブラウザのデベロッパーツールついて
・コーディング時に知っておいてほしいデザインの原則
・可変背景
・positionプロパティの使用について
・課題２フィードバック
・課題３ 可変背景とpositionを考えるコーディングを実施

・スマートフォン対応について
・解像度とCSSの関係ついて
・viewportについて
・スマートフォン上での可変と固定について
・課題３フィードバック
・課題４スマートフォンのブラウザを考慮したコーディング

・課題５小さい店舗のWebサイト制作（複数ページを作成する総合的な課題）についての要件説明
・複数ページを作る上での考え方について
・CSSの設計について
・課題４フィードバック
・課題５小さい店舗のWebサイト制作（複数ページを作成する総合的な課題）を実施する

・課題５の実施
・課題５についてのフィードバック
・アクセシビリティについて
・CoreWebVitalsについて
・FTPについて
・追加課題について

・課題５の実施
・課題５についてのフィードバック
・CSSレイアウトパターンについて
・追加課題について
・レスポンスWebデザインの概要について

・課題５の実施
・課題５についてのフィードバック
・追加課題の実施（課題５終了者向け）
・追加課題についてのフィードバック
・Webサイト技術ロードマップについて
・Webサイトの現状と今後の学ぶポイントについて

小松学史
komatsu@dhw.ac.jp
大学公式Slack