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