【FFFTP】CSS基礎2024/01/29

-本日のアジェンダ-

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/
sticky/ある一定のところまで移動すると張り付く
親要素relative/相対位置
　子要素absolute/絶対位置…変わる
　子要素fixed/固定…ずっと同じ場所にいる
親要素fixed/
ネガティブマーチン？
z-index プロパティ（重なりの順序方法）…ゼロの起点～マイナスまで…大きい数字が前。レイヤーのようなもの
display プロパティ（要素の表示方法）
overflow プロパティ（ボックスからあふれた内容の処理方法）

ボーダー系プロパティ

border-style プロパティ（ボーダー(枠線)スタイル）
- none
- hidden
- solid
- double
- dashed
- clotted
border-color プロパティ（ボーダー色）…transparent:透明
border-width プロパティ（ボーダー幅）px;
border プロパティ（ボーダー一括指定）
border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）
border-radius プロパティ（ボーダーの丸み）％…大きさが変わらない　px…大きさが決まるので自分で大きさを設定しなければならない
　border-radiusジェネレーターhttps://web-toolbox.dev/tools/border-radius-generator

パディング系プロパティ

padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
padding プロパティ（パディング一括指定）

マージン系プロパティ

margin-top/-bottom/-left/-right プロパティ（マージン上下左右）別々の線が引ける
margin プロパティ（マージン一括措定）

マージンの相殺
マイナスマージン
ボックスの中央配置
ボックスの右端配置

その他のプロパティ

border-radius プロパティ（ボーダーの丸み）
box-shadow プロパティ（ボックスの影）
box-sizing プロパティ（ボックスサイズ計算）
content プロパティ（挿入コンテンツ）要素の直前または直後に文字列や画像などのコンテンツの挿入を指定(before、afterとセット)
　content-box（初期値）width プロパティ、height プロパティの指定値にパディングとボーダーの幅と高さを含めない。（コンテンツ領域の幅と高さを指定）
　border-boxwidth プロパティ、height プロパティの指定値にパディングとボーダーの幅と高さを含める。（コンテンツ領域の幅と高さを小さくする）
object-fit プロパティ（画像トリミング）
　初期値：fill：要素のコンテンツボックス全体を埋めるように拡大縮小してはめ込みます。
　contain：コンテンツのアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小してはめ込みます。
　cover：コンテンツのアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小してはめ込みます。
オブジェクトコンテンツと要素のコンテンツボックスのアスペクト比が合わない場合は、オブジェクトの方が合うように切り取られます。
オブジェクトコンテンツと要素のコンテンツボックスのアスペクト比が合わない場合は、オブジェクトが合うように拡大縮小されます。
（初期値）noneコンテンツは、拡大縮小されません。
scale-downコンテンツは、none または contain が指定されたかのようにサイズが決められ、オブジェクトの実際のサイズが小さい方を採用します。
object-position プロパティ（画像の配置位置指定）
padding-right: 5px;→5px空けておいてね