Wix Studio エディタ：ドッキング、マージン、余白を操作する
読了時間：8分
絶え間なく変化するデバイスの世界では、異なる画面サイズでサイトが正しく表示されるように、要素の位置を制御することが重要になります。そのため Wix Studio エディタでは、要素は自動的にドッキングされています。
つまりブレイクポイント間の配置を気にしなくて良いため、要素を自由に移動させることができます。必要であれば、位置・ドッキング・マージンは要素設定パネルからいつでも設定できます。
px* とは？
px*（Scale）は、ドッキング、マージン、余白のデフォルトの測定単位です。表示される px* 値は、現在のキャンバスサイズに対するピクセル換算値です。別のブレイクポイントに切り替えて、px* 値の自動スケーリング方法を確認してください。
Wix Studio アカデミーにアクセスして、その他の Wix Studio ウェビナー、チュートリアル、コースをご覧ください。
キャンバスに要素を配置する
ドラッグアンドドロップを使用し、ブレイクポイントごとに、キャンバス上で要素の位置を直接設定することができます。よって、すべての画面で要素が正しく表示されるようにすることができます。
要素が同じ親内にある限り（例：セクション、セル）、動かしても他のブレイクポイントには影響しません。要素を別の親に移動（リペアレント）すると、すべてのブレイクポイントに影響します。
要素設定パネルの X 座標と Y 座標
要素の X 座標と Y 座標を確認して、現在のキャンバスサイズにおける正確な位置を確認できます。
- X：親要素の左端から右端までの水平面（例： セクション、コンテナ、スタック）。
- Y：親要素の上から下までの垂直面。
以下の例では、テキスト要素を親要素であるセルの外に移動させると、 px* 値が負に変わることがわかります。
自動ドッキングと手動ドッキング
エディタで新しい要素を追加すると、すべての画面とデバイスで所定の位置に留まるように、自動的にドッキングされます。ただし、いつでも自動ドッキングを無効にし、ドッキングポイントを手動で選択することが可能です。
詳細については以下のトピックをクリック数リックしてください。
エディタでの自動ドッキング
ドッキングを手動で調整する
、下 
、右 
、左 
）をクリックします。
要素をドッキングする際にマージンを使用する
要素がドッキングされている場合、マージンを利用することで、要素と親要素の端との間に一定の距離（余白）を保つことができます。ドッキングされていない側面にも余白を追加でき、マージンがバッファとして機能するので、他の要素との重複を防ぎます。
マージンを作成・編集する方法：
- 該当する要素を選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。
- 「配置」までスクロールダウンします。
- 該当する余白（左、右、上、下）に値を入力します。
サイズ単位をすばやく切り替える：
現在のサイズ単位をクリックして、別のサイズ単位に切り替えます。同じ単位をすべての側面に同時に適用することも、側面ごとに異なる単位を選択することもできます。
レスポンシブコンテナの周りに余白を追加する
コンテナに余白を追加して、端（上部、下部、側面）と内部のコンテンツの間にスペースを作ります。余白は、ベーシックコンテナ、スタック、フレックスボックス、リピーター、セル、セクション、ページを含む、すべてのタイプのレスポンシブコンテナに追加できます。
追加した余白は、ドラッグアンドドロップで直接調整することができます。レスポンシブコンテナを選択し、「余白」にマウスオーバーしてこのオプションを表示します。
余白を追加する方法：
- 該当する要素を選択します。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
- 「レイアウト」までスクロールダウンします。
- 編集する余白を選択します：
- 特定の側面
：アイコンをクリックし、該当する側面（左、右、上、下）に値を入力します。 - 横方向の余白
：左右の余白の値を入力します。 - 縦方向の余白
：上下の余白を入力します。
- 特定の側面
サイズ単位をすばやく切り替える：
現在のサイズ単位をクリックして、別のサイズ単位に切り替えます。同じ単位をすべての側面に同時に適用することも、側面ごとに異なる単位を選択することもできます。
要素が重複しないようにする
要素を配置するときは、小さいブレイクポイントで要素が重ならないようにすることが重要です。これを防ぐには、以下のヒントをご覧ください。
上にドッキングする
セルを追加してレイアウトを整理する
スタックを適用する
要素間に不要な重なりが表示されている場合は、この動画ガイドを参照して問題のトラブルシューティングを行ってください。