Container

いつ使うか

• ページコンテンツの最大幅を max-w-screen-xl（1280px）に制約したいとき
• Header と同じ幅制約をコンテンツ領域に適用したいとき

いつ使わないか

• 全幅のレイアウト（ヒーローセクション等）には使わない
• Header 内部では既に同じ幅制約が適用されているため不要である

Usage

import { Container } from '@bi-shop-it/ui/container';

<Container>
  <h1>ページタイトル</h1>
  <p>コンテンツ</p>
</Container>;

Props

適用されるスタイル

状態

基本

Container なしでは全幅、Container ありでは最大幅が制約される。

{
  /* Container なし — 全幅 */
}
<ContentBlock />;

{
  /* Container あり — max-w-screen-xl + 水平パディング */
}
<Container>
  <ContentBlock />
</Container>;

アクセシビリティ

コンポーネントが内部で処理すること

• レイアウト専用のコンポーネントであり、セマンティクスは付与しない（div を使用する）

利用者が対応すること

• main や section 等のセマンティック要素と組み合わせて使用すること

関連コンポーネント

• Header — 同じ幅制約を内部で使用している
• Center — 中央配置のレイアウト
• Stack / HStack — 垂直・水平方向のレイアウト