余白とレイアウト

余白の段

余白は 4 px を一つの単位 にして、その倍数だけを使います。迷ったら 8 px です。

段	値	よく使う場所
1	4 px	アイコンと文字の間
2	8 px	部品どうしの間（いちばんよく使う基準）
3	12 px	カードの内側
4	16 px	画面の左右の余白、まとまりどうしの間
6	24 px	節と節の間
8	32 px	大きな区切り

コードでは gap-2（8 px）、p-3（12 px）、px-4（16 px）のように段の番号で書きます。p-[13px] のような段の外の値は書きません。

画面の幅の段

画面の幅（端末の種類ではなく窓の幅）で、案内の形を変えます。

段	幅	案内の形
狭い	767 px まで	下に浮かぶ島（行き先 4 つまで）＋「その他」のシート
中くらい	768〜1199 px	左のサイドバー（アイコンだけにたたんで始める）
広い	1200 px 以上	左のサイドバー（開いて始める）

文書サイト（レポートなど）は 768 px と 1024 px を境目に、下の島・上の帯と目次・左の目次 を使い分けます。

• 横向きのスマートフォン（高さ 500 px 未満）は、幅が広くても下の島は出しません。
• 320 px まで縮めても、横に流れないこと。
• 5 列以上の表は、狭い画面では 1 行を 1 枚のカードにして「見出し：値」を縦に積みます。

本文の幅

画面	最大の幅
業務画面	1024 px（左右 16 px の余白）
自分のページ・設定	768 px
読み物（ヘルプ・規約・文書）	45rem（全角で約 45 文字）

重なりの順

上に重なるもの（固定の帯、下の島、シート、お知らせ、検索の候補）は、決まった順で重ねます。新しく重なるものを足すときは、既存の順のどこに入るかを先に決めてください。

順	もの
下	固定の見出し・帯
↓	下の島・サイドバー
↓	検索の候補・選んだものの印
↓	ヘルプの欄
上	シート・ダイアログ・お知らせ