Wix Studio エディタ:要素をスタックする
読了時間:4分
スタックは、縦または横の順序に関係なく、要素のグループを「ハグ」するフレックスボックスコンテナです。これにより、定義した間隔で要素が重ならないように整理されます。
また、負のマージンを使用して、要素を意図的に重ねることもできます。
この記事では、以下の項目について説明します:
スタックを適用する
- スタックに追加する要素をクリックします。
- Shift キーを押しながら、他のスタック要素を選択します。
- 「スタック」をクリックします。
- (オプション)要素間の縦線を長押しして、マージンを設定します。
![スタックアイテム間の間隔をドラッグしてマージンを増やしています](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/8066edcc-cce8-4125-b9bd-695fb324dcc2/bbeb2364-9f29-45db-a9f1-3e0400cc9009.gif)
ヒント:![スタックのマージンを反対方向にドラッグして、画像とテキストの間に重なりを作成しています](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/17/b9fbfcf5-e172-4bde-8ec7-a1617ab0a7c2/1cc2ee2d-d415-4b30-a265-577645be4e24.gif)
マイナスのマージンを作成して、意図的に要素を重ねることもできます。
![スタックのマージンを反対方向にドラッグして、画像とテキストの間に重なりを作成しています](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/17/b9fbfcf5-e172-4bde-8ec7-a1617ab0a7c2/1cc2ee2d-d415-4b30-a265-577645be4e24.gif)
スタックの方向を変更する
要素をスタックすると、要素の順序によって方向が自動的に決定されます。たとえば、要素が縦に配置されている場合、スタックは縦になります。
いずれの場合も、ドロップダウンを使用していつでも方向を切り替えることができます。これにより、要素が正しい順序になるよう、自動的に再配置されます。
![横向きのスタックが縦向きになった例。要素は縦向きの順序になっています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/97d55a97-9873-4f3c-9934-e9fee921e967/10a23464-f3e2-45e9-8593-71678b65ad43.gif)
スタックを管理する
新しいコンテンツや要件に合わせて、いつでもスタックをカスタマイズできます。スタックにさらに要素を追加したり、ボタンをクリックするだけで移動させたり、不要になった要素を切り離したりします。
スタックを管理する方法:
- 該当するスタックを選択します。
- 次に実行する内容を選択します:
スタックに要素を追加する
スタックから要素を切り離す
スタック内の要素を並べ替える
パーツのスタックを解除する
スタックをデザインする
スタックは透明である必要はなく、ページ上でコンテンツが目立つようにデザインすることができます。背景色、枠線、影を追加したり、スタックの角の丸みを調整したりすることもできます。
スタックをデザインする方法:
- 該当するスタックを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「デザイン」までスクロールダウンします。
- 利用可能なオプションを使用してスタックをデザインします:
- 背景色と不透明度を設定します。
- 枠線を追加してスタックを囲みます。
- 角の丸みを選択します。
- 影を有効にし、角度、位置、サイズなどの設定を管理します。
![要素設定パネルとキャンバス上で選択されたスタックのスクリーンショットで、デザインオプションが表示されています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/44515945-055e-4c5d-b4c1-c33c7fe8cc7f/0917549a-0198-4283-a7dc-57685eb493fd.png)
お役に立ちましたか?
|