CSS: page-layout

div[class~="instui-page-layout"] — ヘッダー、サイドバー、メインコンテンツを持つ標準的な3カラムページレイアウト。

✅ Page-Layout を使用する場面:

• クラシックなページ構成（ナビゲーションとコンテンツ領域）が必要なとき

• ページに明確なメインコンテンツ領域があり、補助領域がそれを挟む場合

• レイアウト全体で一貫した間隔と配置を求めるとき 🚫 Page-Layout を使用しないとき:

• 単一カラムのページを構築している場合 — 代わりによりシンプルなレイアウトを使用してください

• サイドバーがメインコンテンツと重要性で競合する場合

アクセシビリティ

• メインコンテンツ領域を <main> ランドマークに割り当てる
• サイドバーには状況に応じて role="navigation" または role="complementary" を付与する
• ランドマーク領域にはそれぞれ異なる aria-label を設定すること

使用法

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

パーツ

パート	説明
.instui-body	サイドバーとコンテンツを含む主要本文。
.instui-footer	下部のフッター領域。
.instui-header	上部のヘッダー領域。
.instui-main	中央のコンテンツ領域。
.instui-sidebar	左側のナビゲーションまたは補助カラム。

状態

状態	説明
:optional	—

使用トークン

Token	型	値
--instui-color-border	—	—
--instui-color-footer-background	—	—
--instui-color-footer-text	—	—
--instui-color-header-background	—	—
--instui-color-sidebar-background	—	—
--instui-font-size-small	<length>	—
--instui-space-medium	—	—

関連項目

• wrapper