Editor X：ドッキングとマージンを操作する | サポートセンター

Editor X：ドッキングとマージンを操作する

読了時間：5分

Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について

絶え間なく変化するデバイスに対応できるよう、さまざまな画面サイズで綺麗に見えるように、パーツの位置を制御することが重要です。ドッキングを使用してこれを行うことができます。

ドッキングは、画面のサイズが変更されたときの、ページセクション、コンテナ、またはグリッドセル内のパーツの縦と横の位置を決定します。

この記事では、パーツのドッキングについて説明します：

もっと詳しく知りたい場合：

Editor X アカデミーのドッキングとマージンに関するレッスンをご覧ください（英語）。

ページセクション、コンテナ、またはグリッドセルにパーツを追加すると、上部または下部のどちらか近い方に自動的にドッキングされます。

ドッキング位置は、パーツ上の点線で示されます。以下の例では、ベクターアートはコンテナの上部と左側にドッキングされています：

パーツの正確な配置は、要素設定パネルで確認できます。

自動ドッキングを無効にし、要素設定パネルから手動で位置を設定できます。

パーツを上、下、左、右、またはそれらが入っているセクション、コンテナ、またはグリッドセルの中心にドッキングします。

ヒント：

通常、パーツをコンテナ、セクション、またはグリッドセルの上部にドッキングすることをおすすめします。これにより、ページにさらにコンテンツが追加されたときに、パーツとコンテナ / セクションの間に常に定義されたスペースがあることが保証されます。

マージンを使用して、パーツとそれがドッキングされているセクション、コンテナ、またはグリッドセルの端との間の距離を設定します。

マージンの単位：

マージンは、ピクセル（px）、パーセント（％）、ビューポートの高さ（vh）、ビューポートの幅（vw）で設定できます。画面のサイズが変更されると、各単位はそれぞれ異なる結果となります。キャンバスをドラッグしてサイズを変更し、単位の動作の違いを確認してください。

ヒント：

パーツを配置するときは、小さいブレイクポイントでパーツが重ならないようにすることが重要です。これを防ぐには、以下のヒントをご覧ください。

要素設定パネルの配置オプションを使用して、パーツを中央に配置し、左、中央、右に整列させることができます。

より複雑なレイアウトの場合は、セクションまたはコンテナに CSS グリッドを適用し、パーツをグリッド線にドッキングしてください。パーツをそれぞれのグリッドセル内に配置し、グリッド線にドッキングすると、すべての画面サイズで完璧に配置されます。

縦の順序で配置されたパーツのグループがある場合、スタック機能を使用して、それらが重ならないようにすることができます。スタックすると、さまざまな画面サイズに合わせて自動的に調整されるフレックスコンテナ内にパーツが配置されるため、レスポンシブなレイアウトを維持できます。

ページをスキャンして、重複するパーツがないか確認します：

Editor X が提供する無料ツールであるサイトチェッカーを使用して、すべてのページでこの問題を自動的に検索します。

この記事では下記を説明します：