--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/sections' title: 'セクションを追加する | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:48:27+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- セクションはページの1つの帯です。上部のヒーローや下の灰色の機能帯など です。各セクションに独自の背景、文字色、余白、高さを与え、中にローや コンテンツを入れます。セクションの追加と設定はこのページを、分割は ローとカラムを ご覧ください。 tags: - Lay-out image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: セクションを追加する description: |- セクションはページの1つの帯です。上部のヒーローや下の灰色の機能帯など です。各セクションに独自の背景、文字色、余白、高さを与え、中にローや コンテンツを入れます。セクションの追加と設定はこのページを、分割は ローとカラムを ご覧ください。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:48:27+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/sections' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/sections' description: |- セクションはページの1つの帯です。上部のヒーローや下の灰色の機能帯など です。各セクションに独自の背景、文字色、余白、高さを与え、中にローや コンテンツを入れます。セクションの追加と設定はこのページを、分割は ローとカラムを ご覧ください。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: ホーム item: 'https://dxpr.com/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # セクションを追加する. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [ローを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [セクションに色・写真・グラデーションを敷く](/ja/hc/documentation/learn-dxpr-builder/design/backgrounds) - [セクションを端から端まで広げる](/ja/hc/documentation/learn-dxpr-builder/design/full-width-layouts) セクションはページの1つの帯です。上部のヒーローや下の灰色の機能帯など です。各セクションに独自の背景、文字色、余白、高さを与え、中にローや コンテンツを入れます。セクションの追加と設定はこのページを、分割は [ローとカラム](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)を ご覧ください。 ## セクションを追加する 例ではクリニックの紺色ヒーローセクションを作ります。下には3カラムの薄灰色 セクションが続きます。 1. 空ページの**Add Elements**をクリックし、**Layout**タブから **Section**を選びます。既存セクションの下では、その下の丸いプラスの **Add Section Below**をクリックします。 2. セクションにホバーして**More**を開き、**Settings**を 選びます。 3. セクション全体を設定します。ここでは**HTML classes**の **Align text center**、紺色の**Background**、白の **Font color**です。**Save**をクリックします。 4. セクションの**+**をクリックして直接コンテンツを追加するか、 **Row**を追加してカラムに分割します。 5. ツールバーの**Save**をクリックしてページを保存します。 **Background**と**Font color**はダイアログの **Style**パネルにあります。新しいエレメントはセクションの上に付くので、 一番下のものから先に追加します。動画ではボタンを先に見出しの前に入れます。 ## 表示結果 紺色の帯が画面いっぱいに端から端まで広がります。見出しとボタンは中央寄せの 箱 (セクションの内側コンテナー) に収まります。灰色セクションはすぐ下にはじまり、 3つの機能カラムが同じ中央寄せの箱に収まります。 新しいセクションには最初から**HTML classes**にクラス **Vertical padding size 5 (py-5)**が付きます。このクラスがコンテンツの 上下に余白を与えます。 ## セクションの設定 設定ダイアログには5つのパネルがあります。**General**、 **Background effects**、**Animation**、 **Style**、**Hover style**です。**Background effects**があるのはセクションだけです。 | 設定 | パネル | 内容 | 既定値 | |---|---|---|---| | **Full width** | General | ローが中央寄せコンテナー内ではなく端から端まで広がります | Off | | **100% height** | General | セクションの高さがブラウザー画面以上になります | Off | | **Vertical centering** | General | 中身より高いセクションの垂直中央にコンテンツが座ります | Off | | **HTML ID** | General | アンカー名です。`#name`へのリンクがこのセクションに飛びます | Empty | | **HTML classes** | General | ユーティリティークラスです。**Align text center**やパディングサイズなど | **Vertical padding size 5 (py-5)** | | **Background effect** | Background effects | **Simple image**、**Fixed image**、**Parallax image**、**Gradient**、**YouTube video** | **Simple image** | | **Background**、**Font color** | Style | セクションの後ろの色とテキストの色です | None。テーマが決めます | 背景は**Full width**の設定にかかわらず常にセクション全体に 広がります。画像効果は**Style**パネルで選ぶ**Background image**を 動かします。各効果は[背景](/hc/documentation/learn-dxpr-builder/design/backgrounds)を ご覧ください。 余白を増減するには、**Vertical padding size 5 (py-5)**を小さいサイズや **No vertical padding (py-0)**に替えます。正確なピクセルには **Style**パネルのボックスモデルを使います。 [間隔](/hc/documentation/learn-dxpr-builder/element-settings/spacing)の説明通りです。 ## セクションレシピ | セクション | 作る設定 | |---|---| | Hero | **100% height**と**Vertical centering**をオン、**Parallax image**効果、見出しとボタン | | Features | 明るい**Background**、見出し、3カラムのロー | | Call to action | 強い**Background**、**Align text center**、短い1行とボタン | | Testimonials | 明るい**Background**と3カラムのロー。各カラムに**Block quote** | [ヒーローセクションのデザイン](/ja/hc/documentation/learn-dxpr-builder/tutorials/hero-section)が 最初の1つを手順通りに作ります。 ## 表示されない場合 - **空ページにAdd Elementsボタンがありません。** ページ作成アシスタントが オフなので、空ページは**Choose a template**だけを出します。空き領域を クリックしてエレメントピッカーを開くか、**Enable page creation assistant**を`/admin/dxpr_studio/dxpr_builder/ai_settings`で オンにします。 - **Add Section Belowボタンがありません。** ページ直下のセクションだけが 持ちます。カラムやタブの中のセクションにはありません。代わりにカラムの **+**をクリックします。 - **Vertical centeringが効きません。** セクションの高さは中身の分だけ なので、中央寄せする余地がありません。**100% height**も一緒にオンに します。 - **Full widthが効かないようです。** 背景はすでにセクション全体に広がって います。**Full width**はローをその端まで動かすだけです。1カラムの短い テキストでは変化が見えにくいです。 - **追加していないセクションが現れます。** 空ページで**Row**や コンテンツエレメントを選んだためです。全エレメントは周りにセクションが必要です。 DXPR Builderが代わりに追加しました。他と同じく設定を開きます。 ## 次はこちら - [ローとカラム](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): セクションをカラムに分割します。 - [背景](/hc/documentation/learn-dxpr-builder/design/backgrounds): セクション用のパララックス、グラデーション、動画効果。 - [全幅レイアウト](/hc/documentation/learn-dxpr-builder/design/full-width-layouts): ローを端から端まで広げる場合。