※※【レイアウト雛形】スペースクラス※※
マージン、パディングはすべて以下のクラスでコントロール可能です。
{property}{sides}-{size}
{property}(マージン、パディングの別)
| m | p |
|---|---|
| マージン | パディング |
{sides}(マージン、パディングの方向)
| t | b | l | r |
|---|---|---|---|
| 上 | 下 | 左 | 右 |
{size}(マージン、パディングの大きさ)
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| 0.25rem | 0.5rem | 1rem | 1.5rem | 3rem |
使用例
| 上マージン0.25rem | 下マージン0.25rem | 左マージン0.25rem | 右マージン0.25rem |
|---|---|---|---|
| class=”mt-1″ | class=”mb-1″ | class=”ml-1″ | class=”mr-1″ |
| 上パディング0.25rem | 下パディング0.25rem | 左パディング0.25rem | 右パディング0.25rem |
|---|---|---|---|
| class=”pt-1″ | class=”pb-1″ | class=”pl-1″ | class=”pr-1″ |
ブレークポイントを追加することでレスポンシブに対応。
{property}{sides}-{breakpoint}-{size}
{breakpoint}(ウインドウサイズ)
| md | lg | xl |
|---|---|---|
| 720px以上 | 960px以上 | 1140px以上 |
使用例
| 上マージン3rem（スマホのみ） | 上マージン3rem（PCのみ） | 下マージン3rem（スマホのみ） | 下マージン3rem（PCのみ） |
|---|---|---|---|
| class=”mt-3 mt-md-0″ | class=”mt-md-3″ | class=”mb-3 mb-md-0″ | class=”mb-md-3″ |
| 上パディング3rem（スマホのみ） | 上パディング3rem（PCのみ） | 下パディング3rem（スマホのみ） | 下パディング3rem（PCのみ） |
|---|---|---|---|
| class=”pt-3 pt-md-0″ | class=”pt-md-3″ | class=”pb-3 pb-md-0″ | class=”pb-md-3″ |