---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/nesting'
title: 'ネストレイアウトを追加する | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:48:05+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  カラムの中にローを入れて、そのカラムをさらに分割できます。見出しの上に
  2つのアイコンを横に並べる場合などです。周りのローより細かいグリッドが
  1つのカラムに必要な場合に使います。例では3カラムローの中央カラムに
  アイコン2つのローを追加します。最初のローは
  ローとカラムから
  はじめます。
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: |-
        カラムの中にローを入れて、そのカラムをさらに分割できます。見出しの上に
        2つのアイコンを横に並べる場合などです。周りのローより細かいグリッドが
        1つのカラムに必要な場合に使います。例では3カラムローの中央カラムに
        アイコン2つのローを追加します。最初のローは
        ローとカラムから
        はじめます。
      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:05+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/nesting'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/nesting'
      description: |-
        カラムの中にローを入れて、そのカラムをさらに分割できます。見出しの上に
        2つのアイコンを横に並べる場合などです。周りのローより細かいグリッドが
        1つのカラムに必要な場合に使います。例では3カラムローの中央カラムに
        アイコン2つのローを追加します。最初のローは
        ローとカラムから
        はじめます。
      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/positioned-layers)
- [ローを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [タブパネルを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/tabs-element)

カラムの中にローを入れて、そのカラムをさらに分割できます。見出しの上に 2つのアイコンを横に並べる場合などです。周りのローより細かいグリッドが 1つのカラムに必要な場合に使います。例では3カラムローの中央カラムに アイコン2つのローを追加します。最初のローは [ローとカラム](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)から はじめます。

## ネストレイアウトを追加する

1. ローとカラム付きのセクションを追加します。
2. カラムにホバーしてColumnバーの**+**をクリックします。
3. エレメントピッカーで**Layout**タブから**Row**を 選びます。
4. ネストローが独自カラム付きでカラムの中に現れます。
5. 入れ子のカラムに通常通りエレメントを追加します (例: それぞれに **Icon**)。
6. ツールバーの**Save**をクリックしてページを保存します。

新しいエレメントはカラムの上に付くので、ネストローはカラムのテキストより 上に座ります。

  ## 表示結果

鉛筆と星が中央カラムの上部に横に並び、Design見出しの上に来ます。外側の カラムは変わりません。エディターでは、ネストローが外側ローの中に独自の RowバーとColumnバーを持ちます。

```text
Section
  Row (1/3 + 1/3 + 1/3)
    Column
      Text: Discovery
    Column
      Row (nested, 1/2 + 1/2)
        Column
          Icon: pencil
        Column
          Icon: star
      Text: Design
    Column
      Text: Delivery

```

## ネストレイアウトの設定

ネストローは通常のローと同じグリッドアイコンと設定です。 [ローとカラム](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)を ご覧ください。幅はページではなく親カラムに対する割合です。半幅カラムに 半分ずつのネストローを入れると、4分の1幅の領域が2つできます。

768ピクセル未満の画面では、入れ子のカラムも外側と同じく積み重なります。 アイコンを横並びのままにする場合は、**Add screen size**で ネストローに携帯電話用レイアウトを与えます。

### ネストの最大深度

ローは3階層まで入れ子にできます。ロー、そのカラムの1つにあるロー、その中の さらにもう1つのローです。4階層目は拒否されます。同じ上限は各コンテナー タイプに個別に適用されます (Tabsの中のTabsなど)。あるタイプが他のタイプの 上限に数えられることはありません。

ほとんどのレイアウトは2階層で足ります。階層が1つ増えるごとに狙いを外す コントロールバーが増え、コンテンツの幅が狭まります。

### よくあるネストパターン

| パターン | 作り方 |
|---|---|
| Feature grid | 3カラムのロー。各カラムにネストローがあり、テキスト横にアイコン |
| Sidebar blocks | 2/3 + 1/3のロー。狭いカラムにネストローを置き、ブロックごとに1本 |
| Team members | 2カラムのロー。各カラムに1/3 + 2/3のネストローがあり、略歴の横に肖像写真 |

## 表示されない場合

- **ローは3階層までしかネストできないという警告が出ます。** カラムが すでに2つのネストローの中にあるため「Element cannot be added」と出ます。1つ上の 階層のカラムにローを追加するか、外側ローにカラムの多いプリセットを使います。
- **ネストローがテキストの下ではなく上にあります。**新しいエレメントはカラムの上に付きます。ネストローのバーの **More**を開いて**Move Down**を選びます。
- **携帯電話でアイコンが縦に積まれます。** 入れ子のカラムは全カラムと 同じく768ピクセル未満で積み重なります。ネストローのグリッドアイコンを クリックして**Add screen size**を選び、**Extra small (< 576px)**に **1/2 + 1/2**を選びます。

## 次はこちら

- [ポジションドレイヤー](/ja/hc/documentation/learn-dxpr-builder/layout/positioned-layers): グリッドではできない重ね方をします。
- [ローとカラム](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): カラムプリセットと画面サイズごとのレイアウト。
- [タブ](/ja/hc/documentation/learn-dxpr-builder/layout/tabs-element): コンテンツパネルを横並びの代わりに1か所に積みます。