Wix Studio Two エディタ：セルとグリッドを操作する

すでにあるセルを、要素をセルの外に移動させることなく並べ替えます。オプションは現在のセルの数に合わせて変わるため、リストには適した配置のみが表示されます。

要素設定パネルに表示される内容は、現在のセクショングリッドによって異なります：

• セクショングリッドにセルが 1 つしかない場合は、「レイアウトを選択」で、より多くのセルを持つレイアウトを選択できます。
• グリッドに複数のセルがある場合は、「レイアウトを変更」ドロップダウンをクリックして、レイアウト（「行」「列」「コラージュ」「カード」）を選択できます。
  注意：利用できるレイアウトは、セクショングリッド内のセルの数によって異なります。たとえば、「カード」レイアウトは、4 つのセルを持つグリッドでのみ利用できます。

レイアウトにセルがもう 1 つ必要な場合は、グリッドを拡張します。セルを追加するグリッドの端を選択できます。

アクションバーの「レイアウト」をクリックし、「セルを追加」の下で、新しいセルを追加したい方向をクリックします：「右」 、「左」 、「上」 、または「下」 。

セルを削除するには、キャンバス上でセルを右クリックして「削除」を選択するか、キーボードの「Delete」キーを押します。この操作を行うと、そのセル内にある要素も削除されます。

1 つのセルを 2 つに分割します。セルにきれいに収まるよう、一部の要素が移動する場合がありますが、キャンバス上でいつでも位置を変更できます。

キャンバス上でセルを選択し、要素設定パネルの「セルを分割」の横にある該当するオプションを選択します：「横に分割」 または「縦に分割」 。

参考：

アクションバーの同じアイコンをクリックしても、セルを分割できます。

2 つのセルを 1 つに結合したり、2 つのセルの位置をスワップしたりします。結合は、セルが同じ行または同じ列にある場合のみ利用できますが、スワップは任意の 2 つのセルで利用できます。

1. 最初のセルをクリックします。
2. 「Shift」キーを押しながら、2 つ目のセルをクリックします。
3. アクションバーの「結合」または「スワップ」をクリックします。

グリッドの比率を整えたり、セルが表示される順序を逆にしたりします。セルとその内部の要素が一緒に移動するため、反転は別の構図をすばやく試すのに便利です。

要素設定パネルの「グリッドを調整」の横にある該当するオプションを選択します：

• 列を均等化 ：すべての列を同じ幅にします。
• 行を均等化 ：すべての行を同じ高さにします。
• 列を反転 ：列の順序を逆にします。
• 行を反転 ：行の順序を逆にします。

参考：

これらの操作は、アクションバーからも利用できます。「レイアウト」をクリックし、「グリッドを調整」の横にある該当するアイコンをクリックします。

セクショングリッドはそのままに、行の高さを自分で設定します。デフォルトでは、エディタが行のサイズを自動的に調整しますが、間隔の調整はいつでもエディタに戻すことができます。

セクションに複数のセルがある場合は、まず該当するセルを選択します。次に、「縦の間隔」ドロップダウンをクリックして「手動」を選択します。サイズ調整をエディタに戻すには、「自動」を選択します。

注意：

セクションのレスポンシブ動作が「画面にフィット」に設定されている場合、縦の間隔はすでに手動に設定されています。

「レイアウト」ドロップダウンから新しい配置を選択して、グリッド内のセルを再編成します。利用できるレイアウトのリストは、現在の行と列の数に基づいており、さまざまな配置方法が提案されます。

参考：

アクションバーからも設定できます。「レイアウト」ドロップダウン（現在のグリッドサイズ（例：2x2）が表示されています）をクリックして、新しい配置を選択します。

各行と各列のサイズを、適した単位でご自身で設定します。

1. 「列 / 行」をクリックして、完全なリストを表示します。
2. 該当する行または列の番号の横に、サイズと単位を入力します。

参考：

キャンバス上で直接、行と列のサイズを変更することもできます。アクションバーの「キャンバス上でグリッドを編集」アイコン をクリックし、グリッド線を目的の位置までドラッグします。要素は元の位置のままです。

グリッドを作成した後でも、構造を変更できます。行や列を追加すると、スペースを確保するために要素が移動する場合があります。

1. 「列 / 行」をクリックして、完全なリストを表示します。
2. 該当する列 / 行の横にある「その他のアクション」アイコン をクリックします。
3. 該当するオプションを選択します：
   • 列：「左に列を追加」、「右に列を追加」、または「列を削除」。
   • 行：「上に行を追加」、「下に行を追加」、または「行を削除」。

参考：

• キャンバス上で直接、行や列を追加することもできます。アクションバーの「キャンバス上でグリッドを編集」アイコン をクリックし、グリッドの左端または上端からドラッグして、新しいグリッド線を追加します。要素は元の位置のままです。
• グリッドの最後の列 / 行は削除できません。列または行が 1 つしかない場合は、「列を削除」/「行を削除」は利用できません。

行と列の間隔を空けます。「ギャップ」の横に希望する値を入力し、現在の単位をクリックして別の単位に切り替えます。たとえば、px* から vw に切り替えると便利な場合があります。

両方のギャップ（水平方向と垂直方向）に同じ単位を使用することも、それぞれに異なる単位を選択することもできます。

キャンバス上でドラッグすることなく、要素の位置を変更したり、複数のセルにまたがって引き伸ばしたりします。

1. 移動したい要素を選択します。
2. （要素設定パネルで）「位置」までスクロールします。
3. 「グリッドセル内の位置」で、該当するセルをクリックします。
   ヒント：「Shift」キーを押しながら、引き伸ばしたい最後のセルをクリックすると、要素を複数のセルにまたがって配置できます。

セクショングリッドには最大 16 個のセルを配置でき、上限に達すると「セルを追加」は機能しなくなります。

デザインにさらに多くのセルが必要な場合は、コンテンツを 2 つのセクションに分けるか、CSS グリッドを手動で編集して、必要な構造をそこで作成することができます。

いいえ、必要ありません。「縦の間隔」を「手動」に設定すると、セクショングリッドで行の高さを自分で制御できます。

CSS グリッドを手動で編集するのは、より大きな変更になります。セクショングリッドが完全に置き換えられ、すべての行と列が、ご自身で設定する値になります。レスポンシブのサイズ単位が必要な場合や、プリセットのレイアウトでは対応できない構造が必要な場合に使用してください。