Editor X：ページの構造（親、子、兄弟パーツ）について
読了時間：4分
この記事では、この関係と、それを活用してレスポンシブサイトを作成する方法について説明します：
パーツ間の親子関係
コンテナ（例えば、セクション、コンテナボックス、レイアウターなど）内にパーツが配置されると、パーツをコンテナに添付し、親子関係を作ります。たとえば、ロゴをヘッダーに添付すると、自動的に最も近い端にドッキングし、ヘッダーの「子」になります。
CSS と同様に、親コンテナのデザイン（例：サイズ、位置、パディング）は、その子パーツに影響を与えます。たとえば、コンテナにパディングを追加すると、変更に対応するために、その内のパーツが小さくなります。
注意：
縦の順序を制御するためにパーツをスタックすると、親として機能するフレックスコンテナ内に配置されます。
ページの構造を作成する
サイトのデザインを計画する際は、階層構造を作成することから始めることが重要です。最初に親コンテナを作成し、次に子パーツを適切な場所にドラッグ＆ドロップして追加することをおすすめします。
ページのレイヤー
Editor X では、作成した構造がレイヤーパネルに反映されます。以下のレイヤーが、サイトの構造を構成します：
- ページ：レイヤーパネルから、ページの背景色を編集し、パディングを追加できます。「ページ」横の「その他のアクション」アイコン
をクリックしてこれらの設定を調整します。 - セクション：各ページは、少なくとも 1つのセクションで構成されています。必要な数だけ縦のセクションと横のセクションを作成できます。また、複数のページで表示されるマスターセクションを作成することもできます。
- コンテナ：コンテナ内にパーツをネストして、レスポンシブな構造を簡単に作成し、その場所に留まるようにします。ベーシックコンテナボックスまたはスタック、レイアウター、リピーターなどのスマートレイアウトツールを追加します。
- パーツ：これらは、「追加」パネルから追加する要素（例：テキスト、ボタン、フォーム）です。単一のパーツをドッキング したり、どの画面サイズでも同じ順序と間隔で留まるように、複数のパーツをスタックしたりできます。
重要：
グリッドは階層モデルの一部ではありませんが、パーツのサイズ変更と配置に影響を与える場合があります。詳細はこちら
パーツのリペアレント
新しい親コンテナに子パーツを移動する場合、これは「リペアレント」と呼ばれます。パーツをリペアレントするには、パーツを新しい親パーツの中にドラッグアンドドロップするだけです。
階層内でパーツの場所を見つける
ページ内のすべてのセクション、コンテナ、およびパーツには、階層内での場所を示すパンくずがあります。パンくずをクリックすると、ページのレイヤー間を簡単に移動することができます。
兄弟パーツを構造化する
兄弟とは、同じ直属の親を共有するパーツです。たとえば、コンテナが親であるため、このコンテナ内のテキストとボタンは兄弟です。
以下は、兄弟パーツの間に自動的に作成されたマージンの例です：
ブレイクポイント全体での構造の変更
レイヤーパネルでは、ページ内のパーツ、コンテナ、セクション間の関係（つまり階層）を確認し、必要に応じて移動することができます。
ページ階層は、サイトの HTML 構造の一部です。つまり、ページ階層に加えた変更は、すべてのブレイクポイントに反映されます。たとえば、親と子（例：テキストとそのコンテナ）を分離すると、その分離はすべてのブレイクポイントに適用されます。