1限目
実技 WEBページ制作実習
RWD 対応のサイトについて
2限目
実技 WEBページ制作実習
メディアクエリについて
3限目
実技 WEBページ制作実習
Webページ制作実践
4限目
実技 WEBページ制作実習
Webページ制作実践
5限目
実技 WEBページ制作実習
Webページ制作実践
ページ制作実習
-本日のアジェンダ-
1限目
実技 WEBページ制作実習
RWD 対応のサイトについて
2限目
実技 WEBページ制作実習
メディアクエリについて
3限目
実技 WEBページ制作実習
Webページ制作実践
4限目
実技 WEBページ制作実習
Webページ制作実践
5限目
実技 WEBページ制作実習
Webページ制作実践
本日のテーマ
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プロパティを使ってレイアウトを自在に切り替えてみる。