Wix Studio エディタ：高度な CSS グリッドを操作する
読了時間：7分
Wix Studio エディタでは、高度な CSS グリッドを使用して要素やセクションのレイアウトを整理できます。必要な行数と列数を選択し、レスポンシブ測定単位（例：fr、最小 / 最大、%）を使用してサイズを決定します。
この記事では、CSS グリッドの操作について説明します：
セクショングリッドから CSS グリッドに切り替える
エディタのセクションには、セクショングリッドを設定するオプションがあります。これは、同じ CSS ロジックに基づく高度なグリッドをより使いやすくしたバージョンです。高度な CSS グリッドに切り替えると、ブレイクポイントごとにレイアウトをより正確に制御できます。
注意：
一度切り替えると、セクショングリッドに戻すことはできません。ただし、アクションを実行したばかりであれば、エディタの右上にある「元に戻す」ボタン 
を使用できます。
を使用できます。セクショングリッドから CSS グリッドに切り替える方法：
- エディタで該当するセクションを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。 - 「レイアウト」までスクロールダウンします。
- 「高度な CSS グリッド」横の「切り替える」をクリックします。
- 「CSS グリッドに切り替える」をクリックします。
次のステップ：
要素設定パネルから行、列、間隔をカスタマイズします。キャンバス上でグリッド線をドラッグして移動させることもできます。
他の要素に CSS グリッドを適用する
CSS グリッドは、コンテナ、ライトボックス、フレックスボックス、リピーターアイテムに適用できます。具体的には、リピーター要素の場合、1つのアイテムにグリッドを適用すると、残りのアイテムも自動的に更新されます。
CSS グリッドを適用する方法：
- エディタで該当するパーツを選択します。
- 「その他のアクション」アイコン
をクリックします。 - 「高度な CSS グリッドを適用」をクリックします。
- 「1x1」ドロップダウンからレイアウトを選択します。
ヒント：独自の行数と列数を設定する場合は、「その他」を選択します。
次のステップ：
要素設定パネルから行、列、間隔をカスタマイズします。キャンバス上でグリッド線をドラッグして移動させることもできます。
CSS グリッドをカスタマイズする
グリッドをカスタマイズして、希望するレイアウトを作成しましょう。行数と列数を変更したり、グリッドのサイズと間隔を調整したりできます。
ヒント：
グリッドをデザインすると、作業中の特定のブレイクポイントにのみ適用されます。要素の構成が完璧になるように、すべての画面サイズに合わせてグリッドをブレイクポイントごとに設定してください。
CSS グリッドをカスタマイズする方法：
- 該当する要素またはセクションを選択します。
- グリッドのカスタマイズ方法を選択します：
別のレイアウトを選択
行と列をさらに追加する
をクリックします。
をクリックしてオプションを表示します。
列または行のサイズを変更する
列または行を削除する
をクリックします。
グリッドギャップのサイズを編集する
グリッドに要素を配置する
グリッドに要素を追加する際、配置をより正確に設定するのに役立つツールがいくつかあります。
要素をドッキングする
グリッド線に要素をドッキングすることで、希望どおりの位置に配置することができます。Wix Studio エディタでは、すべての要素が自動的にドッキングされていますが、手動で詳細してマージンを追加することができます。
グリッドセル間で要素を移動する
要素設定パネルの「配置」セクションで、要素を選択し、その要素が含まれるグリッドセルを確認できます。ドラッグ＆ドロップを使用せずに、任意のグリッドセルをクリックして要素をそこに移動できます。
特定の列と行番号を入力することもできます。これは、複数のグリッドセルに要素を配置する必要がある場合に便利です。
グリッド単位の表
CSS 単位の全範囲を使用してグリッドを作成します。パーセント、分数、ピクセルを使用して、列と行のサイズを設定できます。また、列と行の最小・最大サイズを設定するか、計算を使用して必要なグリッドを作成することもできます。
パーセント（%）
分数（fr）
自動
ピクセル（px）
ビューポートの幅と高さ（vw と vh）
最小・最大コンテンツ
Min/Max
計算
お役に立ちましたか？
|