レイアウトは、すべての Alius インターフェースの構造的基盤を提供します。一貫したレイアウトシステムにより、コンテンツが整理され、スキャン可能で、すべてのデバイスで快適にナビゲートできるようになります。
ページ構造
推奨されるドキュメントページレイアウトは、以下の領域で構成されます：
- トップナビゲーション： ロゴ、プライマリリンク、検索、バージョンスイッチ、言語スイッチを含むグローバルナビゲーションバー
- 左サイドバー： セクション別に整理されたドキュメント目次、折りたたみ可能グループ付き
- 中央コンテンツエリア： 見出し、本文、コードブロック、画像、インタラクティブ要素を含むメインコンテンツ
- 右ページ TOC： 現在のページの見出しを表示し、素早いジャンプを可能にするページ内目次
- 下部ナビゲーション： ドキュメントの順次読み上げ用の前/次ページリンク
- リソースダウンロードエリア： ダウンロード可能なファイル、アセット、関連資料用のオプションセクション
幅の仕様
ページ最大幅
- ワイドスクリーンでコンテンツ行が長くなりすぎるのを防ぐため、ページの最大幅を定義
- 行が快適な文字数を超えるとコンテンツの可読性が低下する
コンテンツエリア幅
- 中央コンテンツエリアは快適な読み取り幅（本文テキストで概ね 60〜80 文字/行）を確保
- コードブロックはやや広くてもよいが、コンテンツエリアの境界内に留める
左サイドバー幅
- 固定幅、小さい画面では折りたたみ可能
- セクションタイトルとページ名が過度に切り詰められずに表示できる十分な幅
右 TOC 幅
- 固定幅、十分な水平スペースがある画面でのみ表示
- アクティブ状態インジケーター付きで見出しテキストを表示
グリッドシステム
- コンポーネントの配置に一貫したグリッドを使用
- カード、テーブル、フォームレイアウトはグリッド列に整列
- グリッド列間のガターは標準スペーシングスケールに従う
カードスペーシング
- カード内の一貫したパディング
- グリッドレイアウトでのカード間の一貫したギャップ
- カードコンテンツは内部配置ルールを維持
ページパディング
- 画面端からコンテンツへの水平パディング
- 主要セクション間の垂直パディング
- ブレークポイントでのレスポンシブ調整
モバイルブレークポイント
以下のレスポンシブブレークポイントを定義：
- モバイル： 単一列レイアウト、ハンバーガーメニュー、折りたたまれたサイドバー
- タブレット： オプションの2列レイアウト、サイドバーはオーバーレイとして利用可能
- デスクトップ： サイドバー、コンテンツ、TOC を含む完全な3列レイアウト
- ワイド： 最大幅制約、画面中央に配置
レスポンシブ動作の主要原則：
- コンテンツの可読性がすべてのブレークポイントでの最優先事項
- ナビゲーションはすべての画面サイズでアクセス可能である必要がある
- コードブロックはレイアウトを崩すのではなく水平スクロールする
- テーブルは水平スクロールまたはモバイルではカードレイアウトに変換
- 画像はコンテナ内でプロポーショナルにスケール