５・１１　WEBページ制作実習

使用したソフト：テラパット　(製作時間：１２０分)

自分で作成したLP制作のデザインラフを参考に作成。グラデーションの色味を抽出するために、photoshopにデザインラフをドロップして抽出。

今までの色々なことがやっと形になったと思えて、本当に嬉しかった！！

文字の色味や切り替わりの部分などを、もう少しブラッシュアップしたい。

本日のテーマ

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

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プロパティを使ってレイアウトを自在に切り替えてみましょう。