この CookBook ではエレメントを狙った位置に配置する方法について紹介します。
エレメントを配置する方法として、エレメントをドラッグ&ドロップする方法がありますが、
配置先のスペースが狭いとなかなか思い通りの位置に配置できない場合があります。
そこでエレメントを狙った位置に配置する方法を以下のシチュエーションごとに動画で説明します。
- エレメントを新規で配置する場合
- 配置済みのエレメントを移動させる場合
1. エレメントを新規で配置する場合
エレメントパレットをダブルクリックすることでエレメントを配置できます。
動画の操作説明
![](https://dev.intra-mart.jp/wp-content/uploads/2022/05/im_cookbook_203543_1-1024x576.png)
ここでは親のボックスをボックス①、その子にあたるボックスをボックス②とします。
動画では最初にボックス②を選択しています。
これはボックス②の中にエレメントを配置するためです。
ダブルクリックでエレメントを配置する場合、選択しているエレメント内に配置されます。
![](https://dev.intra-mart.jp/wp-content/uploads/2022/05/im_cookbook_203543_2-1024x576.png)
ボックス②の中にラベルが配置されました。
![](https://dev.intra-mart.jp/wp-content/uploads/2022/05/im_cookbook_203543_3-1-1024x576.png)
ボックス①の中に強調ラベルが配置されました。
ダブルクリックでエレメントを配置する場合、選択しているエレメント内の最後尾に配置されます。
そのため強調ラベルはボックス②の後ろに配置されています。
2. 配置済のエレメントを移動させる場合
画面構成からエレメントツリーをドラッグ&ドロップすることでエレメントの移動ができます。
動画の操作説明
![](https://dev.intra-mart.jp/wp-content/uploads/2022/05/im_cookbook_203543_4-1024x576.png)
画面の右側にある「画面構成」を使用します。
![](https://dev.intra-mart.jp/wp-content/uploads/2022/05/im_cookbook_203543_5-1024x576.png)
このツリーの中身をドラッグ&ドロップで移動させることで、実際に配置しているエレメントの位置も変わります。
![](https://dev.intra-mart.jp/wp-content/uploads/2022/05/im_cookbook_203543_6-1024x576.png)
![](https://dev.intra-mart.jp/wp-content/uploads/2022/05/im_cookbook_203543_7-1024x576.png)
![](https://dev.intra-mart.jp/wp-content/uploads/2022/05/im_cookbook_203543_8-1024x576.png)
![](https://dev.intra-mart.jp/wp-content/uploads/2022/05/im_cookbook_203543_9-1024x576.png)
このように画面構成のエレメントツリーを操作することでレイアウト上の間隔に関係なく
狙った位置にエレメントを配置することができます。