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