11/4実技 WEBデザイン実習②

-本日のアジェンダ-

1限目
実技 WEBデザイン実習②
RWD 対応のサイトについて

2限目
実技 WEBデザイン実習②
メディアクエリについて

3限目
実技 WEBデザイン実習②
Webページ制作実践

4限目
実技 WEBデザイン実習②
Webページ制作実践

5限目
実技 WEBデザイン実習②
本日の講義のまとめ

本日のテーマ

Webページ制作実践で作成したページをRWD対応させましょう

RWD 対応のサイトについて【復習】

• 幅広デザインでの Web ページ作成
• viewport 定義の指定
• 横幅変動時のコンテンツ幅を設定
• Media Querie でデザインを整える
• 画面サイズに合わせた表示部品の導入

/* スタイルシート */
body {
	background: #eee;
}
@media screen and (max-width: 1500px) {
	body {
		background: red;
	}
	
@media screen and (max-width: 1000px) {
	body {
		background: blue;
	}
@media screen and (max-width: 700px) {
	body {
		background: green;
	}

本日の課題

Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）

①trainingフォルダ修正

②training-1フォルダ_RWD対応修正（スクロールのパーツ記述）