Swift スタック

Swift Stack コンポーネントは、シンプルなデザインから複雑で柔軟なデザインまで、さまざまなデザインに対応するフレームワークを提供します。グリッド表示プロパティを使用し、div で構成されたセルを包含します。div は自動的に flex に設定されます。このコンポーネントには 8 つのバリエーションがあり、さまざまなレイアウトにコンテンツを配置できます。さらに、各 Swift Stack バリエーションと Swift Stack セルのサイズを手動で変更して、コンテンツの表示をより正確に制御することもできます。Swift Stack は、目立つセクションから製品の表示まで、さまざまな種類のコンテンツを整理するのに最適です。

このチュートリアルを通じて、以下のことを理解できるようになります。

1. Swift Stackを組み込む方法
2. Swift スタックを設計する方法
3. Swift Stackセルをスタイル設定する方法

Swift スタックを組み込む方法

Swift Stackを導入するには、 パネルを追加 > 構造 エリア。Swift Stack を Webflow キャンバスにドラッグ アンド ドロップします。キャンバスにプリセット メニューが表示され、8 つの Swift Stack バリエーションから 1 つを選択できます。

Swift Stackのバリエーション

Swift Stack には、それぞれ独特のセル構造を備えた 8 つのプリセット バリエーションが用意されています。

• 単一列 — 1 セル、1 列、1 行 
• 二重列— 2 つのセル、それぞれが 1 列と 1 行にまたがる
• 3列— 3 つのセル、それぞれが 1 列 1 行にまたがる
• 4列— 4 つのセル、それぞれが 1 列 1 行にまたがる 
• 2 + 1— 3 つのセル。左の列に 2 つのセルがあり、それぞれ 1 列 1 行にまたがっています。右の列に 1 つのセルがあり、1 列 2 行にまたがっています。
• 1 + 2— 3 つのセル。左の列に 1 つのセルがあり、1 列 2 行にまたがっています。右の列に 2 つのセルがあり、それぞれ 1 列 1 行にまたがっています。
• ダブル 2 x 2— 4 つのセル。左の列に 2 つのセルがあり、それぞれ 1 列 1 行にまたがっています。右の列に 2 つのセルがあり、それぞれ 1 列 1 行にまたがっています。
• フォーマットされたダブル 2 x 2 — 4 つのセル。上段に 2 つのセルがあり、左のセルは 2 列 1 行にまたがり、右のセルは 1 列 1 行にまたがります。下段に 2 つのセルがあり、左のセルは 1 列 1 行にまたがり、右のセルは 2 列 1 行にまたがります。

各 Swift Stack バリエーションは、それぞれ異なる目的に使用できます。たとえば、目立つセクションに 2 列のバリエーションを使用して、右側の列にテキスト コンテンツを配置し、左側に画像を配置できます。または、Double 2 x 2 バリエーションを選択して、レスポンシブな製品ビジュアルの展示を作成することもできます。

Swift スタックを設計するためのアプローチ

Swift Stack のグリッド レイアウト、セル間の間隔、プレゼンテーションを柔軟にカスタマイズできます。デフォルトでは、Swift Stack には、各セルと Swift Stack の親要素の間に 20 ピクセルの余白が設けられています。

• Swift スタックに行や列を追加または削除する手順
• Swift Stack のセル間の間隔をカスタマイズする方法
• Swift Stackの表示を調整する方法
• 行と列の寸法を調整する方法
• 異なるブレークポイントにわたって Swift スタックをスタイルする手順

Swift Stack に行や列を追加または削除する方法

Swift Stack で行や列を導入または削除できる場所は 4 つあります。

• キャンバスメニュー内
• スタイルパネルで
• 編集モード内
• Swift スタックの内部

Swift Stack に行または列を追加すると、セルの数は既存の行や列の数に揃えられます。たとえば、Swift Stack が 2 行 1 列のセルで構成されていて、新しい列を追加すると、既存のセルの右側に 2 つのセルが追加され、別の列が形成されます。

注意: Swift Stackに行や列を追加すると、追加されるセルの数は行と列の合計数に対応します。 ない 現在存在するセルの数。たとえば、1 行に 2 つのセルを含む Swift Stack があり、1 つのセルが 2 列にまたがり、もう 1 つのセルが 1 列にまたがっている場合、もう 1 行追加すると、Swift Stack に 3 つのセルが追加されます。

行または列を削除すると、行/列セル内のコンテンツもクリアされます。

キャンバス上のメニューで Swift Stack に行または列を追加する

Swift Stackを右クリックして、いずれかの上にマウスを移動することで、行または列を導入できます。 列を追加 または 行を追加するをクリックし、列または行を含める位置 (左、右、上、下など) を選択します。

スタイルパネルでSwift Stackに行または列を追加または削除する

Swift Stackを選択して、次の場所に移動することで、行または列を組み込んだり除外したりできます。 スタイルパネル > レイアウト > グリッドその後、「ロック」アイコンと「ロック解除」アイコンをクリックして、Swift Stack に列と行を挿入したり削除したりできます。

Swift スタックから行を削除すると、最下行のセルが Swift スタックから削除されます。Swift スタックから列を削除すると、右端の列のセルが Swift スタックから削除されます。

編集モード内でSwiftスタックに行または列を追加またはクリアする

行や列を追加したり削除したりできます 編集モード キャンバス上でSwift Stack要素を選択し、タップします Swift スタックを編集する をタップして編集モードを開始します。新しい行と列を追加するには、右上または左下のセルの横にある「+」記号をクリックします。行と列を削除するには、セルのヘッダーをタップして 列を削除 または 行を削除 キャンバス上のメニューで。

