nested-container-frames

ネストされたコンテナフレームのスキル

使用する場面

• 外側の境界が見え、内側のフレームがインセットされ、ページ構造が階層化されたコンテナの入れ子システムが必要なレイアウト。

ワークフロー

1. ページ全体の幅を制御する、中央揃えの外側コンテナを定義します。
2. 縦の境界線と小さなコーナーマーカーを表示し、フレームを構成します。
3. 一貫したパディングを使い、内側のコンテナを外側の端からインセットして配置します。
4. 内側の各階層に、それぞれ独自の背景、枠線、角丸、間隔のリズムを設定します。
5. フレームの階層を使って、重厚なカードを追加せずに、ヒーロー、特徴、実績、CTAの各モジュールを分けます。

注意事項

• レイアウトが箱だらけに感じられるほど、カードをカードの中に入れ子にしないでください。
• フレームの線がコンテンツの読みやすさを損なわないようにしてください。