セクションエリア

サイト構築における最も基本的かつ多用途な要素である div ブロックの概要。

セクション エリアは、Web サイトの構築に使用される基本的かつ適応性の高い単位です。ボタン、ラッパー、セグメントはすべて、特定の追加機能を備えたセクション エリアです。セクション エリアは、ある程度、任意の形状にすることができます。たとえば、セクション エリアはスペーサーやセパレーターとして機能しますが、最も一般的な目的は、他のコンポーネントをグループ化することです。セクション エリアは、HTML document 内のパーティションを描画します。

このチュートリアルでは、次の方法について説明します。

  1. セクションエリアを統合する
  2. セクション領域をリンク領域に変換する
  3. セクション領域を使用してコンポーネント間のギャップを確立する

セクションエリアを統合する

挿入パネルから Webflow の Web サイトにセクション領域を追加できます。その後、タイトル、説明、CTA ボタンなどの他の要素をセクション領域内に統合できます。セクション領域を追加し、これらの 3 つの要素を内部にドラッグすると、それらをまとめて変更および管理できます。セクション領域の幅を 50% に調整すると、内部のコンテンツも 50% に調整されます。

セクション領域内に要素を配置すると、そのサイズは埋め込まれたコンテンツに基づいて自動的に調整されます。セクション領域を中央に揃えると、そのコンテンツも同様に揃えられます。

セクション領域をリンク領域に変換する

セクション領域をリンク領域に変換して、その領域 (およびその中に含まれるコンテンツ) を他の宛先にハイパーリンクすることができます。これは、コンテンツをグループ化する際に誤ってリンク領域ではなくセクション領域を使用した場合に便利です。

セクションエリアをリンクエリアに変換するには、セクションエリア内にリンクされた要素がないことを確認し、セクションエリアを右クリックして リンクエリアに変換.

セクション領域を使用してコンポーネント間のギャップを確立する

セクション領域を利用して、他のコンポーネント間に空きスペースを生成することができます (また、他のコンテンツの位置を変更するために固定の高さまたは幅を指定します)。ただし、この手法はスペースを作成するのに最適ではなく、時間の経過に伴う監視が困難になる場合があります。基本的なガイドラインとして、マージンまたはパディングを使用してコンポーネント間にスペースを作成し、セクション領域は絶対に必要な場合にのみ使用することをお勧めします。

ユアン・マック