CSS: two-column ​

div[class~="instui-two-column"] — 左右のコンテンツ領域を持つ2カラムレイアウト。

✅ Two-Column を使うとき:

  • ほぼ同等の重要度を持つ2つのコンテンツ領域があるとき

  • 2つのコンテンツを並べて比較・対比する場合

  • モバイルで縦に積み重なるレスポンシブなレイアウトを構築する場合 🚫 Two-Column を使用しないとき:

  • 片方のカラムがページを支配している場合 — 代わりに非対称レイアウトを使用する

  • コンテンツが並列表示のメリットを得られない場合

アクセシビリティ ​

  • 狭いビューポートでも両方のカラムが認識でき、使用可能であることを確認する
  • セマンティックなランドマーク（例: <section>）でカラムのコンテンツをラップする
  • カラム間に十分な間隔とコントラストを保つ

使用法 ​

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

パーツ ​

パート説明
.instui-dividerカラム間の任意のビジュアル区切り。
.instui-left左カラムのコンテンツ領域。
.instui-right右カラムのコンテンツ領域。

状態 ​

状態説明
:optional—

条件 ​

型クエリ説明
media(max-width: 768px)—

使用トークン ​

Token型値
--instui-color-border——
--instui-space-large——
--instui-space-medium——

関連項目 ​