-本日のアジェンダ-
1限目
学科 CSS基礎④
レイアウト系のプロパティについて
2限目
学科 CSS基礎④
レイアウト系のプロパティについて
3限目
学科 CSS基礎④
ボーダー／パディング／マージンのプロパティについて
4限目
学科 CSS基礎④
その他のプロパティについて
5限目
学科 CSS基礎④
本日の講義のまとめ
本日のテーマ
Webページを自由に配置できるようになりましょう
レイアウト系プロパティ
- width プロパティ（内容の幅）
- max-width プロパティ（幅の最大値）
- min-width プロパティ（幅の最小値）
- height プロパティ（内容の高さ）
- max-height プロパティ（高さの最大値）
- min-heightプロパティ（高さの最小値）
- float プロパティ（回り込み）
- clear プロパティ（回り込みを解除）
- position/top/left/bottom/right プロパティ（要素の配置方法）
- z-index プロパティ（重なりの順序方法）
- display プロパティ（要素の表示方法）
- overflow プロパティ（ボックスからあふれた内容の処理方法）
ボーダー系プロパティ
- border-style プロパティ（ボーダースタイル）
- border-color プロパティ（ボーダー色）
- border-width プロパティ（ボーダー幅）
- border プロパティ（ボーダー一括指定）
- border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）
パディング系プロパティ
- padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
- padding プロパティ（パディング一括指定）
マージン系プロパティ
- margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
- margin プロパティ（マージン一括措定）
- マージンの相殺
- マイナスマージン
- ボックスの中央配置
- ボックスの右端配置
その他のプロパティ
- border-radius プロパティ（ボーダーの丸み）
- box-shadow プロパティ（ボックスの影）
- box-sizing プロパティ（ボックスサイズ計算）
- content プロパティ（挿入コンテンツ）
- object-fit プロパティ（画像トリミング）
- object-position プロパティ（画像の配置位置指定）
本日の課題
本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。