--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns' title: 'ローを追加する | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:48:20+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- ローはセクションをカラムに分割し、コンテンツを横に並べます。3つの サービス、テキスト横の写真、記事横のサイドバーなどです。12のプリセットから 分割を選び、携帯電話には独自レイアウトを与えられます。ロー追加はこの ページを、カラムの中のローは ネストを ご覧ください。 ローを追加する 例ではチームの各サービス用に3カラムのローをセクションに追加します。 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: |- ローはセクションをカラムに分割し、コンテンツを横に並べます。3つの サービス、テキスト横の写真、記事横のサイドバーなどです。12のプリセットから 分割を選び、携帯電話には独自レイアウトを与えられます。ロー追加はこの ページを、カラムの中のローは ネストを ご覧ください。 ローを追加する 例ではチームの各サービス用に3カラムのローをセクションに追加します。 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:20+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/rows-and-columns' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns' description: |- ローはセクションをカラムに分割し、コンテンツを横に並べます。3つの サービス、テキスト横の写真、記事横のサイドバーなどです。12のプリセットから 分割を選び、携帯電話には独自レイアウトを与えられます。ロー追加はこの ページを、カラムの中のローは ネストを ご覧ください。 ローを追加する 例ではチームの各サービス用に3カラムのローをセクションに追加します。 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/nesting) - [セクションを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/sections) - [レイアウトをスマートフォンに対応させる](/ja/hc/documentation/learn-dxpr-builder/design/responsive-design) ローはセクションをカラムに分割し、コンテンツを横に並べます。3つの サービス、テキスト横の写真、記事横のサイドバーなどです。12のプリセットから 分割を選び、携帯電話には独自レイアウトを与えられます。ロー追加はこの ページを、カラムの中のローは [ネスト](/ja/hc/documentation/learn-dxpr-builder/layout/nesting)を ご覧ください。 ## ローを追加する 例ではチームの各サービス用に3カラムのローをセクションに追加します。 1. セクションの**+**をクリックしてエレメントピッカーを開きます。 2. 選ぶのは**Row**で、**Layout**タブからです。2つの均等カラム付きで 入ります。 3. ローのコントロールバーのグリッドアイコン (**Column layout**) を クリックし、3つの均等カラムなどのカラムプリセットを選んで **Save**をクリックします。 4. カラムの**+**をクリックしてコンテンツを追加します。 5. ツールバーの**Save**をクリックしてページを保存します。 グリッドアイコンはローのドラッグハンドルのすぐ横です。プリセットは クリックですぐカラムを変えます。**Cancel**で元のレイアウトに 戻ります。 ## 表示結果 3つのサービスが横に並び、各カラムはセクション幅の3分の1です。768ピクセル 未満の画面ではカラムが積み重なります。各カラムが全幅になり、ページ上の順序 通りです。 カラムの高さは中身の分だけなので、短いカラムは隣より先に終わります。カラムに 背景色が付くと気づきます。**Equal-height columns**で揃えます。 ## ローの設定 ### カラムレイアウト グリッドアイコンは、独自レイアウトを持つ画面サイズごとにパネルを開きます。 各パネルにはこの12プリセットがタイルで並びます。 | プリセット | レイアウト | |---|---| | 1/1 | 全幅1カラム | | 1/2 + 1/2 | 2つの均等カラム | | 1/3 + 1/3 + 1/3 | 3つの均等カラム | | 1/4 + 1/4 + 1/4 + 1/4 | 4つの均等カラム | | 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | 6つの均等カラム | | 1/4 + 1/2 + 1/4 | 狭、広、狭 | | 1/6 + 4/6 + 1/6 | 狭、とても広、狭 | | 1/4 + 3/4 | 左4分の1、右4分の3 | | 3/4 + 1/4 | 左4分の3、右4分の1 | | 2/3 + 1/3 | 左広、右狭 | | 1/3 + 2/3 | 左狭、右広 | | 5/12 + 7/12 | 左やや狭、右やや広 | その他の分割には**Custom Layout**をクリックし、幅を分数で入力します (例: `1/6 + 5/6`)。合計が1を超える幅は新しい行に折り返します。 ダイアログを再び開くと**Custom Layout**に印が付き、レイアウトを 表示します (例: **Custom Layout (1/6 + 5/6)**)。 ### 画面サイズごとのレイアウト 最初のパネル**Medium devices (≥ 768px)**はタブレット以上を 設定します。携帯電話も変えるにはダイアログ上部の**Add screen size**を クリックします。**Extra small (< 576px)**のパネルが開くので、必要なら 一覧から他のサイズを選んでプリセットを選びます。**Remove screen size**は パネルを削除します。 ### ローとカラムの設定 ローのコントロールバーで**More** > **Settings**を開きます。 カラム設定はカラムのバーで開きます。 | 設定 | エレメント | 内容 | 既定値 | |---|---|---|---| | **Equal-height columns** | Row | 全カラムを最も高いカラムの高さに伸ばします | Off | | **Mirror row** | Row | 768ピクセル以上でカラムを逆順に表示します。積み重なったカラムはページ順序を保ちます | Off | | **Vertical centering** | Column | 中身より高いカラムの中でコンテンツを中央に寄せます | Off | **Mirror row**は交互のローのページに向きます。左に写真、次は右に 写真、携帯電話では常に写真が先に来ます。 ### カラムの移動と削除 カラムはハンドルでドラッグするか、バーで**More** > **Move Left**または**Move Right**を使います。カラムに**Delete**はありません。代わりに カラムの少ないプリセットを選びます。コンテンツは失われません。残った最後の カラムに移動します。 ## 表示されない場合 - **カラムのVertical centeringが効きません。** カラムの高さは 中身の分だけなので、中央寄せする余地がありません。ローの設定で **Equal-height columns**をオンにします。 - **携帯電話でカラムが縦に積まれます。** 768ピクセル未満では既定です。 グリッドアイコンをクリックして**Add screen size**を選び、 **Extra small (< 576px)**にプリセットを選びます。 - **テキストが別のカラムに移っています。** カラムの少ないプリセットを選んだため、 削除されたカラムのコンテンツが最後のカラムに移動しました。 **Ctrl+Z** (Macでは**Cmd+Z**) で変更を元に戻します。 - **カラムのMoreメニューにDeleteがありません。** カラムはレイアウト経由で 削除します。ローのグリッドアイコンをクリックしてカラムの少ないプリセットを 選びます。 ## 次はこちら - [ネスト](/ja/hc/documentation/learn-dxpr-builder/layout/nesting): 細かいグリッドのためにカラムの中にローを入れます。 - [セクション](/ja/hc/documentation/learn-dxpr-builder/layout/sections): カラム周りの帯に独自の背景を付けます。 - [レスポンシブデザイン](/hc/documentation/learn-dxpr-builder/design/responsive-design): レイアウトが画面サイズごとに適応する仕組み。