sgds-layouts

SGDS レイアウト

Application Shell 内でコンテンツ領域をどのように配置するかを定義する、本番環境で使用できるページレイアウトパターンです。各レイアウトは SGDS のコンポーネントとユーティリティを組み合わせて、構造の基盤を提供します。コンテンツブロックを配置するだけで、ページが完成します。

レイアウトとは？

レイアウトは、ページ上のコンテンツ領域の空間的な配置を定義します。

• コンテンツ列の数（単一、分割、サイド領域＋メイン領域）
• ナビゲーションの配置場所（上部のみ、またはサイドバー）
• ページのスクロール方法（ドキュメントのフロー、またはビューポート内に収める）

レイアウトは、Application Shell（必須のページ構成要素）とBlocks/Templates（実際のコンテンツ）の間に位置します。シェルがレイアウトを包み、ブロックがレイアウトのコンテンツ領域を埋めます。

前提条件

レイアウトを実装する前に、以下を確認してください。

1. sgds-getting-started：アプリケーションの初期セットアップ（Inter フォント、基盤 CSS のインポート、コンポーネントの登録）
2. sgds-utilities：SGDS ユーティリティクラスの理解（グリッド、間隔、フレックスなど）
3. sgds-components：SGDS Web コンポーネントの知識（masthead、mainnav、footer、sidebar）

import "@govtechsg/sgds-web-component/themes/day.css";
import "@govtechsg/sgds-web-component/css/sgds.css";
import "@govtechsg/sgds-web-component/css/utility.css";

インストールの詳細については、sgds-getting-started と sgds-components をご覧ください。

---

クイック判断ガイド

作成するもの	レイアウトのカテゴリ	使用するレイアウト
シンプルな一般公開ページ、コンテンツ領域は単一	Full Width	Default
左側にサイドバー／サイドパネルがあるページ（4/8 分割）	Full Width	Aside Left
右側にサイドバー／サイドパネルがあるページ（8/4 分割）	Full Width	Aside Right
左右両側にサイドパネルがあるページ（3/6/3 分割）	Full Width	Aside Both
2 つの同じ幅のコンテンツパネルを横並びにするページ	Full Width	Split
パンくずナビゲーションバーがあるページ	Full Width	Breadcrumb
ダッシュボード／内部ツール、コンテンツ領域は単一	With Sidebar	Default
左側にサイドパネルがあるダッシュボード	With Sidebar	Aside Left
右側にサイドパネルがあるダッシュボード	With Sidebar	Aside Right
パンくずナビゲーション付きの折りたたみ可能なオーバーレイサイドバー	With Sidebar	Overlay
2 つの同じ幅のコンテンツパネルがあるダッシュボード	With Sidebar	Split

---

2 つのレイアウトカテゴリ

Full Width — 一般公開ページ

汎用アプリケーション、一般公開向けデジタルサービス、永続的なサイドナビゲーションがないページに適しています。

主な特徴：

• 中央揃えのレスポンシブなコンテンツに .sgds-container を使用します
• 標準の <sgds-masthead>、<sgds-mainnav>、<sgds-footer> を使用します
• コンテンツはドキュメントのフローに沿って配置されます（ビューポート内に収めません）
• グリッドベースのサイドパネルには、sgds-col-* クラスを指定した .sgds-grid を使用します

→ Full Width の全 6 種類のレイアウトについては、reference/full-width.md をご覧ください。

---

With Sidebar — ダッシュボードと内部ツール

メインコンテンツと並べて永続的なサイドナビゲーションを必要とする内部ツール、ダッシュボード、管理ポータル、トランザクションアプリに適しています。

主な特徴：

• サイドバーの幅を考慮して、幅の狭いコンテンツ領域に .sgds-container-sidebar を使用します
• <sgds-masthead> と <sgds-mainnav> に fluid 属性を指定します
• 永続的なナビゲーションには <sgds-sidebar> コンポーネントを使用します
• サイドバーを考慮したフッターには <sgds-footer tone="neutral" layout="sidebar"> を使用します
• ビューポートの高さに合わせて収めます：sgds:h-screen sgds:flex sgds:flex-col sgds:overflow-hidden
• メインコンテンツ領域は独立してスクロールします：sgds:overflow-y-auto

→ With Sidebar の全 5 種類のレイアウトについては、reference/with-sidebar.md をご覧ください。

---

生の GitHub リンクから HTML を抽出する方法

すべてのレイアウトには、stories/layouts/ ディレクトリに動作するストーリー実装があります。次の手順で使用できます。

ステップ 1：生ファイルを取得する

curl https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/layouts/{Category}/{File}.stories.js

ステップ 2：テンプレートリテラルから HTML を抽出する

ストーリーファイルでは、html テンプレートリテラルを返す Template 関数をエクスポートしています。

const Template = () => html`
  
  <sgds-masthead></sgds-masthead>
  ...
  <sgds-footer></sgds-footer>
  
`;

ステップ 3：HTML を整える

1. `html`` のラッパーと末尾のバッククォートを削除します
2. Lit 固有の構文（${variable} の補間）を削除し、インライン HTML に置き換えます
3. <style> ブロックを削除します（これらは Storybook のプレースホルダー用です）
4. すべての SGDS コンポーネントとユーティリティクラスをそのまま保持します
5. インデントを 2 スペースに統一して整形します

---

AI エージェント向け

ワークフロー

1. sgds-utilities スキルを読み込みます（ユーティリティクラスのリファレンス用）
2. sgds-components スキルを読み込みます（コンポーネント API 用）
3. このスキルを読み込みます
4. ユーザーのニーズに応じた適切なリファレンスファイルを読みます
5. 完全な実装が必要な場合は、生の GitHub ストーリーファイルを取得します
6. レイアウトをユーザーのコンテンツに合わせて調整します

ガイドライン

• すべてのレイアウトには、必須のアプリケーションシェル（<sgds-masthead>、<sgds-mainnav>、<sgds-footer>）が含まれています
• フル幅パターンとサイドバー付きパターンを混在させず、ユースケースに応じてどちらかを選びます
• サイドバー付きレイアウトでは、ルートラッパーにビューポート内に収めるためのクラスを必ず含めます
• サイドパネルとコンテンツ領域には、sgds-blocks のブロック、または sgds-templates のテンプレートを配置します