SmartHR Design System

Container

ページの主要コンテンツの横幅と外側のパディングを制御するレイアウトコンポーネントです。すべてのページで本文領域の最大幅と上下左右の余白を設定するときに使います。

レイアウト

指定された大きさを保ちながら、左右中央に配置されます。コンテナの大きさよりウィンドウ幅が小さい場合は、パディングを保ちながらコンテナの幅が狭くなります。

コンテナの大きさ

size props を使ってコンテナの大きさを指定できます。デフォルトはDEFAULTです。

大きさ幅トークン値（px）
NARROWcol6880px
DEFAULTcol81184px
WIDEcol91336px
FULL-width: 100%

NARROW

フォーム要素が中心の画面など、ページ内の要素が横幅を広く必要とせず、DEFAULTでは不要な余白が大きくなってしまう画面に使います。

DEFAULT

コレクションやシングルの標準的な画面に使います。特に理由がない場合にはこの幅を使います。

WIDE

複数カラムのレイアウトで1つのカラムに1ページ相当の情報を表示する画面に使います。

主に以下のページレイアウトが対象です。

FULL

横スクロールを必須とするような大量のデータを表示する画面に使います。

コンテナのパディング

padding props を使ってコンテナのパディングを指定できます。 パディングはコンテナの幅には含まれません。

デフォルトで上下左右2文字（32px）ずつのパディングが設定されています。上書き可能です。

モバイルでの表示

デフォルトで上下1.5文字（24px）、左右1文字（16px）ずつのパディングが設定されます。paddingpropsのnarrowModeBlockとnarrowModeInlineで上書き可能です。

使い方チェックリスト

Container
参照元：レイアウト > コンテナの大きさ > `NARROW` 「レイアウト > コンテナの大きさ > `NARROW`」の本文へ移動
  • Should
    フォーム要素が中心で `DEFAULT` では余白が大きくなりすぎる画面の場合は `NARROW` を検討する
参照元：レイアウト > コンテナの大きさ > `DEFAULT` 「レイアウト > コンテナの大きさ > `DEFAULT`」の本文へ移動
  • Should
    コレクションやシングルの標準的な画面や、特に理由がない場合は `DEFAULT` を使う
参照元：レイアウト > コンテナの大きさ > `WIDE` 「レイアウト > コンテナの大きさ > `WIDE`」の本文へ移動
  • Should
    複数カラムのレイアウトで 1 つのカラムに 1 ページ相当の情報を表示する場合は `WIDE` を検討する
参照元：レイアウト > コンテナの大きさ > `FULL` 「レイアウト > コンテナの大きさ > `FULL`」の本文へ移動
  • Should
    横スクロールを必須とするような大量のデータを表示する場合は `FULL` を検討する

Props

size
"FULL""NARROW""DEFAULT""WIDE"
padding
0120.250.50.751.251.52.533.548"X3S""XXS""XS""S""M""L""XL""XXL""X3L"-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8{ block?: Gap; inline?: Gap; narrowModeBlock?: Gap; narrowModeInline?: Gap; }

関連リンク