-本日のアジェンダ-
1限目
実技 WEBページ制作実習②
レスポンシブWebデザインについて
2限目
実技 WEBページ制作実習②
RWD 対応のサイトについて
3限目
実技 WEBページ制作実習②
Webページ制作実践
4限目
実技 WEBページ制作実習②
Webページ制作実践
5限目
実技 WEBページ制作実習②
Webページ制作実践
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：RWDについて
内容1：RWDについて
内容2：WEBページ作成⑤
内容3：
課題：出来たものをUP
【注記】
・新カリキュラム用に修正（2024/11/7：大浜）
本日のポイント
レスポンシブWebデザインを理解しましょう
レスポンシブWebデザインについて
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「マルチデバイス対応の教科書①.pdf」
「マルチデバイス対応の教科書②.pdf」
【動画】
- Box Model
https://youtu.be/K1PcxtiiObc（12分19秒） - ボックスの幅（width）と高さ（height）の制御
https://youtu.be/UiOlkIahkT8（8分46秒） - ボックスの余白（padding/margin）の制御
https://youtu.be/kVjUE1xI9tY（9分41秒） - ボーダー（border）と横並び（float）の制御
https://youtu.be/uwNyg_GLYWM（7分37秒） - ボックスの配置と表示形式の制御
https://youtu.be/7_Ez0F5WKd8（9分13秒）
RWD 対応のサイトについて
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入
Webページ制作実践⑤
Webページ制作実践で作成したページをレスポンシブWebデザイン対応をさせましょう。
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「chapter5.zip」
- メディアクエリの記述
- レスポンシブWebデザインの対応
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
レスポンシブWebデザインまで完了したファイルを下記に格納してあります。
必要に応じてダウンロードして確認してください。
「chapter5.zip」
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）