---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/tabs-element'
title: 'タブパネルを追加する | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:48:35+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  関連コンテンツのいくつかの塊を1か所に置き、一度に1つだけ見せたい場合は
  タブを使います。最後にはタブラベルの列が残り、訪問者はラベルをクリックして
  中身を見ます。例ではサービスごとに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か所に置き、一度に1つだけ見せたい場合は
        タブを使います。最後にはタブラベルの列が残り、訪問者はラベルをクリックして
        中身を見ます。例ではサービスごとに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:35+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/tabs-element'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/tabs-element'
      description: |-
        関連コンテンツのいくつかの塊を1か所に置き、一度に1つだけ見せたい場合は
        タブを使います。最後にはタブラベルの列が残り、訪問者はラベルをクリックして
        中身を見ます。例ではサービスごとに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/collapsibles-element)
- [カルーセルレイアウトを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/carousel-layout)
- [ネストレイアウトを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/nesting)

関連コンテンツのいくつかの塊を1か所に置き、一度に1つだけ見せたい場合は タブを使います。最後にはタブラベルの列が残り、訪問者はラベルをクリックして 中身を見ます。例ではサービスごとに1タブの代理店ページを作ります。一問一答は [コラプスパネル](/ja/hc/documentation/learn-dxpr-builder/layout/collapsibles-element)の方が 読みやすい場合が多いです。

## タブパネルを追加する

1. カラムにホバーしてコントロールバーの**+**をクリックするか、空カラム 中央の**+**をクリックしてエレメントピッカーを開きます。
2. 開いて**Layout**タブで**Tabs**をクリックします。**Title**と 名付けたタブ1つ付きでエレメントが現れます。
3. タブのパネルにホバーして**More > Settings**を開きます。 **Tab title**に名前を入力して**Save**をクリックします。
4. パネル内の**+**をクリックしてコンテンツを追加します (例: **Text**エレメント)。
5. タブを追加するには、タブラベルにホバーして**Tabs**コントロールバーの **Add tab**をクリックします。新しいタブは先頭に付き、他の前に来ます。 同じように名前を付けて中身を入れます。

  ## 表示結果

開いているタブの中身の上にタブラベルの列が座ります。プレビューと公開ページでは、 ラベルのクリックでそのタブの中身が表示され、他は隠れます。各タブが独自の エレメントを持つので、あるタブにテキスト、別のタブにカード一式を置けます。 768ピクセル未満の画面ではタブが積み重なった見出しに変わり、コラプスパネルの ように開きます。

## タブの設定

エレメント**Tabs**には3つの設定があります。**More > Settings**はタブラベルにホバーすると表示される**Tabs**コントロールバーで 開きます。

| 設定 | 内容 | 既定値 |
|---|---|---|
| **Tab direction** | ラベルの位置です。**Default** (コンテンツの上)、**Left**、**Right** | Default |
| **Style** | ラベルの見た目です。**Default** (ラベル下の線)、**Modern** (角丸カード)、**Accordion** (区切り線付き見出し) | Default |
| **Mobile friendly** | 768ピクセル未満の画面でタブを折りたたみ見出しとして表示します | On |

各タブにはパネルの**More > Settings**に独自の設定があります。 **Tab title**はラベルのテキストです。**Tab description**は開いている タブのラベル下に出る任意の短い行です。

## タブの管理

- **Reorder**: タブラベルをラベル間で新しい場所へドラッグします。中身も 一緒に移動します。
- **Rename**: タブのパネルにホバーして**More > Settings**を 開き、**Tab title**を変えて**Save**をクリックします。
- **Remove**: タブのパネルにホバーして**More**を開き、 **Delete**を選びます。タブの中身はすべて一緒に削除されます。

ラベルは1語から3語に保ち、タブは5つ程度に保つと、ラベルが1行に収まります。

## 表示されない場合

- **新しいタブが最後ではなく最初にできます。** **Add tab**は常に 新しいタブを先頭に置きます。ラベルを希望の場所へドラッグします。
- **設定にTab titleとTab descriptionしか出ません。** 1つのタブの 設定を開いています。タブラベルにホバーして**Tabs**コントロールバーを 出し、そこで**More > Settings**を開きます。
- **携帯電話ではタブではなく積み重なった見出しが出ます。** **Mobile friendly**がオンです (既定)。タブを全画面幅で保つには **Tabs**設定でオフにします。
- **TabsがピッカーのLayoutタブにありません。**DXPR Builderユーザープロファイルに含まれていません。管理者が**Tabs**を プロファイルの**Elements**下でチェックします (`/admin/dxpr_studio/dxpr_builder/profile`)。

## 次はこちら

- [折りたたみパネルを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/collapsibles-element): 1つずつ開く一問一答を積み重ねます。
- [カルーセルレイアウトを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/carousel-layout): 同種のコンテンツをスライドで順に見せます。
- [ネスト](/ja/hc/documentation/learn-dxpr-builder/layout/nesting): 豊かなレイアウトのためにタブの中にローとカラムを入れます。