Wix Studio エディタ：要素をスタックする
6分
スタックは、縦または横の順序に関係なく、要素のグループを「ハグ」するフレックスボックスコンテナです。これにより、定義した間隔で要素が重ならないように整理されます。
また、負のマージンを使用して、要素を意図的に重ねることもできます。
重複する要素を操作する場合：
この問題の確認方法と解決方法については、トラブルシューティング動画をご覧ください。（英語）
スタックを適用する
要素をスタックすると、デザインを一定の間隔ですばやく整理し、簡潔で洗練されたレイアウトを作成できます。同じ親要素に属する隣接する複数の要素を選択する場合、スタックするオプションがポップアップ表示されます。
スタックを適用する方法：
- エディタに移動します。
- スタックに追加する要素をクリックします。
- Shift キーを押しながら、他のスタック要素を選択します。
- 「スタック」をクリックします。
- （オプション）要素の間にある線をドラッグし、マージンを設定します。
ヒント：
マイナスのマージンを作成して、意図的に要素を重ねることもできます。
スタックの方向を変更する
要素をスタックすると、要素の順序によって方向が自動的に決定されます。たとえば、要素が縦に配置されている場合、スタックは縦になります。
いずれの場合も、ドロップダウンを使用していつでも方向を切り替えることができます。これにより、要素が正しい順序になるよう、自動的に再配置されます。
スタックを管理する
新しいコンテンツや要件に合わせて、スタックをカスタマイズできます。スタックにさらに要素を追加したり、ボタンをクリックするだけで移動させたり、不要になった要素を切り離したりします。
スタックを管理する方法：
- エディタに移動します。
- 該当するスタックを選択します。
- 次に実行する内容を選択します：
スタックに要素を追加する
スタックから要素を切り離す
をクリックすることもできます。次に、「スタックから切り離す」をクリックします。
スタック内の要素を並べ替える
/「下に移動」
、または「左に移動」
/「右に移動」
アイコン をクリックします。
パーツのスタックを解除する
スタックをデザインする
スタックは透明である必要はなく、ページ上でコンテンツが目立つようにデザインすることができます。背景色、枠線、影を追加したり、スタックの角の丸みを調整したりすることもできます。
スタックをデザインする方法：
- エディタに移動します。
- 該当するスタックを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。
- 「デザイン」下で、利用可能なオプションを使用して、スタックをカスタマイズします：
- 背景色と不透明度を設定します。
- 枠線を追加してスタックを囲みます。
- 角の丸みを選択します。
- 影を有効にし、角度、位置、サイズなどの設定を管理します。
スタックレイアウトを調整する
スタックレイアウトを調整して、すべての要素の間隔、配置、余白をビジョンやクライアントのニーズに合わせてカスタマイズしましょう。
スタックレイアウトを調整する方法：
- エディタに移動します。
- 該当するスタックを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
- 「レイアウト」までスクロールダウンします。
- 利用可能なオプションを使用して、スタックレイアウトを調整します：
- 「横」から「縦」に、またはその逆に方向を切り替えます。
- 「アイテムの間隔」下で値を入力し、スタックする要素（例：アイテム）間のマージンを均等に調整します
- スタックするアイテムの配置を「左」、「右」、「中央」、「均等割付」から選択します。
- 側面にパディングを追加します。
ヒント：
キャンバス上で直接、パディングと間隔を調整することができます。要素の間にある線をドラッグするか、正確な値を入力したい場合は、線をダブルクリックします。必要に応じてサイズ単位を切り替えることもできます。