36520001

Webサイト制作実践演習 II

2025年度3Q(後期)

演習

Web

小松 学史

実務家教員

2〜3

2単位

土曜1限、土曜2限

実際に使用される環境に応じた表示ができるwebサイトの構築を理解し、自身でそれを想定したサイト構築を設計・構築できるようになる

実践演習１でデザインカンプからWebサイトの文書構造を構築することを行ってきた。
実践演習２では、マルチデバイスを意識したコーディングや、サイト構築の効率化について把握をする。
レスポンシブWebデザインを実践し、複数の環境に対応したサイト構築ができるようになる。

Webサイト制作実践演習Ⅰの単位修得

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

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

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

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

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

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

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

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

課題をもって評価する。

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

・授業概要説明
・レスポンシブWebデザインの基礎について
・レスポンシブWebデザインの定義
・レスポンシブWebデザインの実装方法
・レスポンシブデザインのブレイクポイントについて
・画面解像度とCSSの対応について
・課題１ レスポンシブWebデザインの基本コーディングを実施

・CSSプリプロセッサを使用したサイト構築について
・SASSについて
・SASSの環境構築
・SASSの構文について（ネスティング、ファイル分割、変数、mixin、extend）
・導入についての課題
・ネイティブCSSでできることの違いについて
・課題2 CSSで書かれているものをSASSの記法に直す課題の実施

・レスポンシブWebデザイン​単位について​
・レスポンシブWebデザインにおける、table表示の変更について
・レスポンシブWebデザイン​ハンバーガーメニューについて​
・ハンバーガーメニューの構築実践
・課題3　 レスポンシブWebデザインの基本コーディング（表組み、ハンバーガーボタン）の実施

・CSSグリッドを使用したサイト構築について
・gridを使った実装の構文について
・subクエリーの利用について
・コンテナクエリーについて
・課題４　CSSグリッドを使ったトレーニングの課題を実施

・セクションを斜めに区切る方法​について
・object-fitプロパティを使用した画像の表示方について
・課題5　レスポンシブデザインの総合的な課題（複数ページ作成）の実施

・CSSフレームワークについて
・CSSフレームワーク、Bootstrapの使用事例について
・課題5の実施
・課題6 SPデザインをPCにも適用するサンプル作成の実施

・事例から学ぶレスポンシブデザインのパターンについて
・課題5の実施
・課題6の実施

・Webサイト制作の次のステップについて
・課題5の実施
・課題6の実施

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