この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。
引用元セクションは、幅が100％（つまり、ブラウザ・ウィンドウの幅いっぱいに広がる）の構造要素です。セクションはページのレイアウトにおいて重要な役割を果たし、多くの場合、コンテンツのページ分割として機能します。 ウェブレイアウトの構築について、詳しくはこちらをご覧ください。
このレッスンで学習すること；
セクションの追加方法
セクション要素は、Add panel > Structureセクションから追加できます。デフォルトでは、セクションは本文の幅いっぱいに広がり、内部にパディングを持たず、「Section」HTML5タグを持ちます。本文の幅いっぱいにコンテンツを配置したくない場合は、container要素を使用してコンテンツをページの中央に配置することをお勧めします。
セクションのスタイリング方法
セクションの高さは、その内容に応じて自動的に調整されます。要素を追加すると、セクションの高さは高くなります。スタイルパネルで高さを設定することもできます。
セクションに高さを設定する場合、セクションがコンテンツとともに拡張できるように、min-height（例えば500px）を設定することをお勧めします。高さだけを設定すると、セクション内のコンテンツがはみ出したり、切れてしまったりする可能性があります。
セクションにビューポートの高さを設定する
ヒーローセクションを作成するときなど、セクションに特定の高さを与えたい場合は、ビューポートの高さ (vh) ユニットを使用することをお勧めします。例えば、100vhはビューポートの高さを100%埋めます。
目次
トップへ