セクション

概要 #

セクションは、ページ全体のレイアウト構成を区切るための最上位のコンテナ要素です。
ヘッダー・メインコンテンツ・フッターなど、ページの大枠を分割して整理するために使用されます。
セクションごとに背景色や背景画像、余白、高さなどを個別に設定できるため、視覚的にも構造的にもわかりやすいページデザインが可能です。
また、各セクション内には「カラム」や「オブジェクト（テキスト・画像など）」を自由に配置することができます。
ページの目的に応じたセクションを組み合わせることで、柔軟かつ一貫性のあるコンテンツ作成が行えます。

セクションの説明 #

セクションの追加方法 #

セクションは、ページの構成単位として使われる大枠のコンテナです。以下の手順でセクションを追加できます。

1. 左側のメニューから 「セクション」 をクリックします。
2. 追加したい場所へドラッグ＆ドロップします。
3. 挿入されたセクション内に、テキスト・画像・ボタンなどのオブジェクトを自由に配置していきます。

セクションは背景色や余白の設定などが可能で、ページ全体のレイアウトを整理・調整する際に役立ちます。
複数のブロックやカラムをグループ化したい場合にも活用できます。

  #

セクションの設定の説明 #

セクションの設定項目について #

セクションを選択すると、右側の「セクション設定」パネルで以下の設定を行うことができます。

1. ① ページ設定の幅を使用する
   チェックを入れると、ページ全体の幅設定にセクションが従います。
   チェックを外すと、セクションごとに独自の横幅設定が可能になります。
2. ② ページ最小高
   セクションの最小の高さ（min-height）を指定できます。
   スライダーや数値入力で調整可能で、単位は px（ピクセル）または %（パーセント）を選べます。
3. ③ 高さを画面高に合わせる
   このオプションをオンにすると、セクションの高さがブラウザの画面全体の高さにフィットするようになります。
   ファーストビューなどで全画面表示したい場合に便利です。

これらの設定を使うことで、セクションごとにデザインやレイアウトの細かな調整が可能となります。

操作説明 #

セクションを挿入したい位置へドラッグ&ドロップで貼り付けることができます。

セクションを選択すると右上にサブメニューが表示されます。

1. クリックしながらドラッグ&ドロップで任意の場所へ移動できます。
2. セクションを複製します。
3. セクションを削除します。
4. ブロックに保存します。

セクション設定 #

1. セクションの幅を設定します。
2. ページ最小高を設定します。

デザイン #

デザインの項目を変更することでセクションのデザインを変更できます。

1. 背景を画像、単色、グラデーションの3つから選択できます。
2. 背景設定で選択した背景情報がレイヤーとして表示されます。
3. ボーダー設定はなし、実線、点線の3つから選択でき、線の太さを設定することができます。
4. ボーダーコーナーはボーダーの丸みを設定できます。
5. シャドウ設定ではインナー、ドロップ、テキストの3つから選択でき、それぞれシャドウの詳細な設定ができます。

レイアウト #

レイアウトの項目を変更することでセクションのレイアウトを変更できます。

1. Margin & Paddingの設定をすることで余白の設定ができます。
2. 横幅を固定から、最小、最大とそれぞれ設定できます。
3. 高さを固定から、最小、最大とそれぞれ設定できます。
4. 水平方向の項目を変更することでセクションの水平方向の配置を変更できます。
5. 垂直方向の項目を変更することでセクションの垂直方向の配置を変更できます。
6. Z-indexを設定することでセクションの重なり順を設定することができます。

表示設定 #

表示設定を変更することでセクションを表示したり非表示にする条件を設定できます。

1. レスポンシブの項目を変更することでデスクトップのみやモバイルのみに表示することができます。
2. アンカーリンクを設定することができます。
3. ログインユーザーのみ表示したり、さらにタグで絞りこんで条件表示することができます。

その他 #

1. CSS IDを設定できます。
2. CSS Classを設定できます。
3. メモを書いておくことができます。