-本日のアジェンダ-
1限目
実技 WEBページ制作実習②
レスポンシブ対応について
2限目
実技 WEBページ制作実習②
レスポンシブ対応について
3限目
実技 WEBページ制作実習②
WEBページ制作
4限目
実技 WEBページ制作実習②
課題制作
5限目
実技 WEBページ制作実習②
課題制作
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかく作る
内容1：前回オンライン座学の実践・補足
内容2：WEBページ作成
内容3：
課題：出来たものをUP
（注記）
・復習としてRWD対応の概要を説明してください。
・生徒が作成したデザインカンプのWebページ制作をすすめてもらってください。
・生徒各人の状況を確認しながら制作のサポートを実施してください。
・クラス全体を見て理解不足の項目がある場合は、全体講義で補足説明を実施してください。
本日のテーマ
コーディングを進めましょう！
デザインカンプを忠実に再現するのがコーダーさんのお仕事です。
RWD 対応のサイトについて※再掲
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入
Webページ制作実践⑤
参考元を確認し、ブラウザの画面幅を変えて背景色が変わる事を確認しましょう。
body{
background:#ccc;
}
@media only screen and (max-width: 1280px){
body {
background:#999;
}
}
@media only screen and (max-width: 960px){
body {
background:#666;
}
}
@media only screen and (max-width: 640px){
body {
background:#333;
}
}1280px（PC）、960px（タブレット）、640px（スマホ）と認識してみましょう。
PC表示の場合は横並びのレイアウト、スマホ表示の場合は縦積みのレイアウトとし、flexプロパティを使ってレイアウトを自在に切り替えてみましょう。
トレーニング-５
実際のWebページを作成しましょう。
トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「readme.pdf」を参照してください。
カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/
下記のファイルをダウンロードしましょう。
「training-5.zip」
本日の課題
今日できたところまでのサイトをサーバにアップしましょうょう