-本日のアジェンダ-
1限目
学科 CSS基礎③
レイアウト系のプロパティについて
2限目
学科 CSS基礎③
練習問題の説明
3限目
学科 CSS基礎③
CSSのプロパティと値を考える
4限目
学科 CSS基礎③
練習問題の解説
5限目
学科 CSS基礎③
本日の講義のまとめ
本日のテーマ
レイアウトデザイン練習問題③（レイアウトを定義するCSS）
本日は、レイアウト系のCSSを中心に説明しますが、一部のプロパティと各プロパティの詳細説明は「CSS基礎④」で説明します。
レイアウト系プロパティ
- width プロパティ（内容の幅）
- max-width プロパティ（幅の最大値）
- min-width プロパティ（幅の最小値）
- height プロパティ（内容の高さ）
- max-height プロパティ（高さの最大値）
- min-heightプロパティ（高さの最小値）
- float プロパティ（回り込み）
- clear プロパティ（回り込みを解除）
- position/top/left/bottom/right プロパティ（要素の配置方法）【CSS基礎④で説明】
- z-index プロパティ（重なりの順序方法）【CSS基礎④で説明】
- display プロパティ（要素の表示方法）
- overflow プロパティ（ボックスからあふれた内容の処理方法）
ボーダー系プロパティ【CSS基礎④で説明】
- border-style プロパティ（ボーダースタイル）
- border-color プロパティ（ボーダー色）
- border-width プロパティ（ボーダー幅）
- border プロパティ（ボーダー一括指定）
- border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）
パディング系プロパティ
- padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
- padding プロパティ（パディング一括指定）
マージン系プロパティ
- margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
- margin プロパティ（マージン一括措定）
- マージンの相殺
- マイナスマージン
- ボックスの中央配置
- ボックスの右端配置
その他のプロパティ【CSS基礎④で説明】
- border-radius プロパティ（ボーダーの丸み）
- box-shadow プロパティ（ボックスの影）
- box-sizing プロパティ（ボックスサイズ計算）
- content プロパティ（挿入コンテンツ）
- object-fit プロパティ（画像トリミング）
- object-position プロパティ（画像の配置位置指定）
練習問題：レイアウトを定義するCSS
【資料】
ドロップボックスの資料をダウンロードしましょう。
資料 ＞ 【STEP3】Webページの理解 ＞ レイアウトデザイン 練習問題③
Webサイト制作のレイアウトを定義するCSSの練習資料です。
【動画】
- レイアウトを定義するCSS
https://youtu.be/MeZU0DWXkbw（8分39秒）
本日の課題
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。