この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。
引用元レイアウトはウェブサイトのページの全体的な構造を決定します。ウェブサイトのレイアウトを構築する方法はいくつかあります — ゼロから始める、プリビルトな要素を使用する、またはライブラリから再利用可能なレイアウトを使用するなど。そして、スタイル設定を使用してサイトのレイアウトをさらにカスタマイズできます。
このレッスンでは、次のことについて学びます：
レイアウト要素（Layout elements）
サイトのデザインを始めるとき、レイアウト要素を使用してデザインを構成したいと思うでしょう。Addパネルには5つの構造要素があります：
ゼロからレイアウトを構築したい場合は、セクションとコンテナを使用して他の要素を追加できるシンプルな構造を作成できます。
VフレックスとHフレックスは、セクションやコンテナ内に含めるのに便利な要素です。Vフレックスは、事前に設定された垂直方向のフレックスボックス表示設定を使用するdivブロックであり、Hフレックスは、事前に設定された水平方向のフレックスボックス表示設定を使用するdivブロックです。これにより、フレックスボックスをベースにしたレイアウトを効率的にデザインできます。
より既製のレイアウトを使用したい場合は、クイックスタック要素を使用できます。クイックスタック要素はCSSグリッドを使用し、セルは事前に設定された垂直方向のフレックスボックス表示設定を使用するdivブロックで構成されています。クイックスタックをサイトに追加する際には、8つのプリセットから選択し、その後、必要に応じて要素とそのセルをカスタマイズできます。これにより、個々の要素からレイアウトを構築するよりも、ビルドのワークフローが簡素化され、レイアウトを構築できます。
さらに、要素やCSSスタイリングを含む事前に構築されたレイアウトが必要な場合は、ライブラリ内のレイアウトを使用できます。これらはWebflow マーケットプレイスまたはスターターライブラリからアクセスできます。
デザインワークフローを合理化するために、ほとんどのレイアウトにはクイックスタックを使用することをお勧めします。ただし、基本的な要素からレイアウトを構築する必要がある場合（たとえば、デザインが自動的にフレックスボックスを使用しないか、CSSグリッドで構造化されない場合など）、セクション、コンテナ、およびdivブロックだけを使用してデザインすることができます。
スタイルパネルでのレイアウト調整方法
また、スStyle panel > Layoutセクションを使用して、要素のレイアウトを調整することもできます。そこでは、ディスプレイ設定（たとえば、フレックスボックス、グリッドなど）を要素に適用して、デザインをさらにカスタマイズできます。
選択した表示設定（たとえば、ブロック、フレックスボックス、グリッド、インラインブロック、インライン、またはなし）によって、レイアウトセクションに追加のフォーマットオプションが表示される場合があります。たとえば、フレックスボックスを選択すると、要素を水平または垂直のフレックスボックスに設定するかどうかを調整できるようになります。
ベストプラクティス
最終的に、レイアウトデザインの決定はあなた次第であり、異なる方法を試して最も好きな方法を見つけることをお勧めします！ただし、少しのガイダンスが必要な場合は、効率的なレイアウトデザインのためのいくつかのヒントとトリックをいくつかまとめてみました：
- ほとんどのレイアウトの出発点としてクイックスタック要素を使用します。この要素は多用途で使用可能で、最も一般的な表示設定（フレックスボックスとCSSグリッド）が既に適用されています。
- 2つの寸法にわたる構造化されたデザインがあり、セルに位置設定を設定したり、コンテンツが他のコンテンツと重なることを望む場合は、グリッドを使用します。
- 1つの寸法にわたる流動的なデザインが必要な場合は、親要素に対してフレックスボックスを使用します。
- 事前に構築されたスタイル付きのレイアウトが必要な場合は、ライブラリのレイアウトを使用します。