Wix Studio エディタ：フレックスボックスベースのツールとグリッドベースのツールのどちらかを選択する
4分
Wix Studio エディタは、特定のデザインニーズに合わせて要素を整理するための強力なレイアウトツールを提供します。これらのツールは、グリッドとフレックスボックスの 2つの一般的な CSS 技術に基づいています。これらの違いを理解することで、クライアントのコンテンツを紹介する最適なレスポンシブレイアウトを計画することができます。
この記事では、ニーズに最適な選択ができるように、レイアウトツールを種類ごとに分類し、主な機能について説明します。
Wix Studio エディタのグリッドベースの要素
グリッドは、事前に定義されたセル内で行と列を使用して要素を配置する 2D CSS モデルです。これは、正確に制御されたレスポンシブモジュールレイアウトを作成するのに特に役立ちます。
以下の要素は CSS グリッドに基づいています：
セクショングリッド
空白のセクションには、（セクション全体を収容する）単一のセルを含む組み込みのグリッドがインストールされています。必要に応じてグリッドをより多くのセルに分割し、コンテンツにレスポンシブな構造を持たせます。デスクトップ用のレイアウトを決定したら、小さなブレイクポイントで別のレイアウトを選択できます。
セクションの要素を整理する目的でレスポンシブなレイアウトにしたい場合は、高度なグリッドに切り替える必要はありません。キャンバスで直接、各セルのサイズを設定すると、すべての画面でセルが正しく表示されます。
高度なグリッド
高度な CSS グリッドでは、セクショングリッド、コンテナ、ライトボックス、フレックスボックス、リピーターアイテムで複雑なレイアウトを自由に作成できます。レスポンシブ測定単位（例：fr、最小 / 最大、%）を使用して、あらゆるブレイクポイントで各セルの正確なサイズを設定することが可能です。
最適な用途：ピクセル単位まで正確な調整が必要な複雑なレイアウト。
コンテナ
最適な用途：セクション内の独立型で個別のレイアウト。
他のレイアウトツール（例：グリッド、スタック、リピーターなど）を配置することもできます。
Wix Studio エディタのフレックスボックスベースの要素
フレックスボックスは、親コンテナ内で要素を動的に調整する必要があるレイアウト用に最適化された 1次元 CSS モデルです。フレックスボックスツールを使用すると、拡大、縮小、または折り返しのいずれであっても、割り当てられたスペースに合わせて要素がシームレスに「フレックス」します。
以下の要素はフレックスボックスに基づいています：
スタック
スタックは、要素の縦または横の配置を保証する非表示のフレックスコンテナです。スタックを使用すると、要素間のマージンが維持され、小さな画面でも要素が重なり合うのを防ぐことができます。
さらに、ブレイクポイントごとに要素をスタックする順序を設定できるので、すべての画面サイズで洗練されたレイアウトが表示されるようになります。
最適な用途：要素を単一の横軸または縦軸に沿って正確に配置する必要がある、セクション内の独立型で個別のレイアウト。
フレックスボックス
フレックスボックスは、すべての画面に合わせてアイテムが自動的に折り返す、既製のフレックスレイアウトです。レスポンシブコンテナで構成されており、特定のコンテンツに合わせてさまざまな表示タイプから選択できます（例：モザイク、スライダー、カラムなど）。
ビューポートごとに異なる表示タイプを選択でき（例：スライダーレイアウトはモバイル端末に最適）、特定のアイテムの順序を設定することもできます。
最適な用途：大量のコンテンツを便利なレイアウトに整理する場合。
リピーター
リピーターはデザインとレイアウトが同じで、それぞれ異なるコンテンツを有するアイテムのリストです。レイアウトとデザインの調整は自動で行われるため、一貫性を保つことができます。
リピーターは、特徴としてコンテンツコレクションに接続できる機能があります。これにより、実際のデザインに影響を与えることなく、バックエンドからコンテンツを管理・更新することができるため、究極のデータに基づいたレイアウトツールといえます。
最適な用途：リスト、または完全にまとまりのあるアイテムに分割したい任意のタイプのコンテンツ。
適切なレイアウトツールを選択する方法
ツールを選択する前に、各画面サイズに適したレイアウトを計画してください。その上で、必要な機能を備えたレイアウトツールを選択できます。
コンテンツの量と種類
各レイアウトツールは、異なる量と種類のコンテンツに対応するように設計されています。たとえば、コンテナは小さくて焦点を絞ったコンテンツに適していますが、大きなセクショングリッドは複雑なレイアウトを整理するのに、より適しています。
同様に、フレックスボックスとリピーターはどちらも大量のコンテンツを整理して表示するのに最適ですが、固有の目的で使用されます。リピーターを使用すると、すべてのアイテムに同じレイアウトとデザインを適用することで、一貫性を保つことができます。一方、フレックスボックスを使用すると、各アイテムを個別にデザインすることができます。
レスポンシブ動作
フレックスボックスとグリッド要素は、異なる画面サイズに合わせてコンテンツを調整する方法が異なります。グリッドには、小さな画面に収まるように異なる数の行と列が表示されます。フレックスボックスベースのツールでは、訪問者の画面に合わせてコンテンツが自動的に折り返したり、並べ替えられたりします。
コンテンツコレクション（データ）に接続する
リピーターだけがこのオプションをサポートしているので、CMS コレクションのコンテンツを表示する必要がある場合は、このツールを選択してください。
あるいは、特定の要素（例：テキスト、画像など）をコレクションに接続して、コンテナまたはスタックに追加してレイアウトを整理することができます。