Editor X：グリッドを使用する
読了時間：8分
Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について
CSS グリッドは、要素を構造化された方法で整理するのに最適な方法です。 Editor X では、すべてのコンテナとセクションにグリッドが組み込まれています。構成に必要な行数と列数を選択し、さまざまな単位でサイズを調整できます。
この記事では、Editor X でのグリッドの操作について説明します：
もっと詳しく知りたい場合：
Editor X アカデミーのグリッドに関するレッスンをご覧ください。（英語）
既存のグリッドを調整する
すべてのセクションとコンテナには、調整可能な 1x1 のグリッドが組み込まれています。ワンクリックで別のレイアウトに切り替えるか、既存のセクション上で線をドラッグして独自のグリッドを作成します。
グリッドを調整する方法：
- 該当するコンテナまたはページセクションをクリックします。
- 次のいずれかの方法でグリッドを変更します：
レイアウトを選択する
キャンバス上でグリッドを編集する
をクリックします。
ヒント：
「セクションを追加」アイコン 
をクリックして、グリッドが組み込まれたセクションを追加することもできます。
をクリックして、グリッドが組み込まれたセクションを追加することもできます。要素設定パネルからグリッドを管理する
グリッドをカスタマイズして、希望するレイアウトを作成しましょう。行数と列数を変更したり、グリッドのサイズと間隔を調整したりできます。
グリッドを管理する方法：
- 該当するグリッドをクリックします。
- Editor X 上部にある「要素設定パネル」アイコン
をクリックします。 - 「レイアウト」タブ
をクリックし、「表示」までスクロールダウンします。 - 実行する内容を選択します：
- 別のレイアウトを選択する：「レイアウト」ドロップダウンをクリックして、既存のグリッドと同じ数のセルを含む別のレイアウトを選択します。
- グリッドを手動で調整する：方法については以下をクリックしてください：
列または行を追加する
をクリックします。
をクリックし、オプションを選択します：
列または行のサイズを変更する
ギャップのサイズを編集する
列または行を削除する
ブレイクポイントを操作する：
グリッドをデザインすると、作業中の特定のブレイクポイントにのみ表示されます。要素の構成が完璧になるように、すべての画面サイズにグリッドを作成する必要があります。
グリッドに要素を配置する
要素を追加してグリッドに配置する際に、レスポンシブレイアウトを作成するのに役立つさまざまなツールがあります：
要素をドッキングする
グリッド線に要素をドッキングすることで、希望どおりの位置に配置することができます。グリッドセルに要素を追加すると、最も近い縦横のグリッド線に自動的にドッキングされます。必要に応じて、要素設定パネルからドッキングを調整できます。
要素を別のグリッドセルに移動させる
要素設定パネルの「配置」セクションで、要素を選択し、その要素が配置されているグリッドセルを確認できます。ドラッグ＆ドロップを使用せずに、任意のグリッドセルをクリックして要素をそこに移動できます。
グリッドセルを埋めるために要素を引き延ばす
クリックひとつで、要素を引き延ばしてグリッドセルを埋めることができます。要素が複数のセルのグリッド線上に配置されている場合は、配置されているすべてのセルに引き延ばされます。
グリッド単位一覧
CSS 単位の全範囲を使用してグリッドを作成します。パーセンテージ、ピクセル、または分数を使用して、列と行のサイズを設定できます。列と行の最小サイズと最大サイズを設定し、計算を使用して必要なグリッドを作成することもできます。
注意：
行と列のサイズは異なる単位で設定できます。デフォルトでは、行の単位はピクセルで、列の単位は分数（fr）です。
単位 | 単位タイプ | 説明 |
|---|---|---|
分数（fr） | フルード | 列 / 行のサイズをページセクション / コンテナのサイズの分数に設定します。たとえば、2列のグリッドで、左側の列が 2fr に設定され、右側の列が 1fr に設定されている場合、左側の列はセクション / コンテナの 2/3 を占めます。 |
Auto | フルード | 行と列の高さと幅は、コンテンツに合わせて自動的に設定されます。 |
パーセント（%） | フルード | 列 / 行のサイズをセクション / コンテナのパーセンテージに設定します。 |
ピクセル（px） | 固定 | 列 / 行のサイズをセクション / コンテナの画面ピクセルの固定数に設定します。 1px = 1インチの 1/96 |
ビューポート幅（vw） | ビューポート | 列 / 行のサイズを、ビューポートの幅（ブラウザウィンドウサイズ）のパーセンテージに設定します。例：ビューポートの幅が 50cm の場合、1vw = 0.5cm |
ビューポート高さ（vh） | ビューポート | 列 / 行のサイズをビューポートの高さ（ブラウザウィンドウサイズ）のパーセンテージに設定します。例：ビューポートの高さが 50cm の場合、1vh = 0.5cm |
Min/Max | その他 | 列 / 行のサイズを最小値と最大値に設定します。オプションを使用する場合は、グリッド単位から選択できます。 |
Min Content | その他 | 列 / 行のサイズをこの最小コンテンツよりも小さくならないように設定します。 |
Max Content | その他 | 列 / 行のサイズをこの最大コンテンツより大きくならないように設定します。 |
計算 | その他 | グリッド単位を使用して計算を作成し、列 / 行のサイズを設定します。 |
お役に立ちましたか？
|