出る 編集モード、 打つ ESC または 終わり キャンバスに。

Swift Stack内のSwift Stackに行または列を統合する

キャンバス上の Swift Stack 内に直接行または列を挿入できます。行または列を追加するには、Swift Stack セルを選択し、セルの上部、下部、左側、または右側にある「青い点」にマウスを移動して、「+」記号をタップします。

Swift Stack のセル間の間隔をカスタマイズする方法

Swift Stack 内のセル間の余白 (要素の外部スペース) を増減することができます。各セル間の最初の間隔は 20 ピクセルですが、この間隔を変更できます。

このギャップを調整するには、 スタイルパネル > レイアウト > ギャップ「ロック」アイコンがオンになっている場合、列セルと行セルのギャップ値は均一になります。列セルと行セルのギャップ サイズを個別に設定する場合は、「ロック」アイコンのロックを解除し、それぞれの値をカスタマイズします。

シンボルをクリックし、必要に応じて間隔の値を変更します。

セル間の距離を変更することもできます。 編集モード2つのセルの間のスペースにマウスを移動し、クリックしてドラッグすると、間隔を広げたり狭めたりできます。ロック”シンボルは スタイルパネル > レイアウト > ギャップ、ドラッグ中に行と列のギャップの値が同じ値に適応します。「ロック” シンボルがロック解除されている場合、現在クリックしてドラッグしているギャップ（つまり、行または列）のみを調整します。 または 列ギャップ値)。

クイックスタックの外観をカスタマイズするためのガイドライン

クイックスタックの外観をカスタマイズするには、クイックスタックを選択して、 スタイルパネル > レイアウト >  画面ここで、 現在 または 隠す クイックスタック:

• 現在 - クイックスタックを表示
• 隠す - クイックスタックを非表示にする

非表示のクイック スタックを選択する必要がある場合は、ナビゲーターで見つけることができます。

行と列のディメンションをスタイル設定するテクニック

デフォルトでは、各列の寸法は 1 分数単位 (FR) に設定されています。各行の寸法は自動に設定されており、含まれるコンテンツに基づいてサイズが調整されます。

FR寸法または最小/最大寸法を変更するには、 編集モード行のヘッダーまたは列のヘッダーを選択し、キャンバス上のメニューで寸法を調整します。また、各行または列のヘッダーの端をクリックしてドラッグすることで寸法を微調整することもできます。 編集モード編集モード以外では、セルを選択し、セル境界にあるサイズ変更ハンドルをドラッグすることで寸法を調整できます。

さまざまなブレークポイントでクイックスタックをスタイル設定する手順

クイックスタック要素を選択し、ブレークポイントを切り替えると（デフォルトのデスクトップブレークポイントから）、 行 パラメータの スタイルパネル > レイアウト > グリッド グレー表示され、新しい「自動」値が導入されます。Webflowは自動的に 行 価値 — に基づいて カラム クイック スタック内のセルの数に合わせて、既に設定されている値を設定します。

時々、クイックスタックの 画面 そして グリッド スタイルはピンク色の手がかりを示す スタイルパネル > レイアウト —これらのスタイルが 専ら 現在のブレークポイントで選択された要素に。

クイックスタックセルのスタイル設定テクニック

デスクトップのブレークポイントを超えて、キャンバス上のセルを選択して訪問することで、クイックスタックのセルをスタイル設定することができます。 スタイルパネル > セルサイズセルを1行または複数の行と列にまたがるように調整できます。 サイズさらに、 順序 細胞について 順序、セルを最初、最後、またはカスタム順序として配置することができます。3つの開示ドット”と入力し、 順序 フィールド。セルにカスタム順序値を設定するには、クイック スタック内の他のすべてのセルに 0 より大きい順序値を割り当てる必要があることに注意してください。

デスクトップ ブレークポイントを使用する場合、セルを結合および結合解除することでセル サイズを管理できます。

時には、細胞の サイズ そして 順序 スタイルはピンクの表示を表示します スタイルパネル > セルサイズ — これらのスタイルが適用されることを示す 排他的に 現在のブレークポイントで選択されたセルに。

注記： クイック スタック セルはデフォルトで flexbox を利用します。

クイックスタックのセル間隔を調整する方法

クイック スタック セルにはパディングを組み込むことができますが、マージンを組み込むことはできません。セルと親クイック スタック要素の間に間隔を導入したい場合は、セル間のクイック スタックのギャップを設定できます。

クイックスタックセルを結合する方法

クイックスタックセルは、その左、右、上、または下にあるセルと結合できます。セルを結合すると、結合するセル内のコンテンツが の中へ 排除されます。

クイック スタック セルを結合する方法は 2 つあります。

• キャンバス上のメニューから— 結合したいセルを右クリックし、 セルを結合 キャンバス上のメニューで、セルを結合する方向（上、下、右、左）を選択します。
• キャンバス上のコントロールを活用する  — 結合するセルを選択し、セルの右、左、上、または下（結合する方向によって異なります）に隣接する青い点にマウスを移動して、 セルを結合 アイコン

注記： セルの結合は、結合先のセルと比較して、そのセルのサイズが等しいかそれより大きい場合にのみ実行可能です。

クイックスタックセルの結合解除手順

クイック スタック セルの結合を解除するには、次の 2 つの方法があります。

• キャンバス上のメニューから— 結合を解除したいセルを右クリックして選択します セルの結合を解除 キャンバス上のメニュー
• スタイルパネルから — 結合を解除するセルを選択し、 スタイルパネル > セルサイズをクリックし、 セルの結合を解除

注記： セルの結合を解除しても、結合した元のセルの内容は復元されません。