-2025/11/04のアジェンダ-
1限目
実技 WEBデザイン実習②
RWD 対応のサイトについて
2限目
実技 WEBデザイン実習②
メディアクエリについて
3限目
実技 WEBデザイン実習②
Webページ制作実践
4限目
実技 WEBデザイン実習②
Webページ制作実践
5限目
実技 WEBデザイン実習②
本日の講義のまとめ
本日のテーマ
Webページ制作実践で作成したページをRWD対応させましょう
RWD 対応のサイトについて【復習】
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入
メモ：
viewport を指定しましょう。
横スクロールが出ないようにしましょう。（横幅がウィンドウ幅を超えないように max-width プロパティや横幅にを%で指定をしましょう）
Media Querie を使用して横幅によって表示形式を変更させることで見やすさを向上させましょう。
ハンバーガーメニューなどの導入などで操作性を向上させましょう。
トレーニング５制作：
【スペシャルトレーニング用フォルダ】
・training-1：トレーニング-1（まほうのおもちゃ屋）のRWDトレーニング用
training-2：トレーニング-2（東京動物園）のRWDトレーニング用 （ハンバーガーメニュー制作）
