CSSでレイアウトするためのプロパティをまとめてみた.デモは作らなかったが,これらを見ただけでどのような配置になるか思えるようになった.これだけ知っていればレイアウトは自由自在にできるとのお墨付きが出る.
- 箱模型 –BOX MODEL– 要素と周囲の関係
margin: top right bottom left; / auto;
border: thickness style color;
padding: top right bottom left; / auto;
- 表示 –DISPLAY– 要素の配置関係
display: inline;
display: block;
display: inline-block;
display: none;
display: flex;
display: grid;
- 浮き –FLOAT– 要素の交わり
float: right; / left;
float: both;
clear: right; / left;
clear: both;
- 溢れ –OVERFLOW– 要素と画面の縁の関係
overflow: hidden;
overflow: scroll;
overflow: visible;
overflow: auto;
- 位置 –POSITION– 要素の座標配置
position: static;
position: absolute;
position: relative;
position: fixed;
