レッスン内容
クイックスタックの追加方法
クイックスタックは、[add] パネル > [structure] から追加できます。クイックスタックをWebflow キャンバスにドラッグ＆ドロップします。キャンバス上にプリセットのメニューが表示され、8つのクイックスタックプリセットから1つを選択できます。
クイック・スタック・プリセット
クイックスタックには8つのプリセットがあり、cell構造が異なります
- 1 column — 1列1行の1セル
- 2 columns — 2つのセル、それぞれ1列と1行、余白(gap)
- 3 columns — 3つのセル、それぞれ1列と1行、余白(gap)
- 4 columns — 4つのセル、それぞれ1列と1行に、余白(gap)
- 2 + 1 — 3つのセル。左列に2つのセルがあり、それぞれ1列と1行と余白(gap)
- 1 + 2 — 3セル。左列に1列2行のセル、右列に2つのセルと余白(gap)
- 2 x 2 — 4つのセル。左列に2つのセルと余白(gap)、右列に2つのセルと余白(gap)
- Formatted 2 x 2 - 4セル。上段に2セル、左のセルは2列1行、右のセルは1列1行。下段に2セル。
それぞれのQuick Stackには異なる使用例があります。例えば、2カラムのプリセットをヒーローセクションに使用し、右カラムに文章コンテンツ、左カラムに画像を配置することができます。あるいは、2 x 2プリセットを使用して、商品画像のレスポンシブ表示を作成することもできます。
クイックスタックのスタイル
クイックスタックのグリッドレイアウト、セル間のギャップ、表示のスタイルを設定できます。デフォルトでは、クイックスタックは各セルとクイックスタックの親要素の間に20pxのパディングがあります。
- クイックスタックで行を追加したり、行や列を削除する方法
- クイックスタックのセル間のギャップをスタイルする方法
- クイックスタックの表示スタイル
- 行と列のサイズ調整
- 異なるブレイクポイントでクイックスタックをスタイルする方法
クイックスタックで行や列を追加または削除する方法
クイックスタックで行や列を追加したり削除したりできる場所は4つあります：
- キャンバス上のメニュー
- スタイルパネル
- 編集モード
- クイックスタック内
クイックスタックに行や列を追加すると、追加されるセルの数はすでに存在する行や列の数と同じになります。例えば、クイックスタックに2行1列のセルがあり、新しい列を追加すると、既存のセルの右側に2つのセルが追加されます。
注意：クイックスタックに行や列を追加するとき、追加されるセルの量は現在存在するセルの数ではなく、行や列の数に依存します。例えば、クイックスタックに1行に2つのセルがあり、1つのセルは2列にまたがり、もう1つのセルは1列にまたがっている場合、もう1行を追加するとクイックスタックに3つのセルが追加されます。
行や列を削除すると、行や列のセル内のコンテンツも削除されます。
オンキャンバスメニューのクイックスタックに行、列を追加する
行または列を追加するには、クイックスタック上で右クリックし、「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を選択すると、クイックスタックの表示にスタイルを設定できます。ここでは、クイックスタックを表示または非表示にできます：
- Display - クイックスタックを表示します。
- Hide - クイックスタックを隠す
非表示のクイックスタックを選択する必要がある場合は、ナビゲータで選択できます。
行と列のサイズ調整
デフォルトでは、各列のサイズは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つの方法があります
- キャンバス上のメニューから - マージを解除したいセルを右クリックし、キャンバス上のメニューから [Ummerging cell] をクリックします。
- Styleパネルから、マージを解除したいセルを選択し、「style panel＞「Cell size」と進み、「Unmerge cells」をクリックします。