学科 HTML/CSS基礎⑨　RWD対応サイトとは

◆オンライン訓練（25/11/1）

講師：大浜信彦先生
カリキュラム資料：マルチデバイス対応の教科書①

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

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

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

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

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

◆本日のテーマ

レスポンシブWebデザインを理解しましょう

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

以下の動画を視聴しました
「Box Model」「ボックスの幅と高さの制限」「ボックスの余白」「ボーダー」「ボックスの配置と表示形式の制御」

【動画】

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 でデザインを整える
画面サイズに合わせた表示部品の導入

参考サイト

◆本日の課題

本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。いです。

▼Training課題

<p>
    <a href="https://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="https://jigsaw.w3.org/css-validator/images/vcss"
            alt="正当なCSSです!" />
    </a>
</p>

<p>
    <a href="https://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
            alt="正当なCSSです!" />
    </a>
</p>

◆本日の気付き・メモ

Training課題で、cssチェック画面のURLを間違えたばかりに、エラーメッセージが32も表示され、悩んで時間がかかってしまった。確認ページ間違い。URLの文字をコピペする大切さを思い知った。
今日の授業で自信喪失。【11/4の授業は欠席せざるを得ないし…この後やっていけるのだろうか？】

Yuko Sekimoto Portfolio

学科 HTML/CSS基礎⑨　RWD対応サイトとは

◆オンライン訓練（25/11/1）