CSS: wrapper ​

body[class~="instui-display-flex"] — アプリシェル行：サイドナビ、ヘッダー付きコンテナ、およびオプションのパネル。

✅ Wrapper を使う場面：

  • 一貫したレイアウトシェルが必要な Canvas の製品ページ全体を構築する場合

  • ページが主要なナビゲーションの基点として GlobalNav を使用する場合

  • ページにサイドパネル（ContentTabList、TrailingContentArea、または UtilityPanel）が必要な場合

  • ページ全体で一貫したコンテナの余白とコンテンツの最大幅が必要な場合 🚫 Wrapper を使わない場面：

  • モーダル、トレイ、またはドロワーを構築する場合 — それらは独自のレイアウトコンテナを持つ

  • ページのサブセクションをラップする場合 — Wrapper はページ全体を含むものであり、領域を対象としない

アクセシビリティ ​

  • メインコンテンツ領域を <main> ランドマークにマッピングし、skip-nav リンクを付けてキーボードユーザーが GlobalNav を迂回できるようにする
  • ContentTabList に role="navigation" と「ページナビゲーション」などの識別可能な aria-label を付与し、GlobalNav のランドマークとは別にする
  • TrailingContentArea に role="complementary" と、その内容を反映する「受講生の詳細」などの説明的な aria-label を付与する
  • 各 UtilityPanel に「AI assistant」「Notifications」「Filters」などの個別の aria-label を付与する
  • UtilityPanel が開いたときはフォーカスをパネル内に移し、閉じたときは開くトリガーにフォーカスを戻す

使用法 ​

css
@import "@pantoken/plugin-layouts/layouts.css";

構造 ​

text
body[class~="instui-display-flex"]
  side-nav-bar (component)
  .container
    modal.header (component)
      .top
        breadcrumb (component)
        .utilities (0..1)
          button + button (component, 1..n)
      .info
        .title
        .description (0..1)
      ‹content: header› (0..1)
      .actions (0..1)
        button + button (component, 1..n)
      tabs (component, 0..1)
        tabs (component)
      .filters (0..1)
        ‹content: filters›
    drawer-layout.content (component)
      list + card (component, 0..1)
      slot[name="content"].main
      slot[name="trailing"].trailing + card (component, 0..1)
  tabs.panel (component)
    card | agent-shell (component, 0..1)
flowchart TD n0["body[class~=&quot;instui-display-flex&quot;]"]:::cssdoc-root n1(["side-nav-bar"]):::cssdoc-component n2(".container"):::cssdoc-part n3(["modal.header"]):::cssdoc-component n4(".top"):::cssdoc-part n5(["breadcrumb"]):::cssdoc-component n6(".utilities"):::cssdoc-part n7(["button + button"]):::cssdoc-component n8(".info"):::cssdoc-part n9(".title"):::cssdoc-part n10(".description"):::cssdoc-part n11[/"‹content: header›"/]:::cssdoc-slot n12(".actions"):::cssdoc-part n13(["button + button"]):::cssdoc-component n14(["tabs"]):::cssdoc-component n15(["tabs"]):::cssdoc-component n16(".filters"):::cssdoc-part n17[/"‹content: filters›"/]:::cssdoc-slot n18(["drawer-layout.content"]):::cssdoc-component n19([".list + card"]):::cssdoc-component n20("slot[name=&quot;content&quot;].main"):::cssdoc-part n21(["slot[name=&quot;trailing&quot;].trailing + card"]):::cssdoc-component n22(["tabs.panel"]):::cssdoc-component n23(["card | agent-shell"]):::cssdoc-component n0 --> n1 n4 --> n5 n6 -->|1..n| n7 n4 -.->|0..1| n6 n3 --> n4 n8 --> n9 n8 -.->|0..1| n10 n3 --> n8 n3 -.->|0..1| n11 n12 -->|1..n| n13 n3 -.->|0..1| n12 n14 --> n15 n3 -.->|0..1| n14 n16 --> n17 n3 -.->|0..1| n16 n2 --> n3 n18 -.->|0..1| n19 n18 --> n20 n18 -.->|0..1| n21 n2 --> n18 n0 --> n2 n22 -.->|0..1| n23 n0 --> n22 click n1 "/api/css/side-nav-bar.md" click n3 "/api/css/modal.header.md" click n5 "/api/css/breadcrumb.md" click n7 "/api/css/button.md" click n13 "/api/css/button.md" click n14 "/api/css/tabs.md" click n15 "/api/css/tabs.md" click n18 "/api/css/drawer-layout.content.md" click n19 "/api/css/card.md" click n21 "/api/css/card.md" click n22 "/api/css/tabs.panel.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

スロット ​

スロット説明
content主要なページコンテンツ。
filtersヘッダー内のオプションのフィルターコンテンツ。
headerページ説明の下に配置されるオプションのヘッダースロット。
panelユーティリティパネルのコンテンツ。
trailing補助的な追従コンテンツ。

パーツ ​

パート説明
.actions上段の最後に表示されるオプションのヘッダーボタン。
.containerヘッダーとコンテンツを収めるメインページのカラム。
.contentコンテナカラム内の主要コンテンツ領域。
.descriptionタイトルの下に表示されるオプションのページ説明。
.filtersヘッダー内のオプションのフィルター領域。
.headerコンテナカラム内のヘッダー領域。
.infoページタイトルとオプションの説明を入れるコンテナ。
.listコンテンツ内のオプションのナビゲーションカラム。
.mainコンテンツ内のメインコンテンツカラム。
.panelページ右側に開くユーティリティパネル領域。
.tabsコンテンツ行の先頭に配置されるオプションのナビゲーションタブ。
.title上段の行の下にあるページタイトル。
.topパンくずとユーティリティを含むグリッド行。
.trailingコンテンツ内のオプションの補助カラム。
.utilities上段の最後にあるユーティリティアクション。

状態 ​

状態説明
:optional—

使用トークン ​

Token型値
--instui-background-color-page——

サブコンポーネント ​

関連項目 ​