-本日のアジェンダ-
1限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて
2限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて
3限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて
4限目
学科 HTML/CSS基礎⑨
本日の講義のまとめ
5限目
学科 HTML/CSS基礎⑨
本日の講義のまとめ
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：なし
【注記】
・RWDの実施方法を具体的に説明します。
・わかりにくいので具体的な例を示して説明してください。
本日のテーマ
レスポンシブWebデザインを理解しましょう
レスポンシブWebデザインについて
【資料】
カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/
下記のファイルをダウンロードしましょう。
「マルチデバイス対応の教科書①.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秒）
レスポンシブWebでデザイン（RWD） 対応のサイトについて
レスポンシブWebデザイン（RWD）を理解して画面サイズの異なる複数のデバイスでも快適に閲覧できるWebサイト（ページ）を作成しましょう。
- レスポンシブWebでデザイン（RWD）の考え方
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入
参考サイト
- RWDレスポンシブウェブサイトとは何ですか？基本的なCSSの書き方、SEOランキングの効果を最適化！
- レスポンシブ ウェブ デザインとは？～基本から作り方まで徹底解説～
- RWDに効くCSSテクニック | 第1回 レスポンシブな設計
本日の課題
本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。