Tinyrack

レスポンシブレイアウト

Tinyrack の寸法、コンテナ、共通ブレークポイントを使い、コンテンツに空間が必要な時点でリフローするモバイルファーストのレイアウトを作ります。

最小の有効なレイアウトから開始

まず一列または折り返すレイアウトを作ります。内容を把握しにくい、ラベルが衝突する、操作に必要な幅が足りない場合だけブレークポイントを追加してください。デバイス名ではなく、コンテンツが基準です。

ブレークポイントより先に寸法を選択

1 つの領域に読みやすい幅が必要なら、measure-* トークンを使います。再利用する領域が自身の幅に応じて変わる場合はコンテナクエリを使ってください。ページシェルや複数の領域を同時にリフローする場合はビューポートのブレークポイントを使います。

トークン値Tailwind
measure-xs4remmax-w-tinyrack-measure-xs
measure-sm8remmax-w-tinyrack-measure-sm
measure-md12remmax-w-tinyrack-measure-md
measure-lg16remmax-w-tinyrack-measure-lg
measure-xl24remmax-w-tinyrack-measure-xl
<article className="max-w-tinyrack-measure-xl">...</article>
<section className="@container"><div className="grid @md:grid-cols-2">...</div></section>

共通ブレークポイントスケール

Tailwind のテーマ変数は --breakpoint-sm、--breakpoint-md、--breakpoint-lg です。TypeScript の tinyrackBreakpoints も同じ値を提供します。

トークン値Tailwind テーマ変数Tailwind バリアント
sm40rem--breakpoint-smsm:*
md48rem--breakpoint-mdmd:*
lg64rem--breakpoint-lglg:*
xl80rem--breakpoint-xlxl:*

縮小ではなくリフロー

  • ラベルと値が窮屈になる前に縦へ並べます。
  • 主要操作を使い続けられるように操作行を折り返します。
  • 補助ナビゲーションは隠さず、明示的なコントロールの背後へ移します。
  • 列の比較が必要な表は、そのコンテナ内だけでスクロールさせます。
<section className="grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]">
  <div>ラックの詳細</div><div className="flex flex-wrap gap-2">操作</div>
</section>

実装責任を分ける

視覚的なリフローとコンテナクエリには CSS または Tailwind を使います。動作、データ取得、操作モードを変える必要がある場合だけ、TypeScript で tinyrackBreakpoints を参照してください。Tailwind が共通の --breakpoint-* スケールを解決できるように、コンポーネントスタイルより先に @tinyrack/ui/core.css を読み込みます。

レスポンシブ品質確認

変更したしきい値の直前、境界上、直後で確認してください。390px のビューポート、200% ズーム、長い翻訳ラベル、キーボードのフォーカス順、表の局所スクロール、必須操作が消えないことを含めます。