クイックスタック要素を使用して、サイトのコンテンツを構成します。
Quick Stack要素は、シンプルなものから複雑なものまで、レスポンシブデザインのための構造を提供しています。グリッド表示プロパティを使用し、デフォルトでflexに設定されている div で構成されたセルを含みます。この要素には8つのプリセットがあり、コンテンツをさまざまな配置で配置できます。また、各Quick StackプリセットとQuick Stackセルのサイズを手動で調整することで、コンテンツの表示方法をよりコントロールできます。Quick Stackは汎用性が高く、ヒーローセクションから製品一覧まで、あらゆる種類のコンテンツを構成するのに便利です。
このレッスンでは、以下について学習します：
クイックスタックは、[add] パネル > [structure] から追加できます。クイックスタックをWebflow キャンバスにドラッグ＆ドロップします。キャンバス上にプリセットのメニューが表示され、8つのクイックスタックプリセットから1つを選択できます。
クイックスタックには8つのプリセットがあり、cell構造が異なります
それぞれのQuick Stackには異なる使用例があります。例えば、2カラムのプリセットをヒーローセクションに使用し、右カラムに文章コンテンツ、左カラムに画像を配置することができます。あるいは、2 x 2プリセットを使用して、商品画像のレスポンシブ表示を作成することもできます。
クイックスタックのグリッドレイアウト、セル間のギャップ、表示のスタイルを設定できます。デフォルトでは、クイックスタックは各セルとクイックスタックの親要素の間に20pxのパディングがあります。
クイックスタックで行や列を追加したり削除したりできる場所は4つあります：
クイックスタックに行や列を追加すると、追加されるセルの数はすでに存在する行や列の数と同じになります。例えば、クイックスタックに2行1列のセルがあり、新しい列を追加すると、既存のセルの右側に2つのセルが追加されます。
行や列を削除すると、行や列のセル内のコンテンツも削除されます。
行または列を追加するには、クイックスタック上で右クリックし、「Add row」または「Add column」のいずれかにカーソルを合わせ、列または行を追加する場所（left、right、above、belowなど）を選択します。
クイックスタックを選択し、Style panel > Layout > Gridを選択すると、行や列を追加または削除できます。次に、"プラス "と "マイナス "のアイコンをクリックして、クイックスタックから列と行を追加または削除することができます。
クイックスタックから行を削除すると、一番下の行のセルがクイックスタックから削除されます。クイックスタックから列を削除すると、一番右の列のセルがクイックスタックから削除されます。
キャンバスの編集モードで行や列を追加したり削除したりすることができます。クイックスタック要素を選択し、クイックスタックの右上にある「Edit Quick Stack」をクリックして編集モードを開きます。右上または左下のセルの横にある「プラス」アイコンをクリックすると、新しい行や列を追加できます。行や列を削除するには、セルヘッダをクリックし、オンキャンバスメニューの「Delete Row」または「Delete column」をクリックします。
編集モードを終了するには、Escを押すか、キャンバス上でDoneをクリックします。
キャンバス上のクイックスタックに直接行や列を追加することができます。行または列を追加するには、クイックスタックのセルを選択し、セルの上下左右にある「青い点」にカーソルを合わせ、「プラス」アイコンをクリックします。
クイックスタックのセル間のマージン（要素の外側のスペース）を調整できます。デフォルトでは、各クイックスタックには各セル間に20pxの隙間があります。
このギャップを調整するには、Style panel > Layout > Gapを開きます。[ロック]アイコンがロックされている場合、ギャップ値は列セルと行セルの両方で同じになります。列セルと行セルで独立したギャップ・サイズを作成するには、「ロック」アイコンのロックを解除し、必要に応じてギャップ値を調整します。
また、編集モードでセル間のギャップを調整するには、2つのセル間のギャップの上にカーソルを置き、クリックしてドラッグしてギャップを調整します。Style pane > Layout > Gapで「ロック」アイコンがロックされている場合、クリックしてドラッグすると、行と列の両方のギャップ値が同じ値に調整されます。[ロック]アイコンのロックが解除されている場合は、現在クリック＆ドラッグしているギャップ（行または列のギャップ値）のみが調整されます。
クイックスタックを選択し、Style panel > Layout > Displayを選択すると、クイックスタックの表示にスタイルを設定できます。ここでは、クイックスタックを表示または非表示にできます：
非表示のクイックスタックを選択する必要がある場合は、ナビゲータで選択できます。
デフォルトでは、各列のサイズは1小数単位（FR）です。各行のサイズはautoに設定されています。つまり、セルは内部のコンテンツに基づいてサイズ調整されます。
編集モードで行のヘッダーまたは列のヘッダーをクリックし、キャンバス上のメニューでサイズを変更することで、FRのサイズやmin/max sizingを調整することができます。また、編集モードで各行または各列のヘッダーの端をクリックしてドラッグすることでもサイズを調整できます。編集モード以外では、セルを選択し、セル境界のサイズ変更ハンドルをクリックしてドラッグすることで、サイズを調整することができます。
クイックスタック要素を選択し、デフォルトのデスクトップブレークポイントからブレークポイントを切り替えると、Style panel > layout > Grid の行オプションがグレーアウトし、新しい「Auto」値が設定されていることに気付きます。Webflow は、クイックスタックのセル数に合わせて、既に設定されている列の値に基づいて行の値を自動入力します。
クイックスタックの表示スタイルとグリッドスタイルが、[style]パネル>[layout]でピンク色のインジケータになっていることがあります。これは、これらのスタイルが現在のブレークポイントで選択されている要素にのみ適用されることを意味します。
デスクトップ・ブレークポイント以外のブレークポイントでは、キャンバス上でセルを選択し、[style]パネル > [Cell size]でクイックスタックのセルにスタイルを設定できます。セルのサイズを1行または複数列にまたがるように調整できます。また、セルの順番を変更することもできます。順番では、「3つのドット」をクリックして順番フィールドに値を入力することで、セルを最初、最後にしたり、カスタム順番を設定したりすることができます。セルにカスタムオーダー値を設定したい場合は、クイックスタックの他のすべてのセルに0より大きいオーダー値を設定する必要があることに注意してください。
デスクトップ・ブレークポイントでは、セルをマージしたりアンマージしたりすることで、セルのサイズを調整できる。
セルのサイズと順序のスタイルに、「style」パネル > 「cell size」でピンクのインジケータが表示されることがありますが、これはこれらのスタイルが現在のブレークポイントで選択されているセルにのみ適用されることを意味します。
クイックスタックのセルにはパディングを追加できますが、マージンは追加できません。セルと親クイックスタック要素の間に間隔を追加したい場合は、クイックスタックのセル間のギャップをスタイル設定します。
クイックスタックのセルは、その左、右、上、または下のセルとマージ(結合)することができます。セルをマージすると、マージ先のセルの内容は削除されます。
クイックスタックのセルを結合するには2つの方法があります：
クイックスタックのセルをアンマージ(結合を解除)するには2つの方法があります
