【日本語版Webflow(ウェブフロー) University】 圧倒的時短に！クイックスタックを使ってみよう！

この投稿はWebflow社が提供する「Quick Stack」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/quick-stack

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

レイアウトが一発で決まる！クイックスタックの凄さ

クイックスタック要素は、シンプルなものから複雑なレスポンシブデザインまでの構造を提供します。

これはグリッド表示プロパティを使用し、デフォルトでdiv要素からなるセルを含んでいます。

この要素には8つのプリセットがあり、異なる配置でコンテンツを配置することができます。

また、各クイックスタックのプリセットやクイックスタックのセルのサイズを手動で調整することもでき、コンテンツの表示方法に対してより細かな制御が可能です。

クイックスタックは、ヒーローセクションから製品のショーケースまで、さまざまなコンテンツの構造化に対して柔軟で便利です。

この記事ではクイックスタックについて以下のことをご紹介します！

• クイックスタックの追加方法
• クイックスタックのスタイリング方法
• クイックスタックのセルのスタイリング方法
• クイックスタックの追加方法

‍

クイックスタックを追加する方法

クイックスタックを追加するには、AddパネルのStructureセクションからクイックスタックをドラッグアンドドロップします。

Webflowキャンバスにクイックスタックが配置されます。クイックスタックのプリセットを8つのうち1つ選択できるキャンバス上のメニューが表示されます。

クイックスタックのプリセットには以下の8つがあり、セルの構造が異なります：

1列 - 1つのセルで、1列と1行を占める2列 - 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列と1行を占め、右側のセルが1列と1行を占める。下の行には左側のセルが1列と1行を占め、右側のセルが2列と1行を占める

それぞれのクイックスタックには異なる使用例があります。たとえば、ヒーローセクションには2列のプリセットを使用して、文章を右側の列に配置し、左側に画像を配置することができます。また、2 x 2のプリセットを使用して、製品画像のレスポンシブな表示を作成することもできます。

クイックスタックのスタイル方法

クイックスタックのスタイリング方法クイックスタックのグリッドレイアウト、セル間の余白、表示方法をスタイル設定することができます。デフォルトでは、クイックスタックは各セルと親要素の間に20pxのパディングが設定されています。

クイックスタックに行や列を追加または削除する方法は４つ

1. キャンバス上のメニュー
2. スタイルパネル
3. 編集モード
4. クイックスタック内部

行や列を追加すると、追加されるセルの数は既存の行や列の数に合わせられます。たとえば、クイックスタックに2行1列のセルがある場合、新しい列を追加すると、既存のセルの右側に2つのセルが新しい列に追加されます。

具体的な手順は以下の通りです：

キャンバス上のメニューから行や列を追加する方法：

1. クイックスタックを右クリックし、表示されるメニューで「Add column」または「Add row」を選択します。
2. 追加する列や行の位置（左側、右側、上側、下側）を選択します。

スタイルパネルから行や列を追加する方法：

1. クイックスタックを選択し、スタイルパネルに移動します。
2. レイアウト > グリッドのセクションに移動します。
3. 「+」アイコンと「-」アイコンを使用して列や行を追加または削除します。

編集モードで行や列を追加する方法：

1. キャンバス上で編集モードに切り替えます。
2. クイックスタック要素を選択し、右上の「Edit Quick Stack」をクリックして編集モードを開きます。
3. 追加する行や列の上部右側または下部左側の「+」アイコンをクリックします。
4. 削除する行や列は、セルヘッダーをクリックし、キャンバス上のメニューで「Delete column」または「Delete row」をクリックします。

クイックスタック内部で行や列を追加する方法：

1. クイックスタックのセルを選択します。
2. セルの上部、下部、左側、または右側にある「青い点」の上にカーソルを移動し、「+」アイコンをクリックします。

これらの手順に従うことで、クイックスタックに行や列を追加または削除することができます。

‍

クイックスタックのセル間の余白の設定方法

クイックスタックのセル間の余白（要素の外側のスペース）を増減することができます。デフォルトでは、各クイックスタックのセル間には20pxの余白があります。

この余白を調整するには、スタイルパネル > レイアウト > ギャップに移動します。"ロック"アイコンがロックされている場合、ギャップの値は列セルと行セルの両方に適用されます。列セルと行セルで独立した余白サイズを作成するには、"ロック"アイコンを解除し、必要に応じてギャップの値を調整します。

