9月18日（月）学科 CSS基礎③【オンライン】

大浜　先生

アジェンダ

1限目
学科 CSS基礎③
レイアウト系のプロパティについて

2限目
学科 CSS基礎③
練習問題の説明

3限目
学科 CSS基礎③
CSSのプロパティと値を考える

4限目
学科 CSS基礎③
練習問題の解説

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

ポイント

予定

• 9/18 レイアウト系プロパティ（重要）
  • L4.2 レイアウト系プロパティ
    • L4.2.1 width プロパティ（内容の幅）L4.2.2 max-width プロパティ（幅の最大値）L4.2.3 min-width プロパティ（幅の最小値）L4.2.4 height プロパティ（内容の高さ）L4.2.5 max-height プロパティ（高さの最大値）L4.2.6 min-heightプロパティ（高さの最小値）L4.2.7 float プロパティ（回り込み）L4.2.8 clear プロパティ（回り込みを解除）L4.2.9 position/top/left/bottom/right プロパティ（要素の配置方法）L4.2.10 z-index プロパティ（重なりの順序方法）L4.2.11 display プロパティ（要素の表示方法）L4.2.12 overflow プロパティ（ボックスからあふれた内容の処理方法）
    • floatで横に並べる。float プロパティを使用した場合は、回り込みの解除を指定→ 「clear: both;」プロパティ
      • flexでもできる
    • positionは副作用（リサイズずれ）があるので注意（重ね時以外は使わない）
  • L4.3 ボーダー系プロパティ
  • L4.4 パディング系プロパティ
  • L4.5 マージン系プロパティ
• 9/19 ボーダー系プロパティ,パディング系プロパティ,マージン系プロパティ
  • L4.6 その他のプロパティ

メモ

• 要素を横に並べる(回り込む)
  • →親要素[overflow:hidden;]　
  • 要素を左に寄せる＝次の要素は右に回り込む)→　[float: left;]　
• [display:inline-block;]　[display:block;] 隙間ができる
• [display:flex;]
• 文字列を真ん中→margin 0px atuto;