--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content' title: '複数カラムのコンテンツを作る | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:53:29+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- ここでは最も使う4つのカラム配置を1ページに作ります。サイドバー付きコンテンツ、 均等2分割、3等分、4等分です。各配置の上に見出しを付けます。どのプリセットがどの コンテンツに向くか学ぶ場合に使います。全ロー設定はローとカラムを ご覧ください。 動画では自治体のごみ収集ページを作ります。 tags: - 'Volg een tutorial' 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: |- ここでは最も使う4つのカラム配置を1ページに作ります。サイドバー付きコンテンツ、 均等2分割、3等分、4等分です。各配置の上に見出しを付けます。どのプリセットがどの コンテンツに向くか学ぶ場合に使います。全ロー設定はローとカラムを ご覧ください。 動画では自治体のごみ収集ページを作ります。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:53:29+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/tutorials/multi-column-content' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content' description: |- ここでは最も使う4つのカラム配置を1ページに作ります。サイドバー付きコンテンツ、 均等2分割、3等分、4等分です。各配置の上に見出しを付けます。どのプリセットがどの コンテンツに向くか学ぶ場合に使います。全ロー設定はローとカラムを ご覧ください。 動画では自治体のごみ収集ページを作ります。 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) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # 複数カラムのコンテンツを作る. Learn DXPR BuilderBuild pagesVolg een tutorial ## In this guide Related guides - [ローを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [セクションを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/sections) ここでは最も使う4つのカラム配置を1ページに作ります。サイドバー付きコンテンツ、 均等2分割、3等分、4等分です。各配置の上に見出しを付けます。どのプリセットがどの コンテンツに向くか学ぶ場合に使います。全ロー設定は[ローとカラム](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)を ご覧ください。 動画では自治体のごみ収集ページを作ります。 ## はじめる前に - ロールが**Edit with DXPR Builder**権限を持ちます。 - ページをビルダーで開きます。新規は**Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) を開き、**Save**をクリックします。 - 新規エレメントはセクションの上に載ります。そのため各見出しはローより後に入れます。上に載るからです。 ## 配置を選ぶ | Layout | Best for | Preset | |---|---|---| | サイドバー付きコンテンツ | 関連リンク付き記事 | **2/3 + 1/3** | | 均等2分割 | 比較、ビフォーアフター | ローの既定値 | | 3等分 | 特長紹介、サービス | **1/3 + 1/3 + 1/3** | | 4等分 | 統計、小さなカード | **1/4 + 1/4 + 1/4 + 1/4** | 新しい**Row**は2つの均等カラム付きで入ります。他の全配置はローのグリッド アイコン (**Column layout**) から来ます。 ## 手順1: サイドバー付きコンテンツ 1. 空ページの**Add Elements**をクリックし、**Layout**タブから**Section**を選びます。 2. セクションの**+**をクリックして**Row**を選びます。グリッドアイコン (**Column layout**) をクリックし、**2/3 + 1/3**プリセットを選んで**Save**をクリックします。 3. 広いカラムの**+**をクリックし、**Content**タブから**Text**を選びます。記事を入力し、最初の行を**Heading 3**にして**Save**をクリックします。 4. 狭いカラムの**+**をクリックして**Text**を選びます。「関連」を**Heading 4**で入力し、関連ページごとに1行加えて**Save**をクリックします。 5. セクションの**+**をクリックして**Text**を選びます。ローの上に載ります。「サイドバー付きコンテンツ」を**Heading 2**で入力して**Save**をクリックします。 ## 手順2: 均等2分割 1. セクションにホバーして**Add Section Below**をクリックします。新セクションの**More** > **Settings**を開き、**Style**パネルで薄灰色**Background**を選んで**Save**をクリックします。 2. セクションの**+**をクリックして**Row**を選びます。2つの均等カラムが既定なので変更は不要です。 3. 各カラムに**Text**エレメントを追加します。「Before」と「After」を**Heading 4**で1行ずつ付けます。 4. 手順1と同様に見出し「均等2分割」を追加します。 ## 手順3: 3等分 1. 追加するのは**Add Section Below**で3つ目のセクションで、**Align text center**クラスを付けます。 2. 追加するのは**Row**で、グリッドアイコン (**Column layout**) をクリックして**1/3 + 1/3 + 1/3**プリセットを選び、**Save**をクリックします。 3. 各カラムに**Text**エレメントを追加します。「紙」、「ガラス」、「生ごみ」を**Heading 4**で1行ずつ付けます。 4. 見出し「3等分」を追加します。 ## 手順4: 4等分 1. 追加するのは薄灰色**Background**と**Align text center**クラス付きで4つ目のセクションです。 2. 追加するのは**Row**で、グリッドアイコン (**Column layout**) をクリックして**1/4 + 1/4 + 1/4 + 1/4**プリセットを選び、**Save**をクリックします。 3. 各カラムに**Text**エレメントを追加します。曜日を**Heading 4**で、収集物を付けます。 4. 見出し「4等分」を追加します。 ## 手順5: 保存してプレビューする 1. ビルダーツールバーの**Save**をクリックします。 2. ビューメニュー (**eye icon**、目のアイコン) を開き、**Preview**を選びます。 ## 小さい画面での表示 カラムは幅768ピクセルから横に並ぶため、タブレットはデスクトップと同じ配置です。 携帯電話では各カラムが全幅になり、順序通り積み重なります。タブレットに別配置を 与えるにはローのグリッドアイコン (**Column layout**) をクリックして **Add screen size**を選びます。 ## さらに進む 動画にはありません。 - **狭・広・狭**: **1/4 + 1/2 + 1/4**プリセットは長いテキストを空マージンで読みやすく保ちます。 - **Mirror row**: ロー設定でオンにするとタブレットとデスクトップでカラムを入れ替えます。携帯電話は元の順序を保つため、1つ目のカラムが先に来ます。 ## 表示結果 4つの帯が続き、各帯に見出しが上に載ります。記事と関連リンクが1つ目を共有し、2分割が灰色に載り、中央寄せ3等分が次に来ます。灰色の中央寄せ4等分がページを締めます。 ## 図通りにならない場合 - **ローのカラム数が違います。** プリセットはレイアウトダイアログの**Save**のクリック時にだけ適用します。ローのグリッドアイコン (**Column layout**) を再びクリックし、プリセットを選んで**Save**をクリックします。 - **見出しがローより下にあります。** 見出しがローより先に入り、新規エレメントはセクションの上に載ります。コントロールバーのドラッグハンドルで見出しをロー上へドラッグします。 - **タブレットでカラムが縦に積まれます。** タブレットが幅768ピクセル未満です (縦持ち小型タブレットなど)。ローのレイアウトダイアログで**Add screen size**を使ってその幅用の配置を追加します。 - **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。 ## 次はこちら - [ローとカラム](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): 全ロー設定用 - [セクション](/ja/hc/documentation/learn-dxpr-builder/layout/sections): セクション背景と幅用