Editor X：コンテナを使用する | サポートセンター

Editor X：コンテナを使用する

読了時間：5分

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

コンテナボックスを使用して、レスポンシブで構造化されたレイアウトを作成しましょう。テキスト、画像、ボタンなどの要素をコンテナに追加すると、すべての画面サイズで同じ配置を維持できます。

この記事では、下記の項目について説明します：

さまざまなコンテナボックスから選択し、好きなボックスをページにドラッグします。空のコンテナまたはグリッドのコンテナを追加して、コンテンツを簡単に整理できます。

Editor X の上部にある「要素を追加」をクリックします。
「レイアウトツール」をクリックします。
追加するコンテナの種類を選択します：
- ボックス：さまざまなスタイルと形の事前にデザインされたコンテナボックス。
- グリッド：これらのコンテナボックスには、後で調整できるグリッドが含まれています。
コンテナをページにドラッグします。
コンテナに要素をドラッグして追加します。
（オプション、要素設定パネルから）「デザイン」タブをクリックして、コンテナのデザインをカスタマイズします。

詳細はこちら

コンテナ内に要素を配置すると、自動的にコンテナに貼り付けされ、その子要素になります。レイヤーパネルで、貼り付けされているすべての要素を確認できます。

これにより、コンテナは異なるビューポートに応答します。画面サイズが変更されると、貼り付けされた要素は同じ方法で、コンテナに直接関連してサイズ変更されます。

ヒント：

コンテナの背景に画像や動画を追加できます。コンテナ内に要素を配置し、右上の「ストレッチ」アイコン

をクリックします。

Editor X のコンテナには、単一のセル（1x1 レイアウト）を持つレスポンシブな組み込み CSS グリッドが付属しています。より多くの行と列を含むグリッドを適用して、コンテナ内の要素を整理することができます。

Editor X でコンテナをクリックします。
次のいずれかの方法でグリッドを変更します：
- プリセットグリッドを選択する：「1x1」ドロップダウンをクリックし、別のグリッドを選択します（例： 2x2、2x1）。
- ページ上でグリッドをカスタマイズする：
  1. 「キャンバス上でグリッドを編集」アイコンをクリックします。
  2. グリッドの左端または上端からドラッグして、新しいグリッド線を追加します。