また、編集モードに移動し、2つのセル間の余白にカーソルを合わせてクリックドラッグすることで、セル間の余白を増減することもできます。スタイルパネル > レイアウト > ギャップで"ロック"アイコンがロックされている場合、クリックドラッグすると行セルと列セルの余白の値が同じに調整されます。"ロック"アイコンが解除されている場合、クリックドラッグした余白の値のみが調整されます（行セルの余白または列セルの余白）。

これらの手順に従って、クイックスタックのセル間の余白を調整することができます。

クイックスタックの表示方法の設定

クイックスタックの表示方法をスタイルするには、クイックスタックを選択し、スタイルパネル > レイアウト > 表示に移動します。

ここでは、クイックスタックを表示または非表示にすることができます。

表示する：クイックスタックを表示します。非表示にする：クイックスタックを非表示にします。

非表示になっているクイックスタックを選択する必要がある場合は、ナビゲーターで選択することができます。

‍

クイックスタックの行、列のサイズ設定

デフォルトでは、各列のサイズは1の分数単位（FR）です。各行のサイズは自動で設定されており、セルのサイズは内部のコンテンツに基づいて決まります。

サイズの調整には、編集モードに移動し、行のヘッダーまたは列のヘッダーをクリックし、オンキャンバスメニューでサイズを変更します。

編集モードでは、各行または列ヘッダーの端をクリックしてドラッグすることでもサイズを調整できます。

編集モード以外では、セルを選択し、セルの境界にあるサイズ変更ハンドルをクリックしてドラッグすることでサイズを調整できます。

異なるブレークポイントのクイックスタックのスタイリング

クイックスタック要素を選択し、デフォルトのデスクトップのブレークポイントからブレークポイントを切り替えると、スタイルパネル > レイアウト > グリッドの行オプションがグレーアウトされ、新しい「Auto」という値が表示されます。

Webflowは、既に設定されている列の値に基づいて、クイックスタック内のセルの数に合わせて行の値を自動的に設定します。

クイックスタックの表示とグリッドスタイルには、スタイルパネル > レイアウトでピンクの表示が表示されることがあります。

これは、これらのスタイルが現在のブレークポイントで選択された要素にのみ適用されることを意味します。

詳細はこちらの動画をご覧ください！

クイックスタックのセルのスタイリング

デスクトップのブレークポイント以外のブレークポイントでは、キャンバス上のセルを選択し、スタイルパネル > セルのサイズに移動することで、クイックスタックのセルのスタイルを設定することができます。

セルのサイズを調整して、1つまたは複数の行や列に広げることができます。また、セルの順序を変更することもできます。

順序には、セルを最初にしたり、最後にしたり、カスタムの順序を設定するために「三点リーダー」をクリックし、順序フィールドに値を入力します。

ただし、セルのカスタム順序値を設定する場合は、クイックスタックの他のすべてのセルに0より大きい順序値を設定する必要があります。

デスクトップのブレークポイントでは、セルのサイズをマージおよびアンマージすることで調整できます。

セルのサイズと順序のスタイルには、スタイルパネル > セルのサイズでピンクの表示が表示されることがあります。これは、これらのスタイルが現在のブレークポイントで選択されたセルにのみ適用されることを意味します。

クイックスタックのセルのスペースの設定方法

クイックスタックのセルにはパディングを追加することができますが、マージンは追加することができません。

セル間や親のクイックスタック要素との間にスペーシングを追加したい場合は、クイックスタックのセル間のギャップを調整することができます。

クイックスタックのセルのマージ（合体）の設定方法

クイックスタックのセルを左側、右側、上側、または下側のセルとマージすることができます。ただし、セルをマージすると、マージ先のセルの内容が削除されます。

クイックスタックのセルをマージする方法は2つあります。

1. キャンバス上のメニューから行うーマージしたいセルを右クリックし、キャンバス上のメニューで「セルをマージ」にカーソルを合わせ、マージする方向（上、下、右、左）を選択します。
2. キャンバス上のコントロールを使用するーマージしたいセルを選択し、セルの右側、左側、上側、または下側にある青いドットにカーソルを合わせます（マージする方向に応じて）。その後、マージセルアイコンをクリックします。

クイックスタックのセルのアンマージ（合体解除）の設定方法

クイックスタックのセルをアンマージ（マージ解除）する方法は2つあります。

・キャンバス上のメニューから — アンマージしたいセルを右クリックし、キャンバス上のメニューで「セルのアンマージ」をクリックします。

・スタイルパネルから — アンマージしたいセルを選択し、スタイルパネル > セルサイズに移動し、「セルのアンマージ」をクリックします。

‍

使いこなせばかなりの時短になるQuick Stack!

レスポンシブにも強く、今後はかなり使える要素になること間違いなしです。

ぜひ使いこなしてみてください！