月: 2023年6月

-本日のアジェンダ-

1限目
学科 CSS基礎⑥
ボックスモデルについて

2限目
学科 CSS基礎⑥
ボックスモデルについて

3限目
学科 CSS基礎⑥
レスポンシブWEBデザインについて

4限目
学科 CSS基礎⑥
レスポンシブWEBデザインについて

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

本日のテーマ

Box modelについて（レスポンシブWEBデザイン）

Box modelについて（RWD）

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料 ＞ 【STEP3】Webページの理解 ＞ マルチデバイス対応の教科書①.pdf
Box model（レスポンシブ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秒）

RWD 対応のサイトについて

• 幅広デザインでの Web ページ作成
• viewport 定義の指定
• 横幅変動時のコンテンツ幅を設定
• Media Querie でデザインを整える
• 画面サイズに合わせた表示部品の導入

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

-本日のアジェンダ-

1限目
学科 CSS基礎⑤
練習問題の説明

2限目
学科 CSS基礎⑤
Webページ運用・作成の困った問題

3限目
学科 CSS基礎⑤
練習問題の解説

4限目
学科 CSS基礎⑤
擬似クラスと擬似要素について

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

本日のテーマ

レイアウトデザイン練習問題④（Webページ運用・作成の困った問題）

練習問題：Webページ運用・作成の困った問題

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料 ＞ 【STEP3】Webページの理解 ＞ レイアウトデザイン 練習問題④
Webサイト制作のWebページ運用・作成の困った問題の練習資料です。

【動画】

• Webページ運用・作成の困った問題
  https://youtu.be/7F5Z-v2rbTA（11分44秒）

擬似クラス系セレクタ

• link 擬似クラス（未訪問リンクスタイル）
• visited 擬似クラス（訪問済リンクスタイル）
• hover 擬似クラス（オンカーソルスタイル）
• active 擬似クラス（アクティブスタイル）
• first-child/last-child 擬似クラス（先頭・最終の子要素指定）
• nth-child 擬似クラス（n 番目の子要素指定）
• nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
• not 擬似クラス（指定値以外の要素指定）

擬似要素系セレクタ

• first-letter 擬似要素（要素の 1 文字目を指定）
• first-line 擬似要素（要素の 1 行目を指定）
• before/after 擬似要素（要素の直前・直後にコンテンツの挿入）

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。