学科 HTML/CSS基礎⑨【オンライン】

＜本日のテーマ＞レスポンシブWebデザインを理解しましょう

1限目 学科 HTML/CSS基礎⑨レスポンシブWebデザインについて

2限目 学科 HTML/CSS基礎⑨レスポンシブWebデザインについて

3限目 学科 HTML/CSS基礎⑨レスポンシブWebデザインについて

4限目 学科 HTML/CSS基礎⑨本日の講義のまとめ

5限目 学科 HTML/CSS基礎⑨本日の講義のまとめ

---

【参考資料】

レスポンシブWebデザインについて　

【動画】

• 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回 レスポンシブな設計