レイアウト

PreviousNext

ページのレイアウトは文書構造上の要素を画面内のどこにどのように配置するかという設計のことです。ブラウザや表示デバイスに依存した制約の中で情報を視覚的に伝達するための技術であり、明確な情報伝達を実現するものです。

グリッドシステム

12 カラムの CSS Grid を基本単位として使います。

<div className="grid grid-cols-12 gap-4">
  <div className="col-span-12 md:col-span-8">メインコンテンツ</div>
  <div className="col-span-12 md:col-span-4">サイドバー</div>
</div>

ブレークポイント

Tailwind のブレークポイントをそのまま使います。

名前幅プレフィックス主な用途
Default< 640px—モバイル縦持ち
sm≥ 640pxsm:モバイル横持ち
md≥ 768pxmd:タブレット
lg≥ 1024pxlg:デスクトップ
xl≥ 1280pxxl:ワイド
2xl≥ 1536px2xl:フルHD 以上
3xl≥ 1600px3xl:超ワイド（カスタム追加）

コンテナ

utility最大幅説明
container1400pxページコンテンツ領域
container-wrappermax-screen-2xl + 2rem最外側のラッパー
<div className="container-wrapper px-6">
  <div className="container">
    {/* コンテンツ */}
  </div>
</div>

ページ構造パターン

スタンダード（サイドバーなし）

<div className="border-grid border-b">
  <div className="container-wrapper">
    <div className="container py-10">
      {/* コンテンツ */}
    </div>
  </div>
</div>

サイドバー付き（Docs レイアウト）

<div className="flex">
  <aside className="w-64 shrink-0">/* サイドバー */</aside>
  <main className="flex-1 min-w-0">/* メインコンテンツ */</main>
</div>

間隔の基準

コンポーネント間のマージンは 4px グリッドに揃えます。

  • セクション間: py-12 または py-16
  • コンポーネント間: gap-4 または gap-6
  • テキストと要素: mt-2 または mt-4