◆通所訓練（25/12/19）

講師：穐谷薫先生
カリキュラム資料：なし

1限目
実技 WEBページ制作実習②
レスポンシブ対応について

2限目
実技 WEBページ制作実習②
レスポンシブ対応について

3限目
実技 WEBページ制作実習②
WEBページ制作

4限目
実技 WEBページ制作実習②
課題制作

5限目
実技 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」　

◆本日の課題

今日できたところまでのサイトをサーバにアップしましょうょう

◆本日の気付き・メモ

授業中（3.5時間）にHTMLのみ入力し、キャリコンまでの待ち時間（2時間）でCSSを修正し、「甘酒アレンジの画像」を５列２行での表示（gallery）した。
ファーストビュー背景の上にキャッチコピーを表示させる方法が上手くいかない。それ以降の内容も、画像とコメントの表示の整列が出来ていない。CSSの修整はこれから。