スペーシング（margin＆padding）
margin
各要素の外余白を設定するためにmarginプロパティのユーティリティクラスが用意されています。su-mg[DIRECTION]-[SPACE_SIZE]クラスを付与することで、サイズに応じた外余白を設定できます。サフィックスとなるサイズですが、Startify-UIのデザイントークンで採用されているサイズスケールのルールに基づき、6sから10lまでのサイズ別の余白が設定できます。
<p class="su-mgb-4l">この要素の下方に2rem分の外余白が設定されます。</p>クラス名の一覧
※下記リストはスペーシングサイズのバリエーションを省略しています
| .su-mg-0 | 上下左右方向のmarginを削除（0を指定）します。 |
| .su-mg-[SPACE_SIZE] | 対応するサイズ分の余白が上下左右方向に適用されます。 |
| .su-mgv-0 | 上下方向のmarginを削除（0を指定）します。 |
| .su-mgv-[SPACE_SIZE] | 対応するサイズ分の余白が上下方向に適用されます。 |
| .su-mgh-0 | 左右方向のmarginを削除（0を指定）します。 |
| .su-mgh-[SPACE_SIZE] | 対応するサイズ分の余白が左右方向に適用されます。 |
| .su-mgt-0 | 上方向のmarginを削除（0を指定）します。 |
| .su-mgt-[SPACE_SIZE] | 対応するサイズ分の余白が上方向に適用されます。 |
| .su-mgb-0 | 下方向のmarginを削除（0を指定）します。 |
| .su-mgb-[SPACE_SIZE] | 対応するサイズ分の余白が下方向に適用されます。 |
| .su-mgl-0 | 左方向のmarginを削除（0を指定）します。 |
| .su-mgl-[SPACE_SIZE] | 対応するサイズ分の余白が左方向に適用されます。 |
| .su-mgr-0 | 右方向のmarginを削除（0を指定）します。 |
| .su-mgr-[SPACE_SIZE] | 対応するサイズ分の余白が右方向に適用されます。 |
scroll-margin-top
特定の高さを持つ固定ヘッダーがある画面上で、アンカーリンクによりページ内のコンテンツ先頭位置にスクロール移動する際に、固定ヘッダー分の高さだけ上方向にオフセットしたい場合があります。そのようなケースにscroll-margin-topプロパティのユーティリティクラスが用意されています。su-scroll-mgt-[SPACE_SIZE]クラスを付与することで、サイズに応じた上方向のオフセットを設定できます。サフィックスとなるサイズですが、Startify-UIのデザイントークンで採用されているサイズスケールのルールに基づき、rから10lまでのサイズ別の余白が設定できます。
<!-- アンカーリンクで移動する位置を上方向に64px分オフセットさせる -->
<section id="content_1" class="su-scroll-mgt-6l">...</section>
クラス名の一覧
※下記リストはスペーシングサイズのバリエーションを省略しています
| .su-scroll-mgt-[SPACE_SIZE] | スクロール時の先頭位置を対応するサイズ分オフセットします。 |
padding
各要素の内余白を設定するためにpaddingプロパティのユーティリティクラスが用意されています。su-pd[DIRECTION]-[SPACE_SIZE]クラスを付与することで、サイズに応じた内余白を設定できます。サフィックスとなるサイズですが、Startify-UIのデザイントークンで採用されているサイズスケールのルールに基づき、6sから10lまでのサイズ別の余白が設定できます。
<p class="su-pdl-r">この要素の左側に1rem分の外余白が設定されます。</p>クラス名の一覧
※下記リストはスペーシングサイズのバリエーションを省略しています
| .su-pd-0 | 上下左右方向のpaddingを削除（0を指定）します。 |
| .su-pd-[SPACE_SIZE] | 対応するサイズ分の余白が上下左右方向に適用されます。 |
| .su-pdv-0 | 上下方向のpaddingを削除（0を指定）します。 |
| .su-pdv-[SPACE_SIZE] | 対応するサイズ分の余白が上下方向に適用されます。 |
| .su-pdh-0 | 左右方向のpaddingを削除（0を指定）します。 |
| .su-pdh-[SPACE_SIZE] | 対応するサイズ分の余白が左右方向に適用されます。 |
| .su-pdt-0 | 上方向のpaddingを削除（0を指定）します。 |
| .su-pdt-[SPACE_SIZE] | 対応するサイズ分の余白が上方向に適用されます。 |
| .su-pdb-0 | 下方向のpaddingを削除（0を指定）します。 |
| .su-pdb-[SPACE_SIZE] | 対応するサイズ分の余白が下方向に適用されます。 |
| .su-pdl-0 | 左方向のpaddingを削除（0を指定）します。 |
| .su-pdl-[SPACE_SIZE] | 対応するサイズ分の余白が左方向に適用されます。 |
| .su-pdr-0 | 右方向のpaddingを削除（0を指定）します。 |
| .su-pdr-[SPACE_SIZE] | 対応するサイズ分の余白が右方向に適用されます。 |
scroll-padding-top
scroll-margin-topプロパティ同様にスクロール時の位置を上方向にオフセットしたい場合にscroll-padding-topプロパティのユーティリティクラスが用意されています。su-scroll-pdt-[SPACE_SIZE]クラスを付与することで、サイズに応じた上方向のオフセットを設定できます。サフィックスとなるサイズですが、Startify-UIのデザイントークンで採用されているサイズスケールのルールに基づき、rから10lまでのサイズ別の余白が設定できます。
<!-- アンカーリンクで移動する位置を上方向に64px分オフセットさせる -->
<section id="content_1" class="su-scroll-pdt-6l">...</section>
クラス名の一覧
※下記リストはスペーシングサイズのバリエーションを省略しています
| .su-scroll-pdt-[SPACE_SIZE] | スクロール時の先頭位置を対応するサイズ分オフセットします。 |