---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/reference/element-reference'
title: 'エレメントリファレンス | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:50:04+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  DXPR Builderには22のコンテンツエレメントと6のレイアウトエレメントが
  あります。このページでは各エレメントのマシン名と設定モーダルのフィールドを
  挙げます。レイアウト部では各ロー内のColumnも挙げます。ビルダーがエレメント
  として提供するDrupalブロックとビューは扱いません。
  このページの読み方
  各エレメントの最初の表はGeneralアコーディオンのフィールドを
  挙げます。他のアコーディオンのフィールドはそのアコーディオン名の別表に
  載ります。Labelはモーダルの表示通りのフィールドラベルで、インターフェイスの
  米国表記です。Parameterはエレメント定義のparam_nameです。選択肢は
  value (Label) と読みます。
  次の2つのGeneralフィールドは全エレメントにあり、表では繰り返しません。
tags:
  - 'Elements and CSS'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: エレメントリファレンス
      description: |-
        DXPR Builderには22のコンテンツエレメントと6のレイアウトエレメントが
        あります。このページでは各エレメントのマシン名と設定モーダルのフィールドを
        挙げます。レイアウト部では各ロー内のColumnも挙げます。ビルダーがエレメント
        として提供するDrupalブロックとビューは扱いません。
        このページの読み方
        各エレメントの最初の表はGeneralアコーディオンのフィールドを
        挙げます。他のアコーディオンのフィールドはそのアコーディオン名の別表に
        載ります。Labelはモーダルの表示通りのフィールドラベルで、インターフェイスの
        米国表記です。Parameterはエレメント定義のparam_nameです。選択肢は
        value (Label) と読みます。
        次の2つのGeneralフィールドは全エレメントにあり、表では繰り返しません。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:50:04+0000'
      dateModified: '2026-10-24T17:19:22+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/reference/element-reference'
      articleSection: エレメントとCSS
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/reference/element-reference'
      description: |-
        DXPR Builderには22のコンテンツエレメントと6のレイアウトエレメントが
        あります。このページでは各エレメントのマシン名と設定モーダルのフィールドを
        挙げます。レイアウト部では各ロー内のColumnも挙げます。ビルダーがエレメント
        として提供するDrupalブロックとビューは扱いません。
        このページの読み方
        各エレメントの最初の表はGeneralアコーディオンのフィールドを
        挙げます。他のアコーディオンのフィールドはそのアコーディオン名の別表に
        載ります。Labelはモーダルの表示通りのフィールドラベルで、インターフェイスの
        米国表記です。Parameterはエレメント定義のparam_nameです。選択肢は
        value (Label) と読みます。
        次の2つのGeneralフィールドは全エレメントにあり、表では繰り返しません。
      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
---
[ヘルプセンター](/ja/node/75)/[ドキュメント](/ja/hc/documentation) /[DXPR Builderを学ぶ](/ja/hc/documentation/learn-dxpr-builder) /[リファレンス](/ja/hc/documentation/learn-dxpr-builder/reference) /[エレメントとCSS](/ja/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # エレメントリファレンス.

 DXPR Builderを学ぶリファレンスエレメントとCSS

   ## このガイドの内容

DXPR Builderには22のコンテンツエレメントと6のレイアウトエレメントが あります。このページでは各エレメントのマシン名と設定モーダルのフィールドを 挙げます。レイアウト部では各ロー内のColumnも挙げます。ビルダーがエレメント として提供するDrupalブロックとビューは扱いません。

## このページの読み方

各エレメントの最初の表は**General**アコーディオンのフィールドを 挙げます。他のアコーディオンのフィールドはそのアコーディオン名の別表に 載ります。Labelはモーダルの表示通りのフィールドラベルで、インターフェイスの 米国表記です。Parameterはエレメント定義の`param_name`です。選択肢は `value` (Label) と読みます。

次の2つのGeneralフィールドは全エレメントにあり、表では繰り返しません。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| HTML ID | `hash` | text | empty。生成IDをプレースホルダーに表示します | 先頭は文字、以降は文字、数字、ハイフン、アンダースコア | エレメントのカスタムIDです。 |
| HTML classes | `el_class` | multi-select | empty。新しいセクションには`py-5` | Bootstrap 5ユーティリティークラスと有効テーマが宣言するクラス。**Edit as text**は任意のクラスを受け付けます | エレメントの追加CSSクラスです。 |

全エレメントには**Style**と**Hover style**アコーディオンもあり、 [スタイルタブ](/ja/hc/documentation/learn-dxpr-builder/element-settings/style-tab)ページで 説明します。ColumnとTabs、Collapse panel、Carousel内のパネルを除く全エレメントには **Animation**アコーディオンもあり、 [アニメーションタブ](/ja/hc/documentation/learn-dxpr-builder/design/animation-tab)ページで 説明します。

Controlカラムはモーダルの表示物を名指します。各コントロールはエレメント定義の パラメーター`type`から来ます。

| Control | Code `type` |
|---|---|
| text | `textfield` |
| number | `numericfield` |
| link | `link` |
| radio | `dropdown` (7未満の選択肢) |
| select | `dropdown` (7以上の選択肢) |
| toggle | `checkbox` (1つの選択肢) |
| checkboxes | `checkbox` (複数の選択肢) |
| slider | `dxb_slider` |
| colour | `colorpicker` |
| icon, image, images, video, datetime | 同名の`type`のもの |
| ckeditor | `textarea` |
| ace | `html` |
| social | `social_links` |

オンのトグルはAllowed valuesセルの値を格納します。オフのトグルは`no`か 空値を格納します。チェックボックスはチェックした値をカンマ区切りの一覧で 格納します。emptyとある選択肢は空文字列で格納します。モーダルではその ラジオボタンがキー`dxpr-default`を持ちます。

Imageとimagesフィールドには画像スタイル選択もあります。存在すればサイトの `optimize`スタイルが先頭、次に**Original image (No resizing)**と 他の画像スタイルです。一部フィールドは他のフィールドが一致する値を持つまで 隠れたままです。Descriptionカラムがその依存を名指します。

## コンテンツエレメント

### [Text](/ja/hc/documentation/learn-dxpr-builder/elements/text)

CKEditorで編集するリッチテキストです。マシン名: `az_text`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | プレースホルダーの見出しと段落 | HTML | テキストコンテンツです。 |

### [Image](/ja/hc/documentation/learn-dxpr-builder/elements/image)

単一の画像です。リンクで包むこともできます。マシン名: `az_image`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Image | `image` | image | empty | メディアブラウザーの画像 | 表示する画像です。 |
| Image width | `width` | text | `100%` | CSS長さ。例: `100px`や`50%` | 裸の数値はピクセル扱いです。 |
| Image height | `height` | text | empty | CSS長さ、例: `100px` | 裸の数値はピクセル扱いです。 |
| Image link | `link` | link | empty | URLまたは内部パス | 画像をリンクで包みます。 |
| Image link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window)、`_blank` (New window) | リンクの開き先です。`link`設定時に表示します。 |

以下は**SEO**アコーディオンのフィールドです。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | 任意のテキスト | 画像の代替テキストです。 |
| Title attribute | `title` | text | empty | 任意のテキスト | 画像のtitle属性です。 |

### [Image carousel](/ja/hc/documentation/learn-dxpr-builder/elements/image-carousel)

複数画像のBootstrapスライドショーです。マシン名: `az_images_carousel`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Images | `images` | images | empty | メディアブラウザーの画像 | 画像ごとに1スライドです。 |
| Interval | `interval` | slider | 5000 | 0から10000まで、刻み1 | スライド間の時間 (ミリ秒)。0ではスライドが自動で進みません。 |
| Hide | `hide` | checkboxes | none ticked | `pagination_control` (Hide pagination control)、`prev_next_buttons` (Hide prev/next buttons) | インジケーター、矢印、または両方を隠します。 |

以下は**SEO**アコーディオンのフィールドです。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | 任意のテキスト | 画像の代替テキストです。 |
| Title attribute | `title` | text | empty | 任意のテキスト | 画像のtitle属性です。 |

### [Video](/ja/hc/documentation/learn-dxpr-builder/elements/video)

YouTubeまたはVimeo動画の埋め込みです。マシン名: `az_video`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Video link | `link` | text | empty | YouTubeまたはVimeoのURL | 埋め込む動画です。 |
| Video width | `width` | text | `100%` | CSS長さ。例: `100px`や`50%` | 裸の数値はピクセル扱いです。 |
| Image | `image` | image | empty | メディアブラウザーの画像 | カバー画像です。訪問者のクリックでプレーヤーが読み込まれます。 |
| Themed play button | `play` | toggle | off | `yes` (オンの場合) | 動画の上にテーマ付き再生ボタンを表示します。 |

### [Local video](/ja/hc/documentation/learn-dxpr-builder/elements/video-local)

自前の動画ファイルをHTML5プレーヤーで再生します。マシン名: `az_video_local`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Video | `video` | video | empty | MP4、WEBM、OGG、OGVファイル。サイトのアップロード上限まで | 動画ファイルです。 |
| Start playing automatically | `autoplay` | toggle | off | `autoplay` (オンの場合) | ページ読み込みで再生開始します。自動再生は常にミュートします。 |
| Muted | `muted` | toggle | off | `muted` (オンの場合) | 動画をミュートします。`autoplay`オフ時に表示します。 |
| Controls | `controls` | toggle | off | `controls` (オンの場合) | プレーヤーコントロールを表示します。 |
| Loop | `loop` | toggle | off | `loop` (オンの場合) | 終了時に動画を最初から再生します。 |
| Video width | `width` | text | `100%` | CSS長さ。例: `100px`や`50%` | プレーヤーの幅です。 |
| Image | `image` | image | empty | メディアブラウザーの画像 | 再生前に表示するポスター画像です。 |

### [HTML](/ja/hc/documentation/learn-dxpr-builder/elements/html)

コードエディターで編集する素のHTMLです。マシン名: `az_html`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Raw HTML | `content` | ace | プレースホルダーメッセージ「Click the edit button to change this HTML」 | HTML | HTMLコンテンツです。 |

### [Jumbotron](/ja/hc/documentation/learn-dxpr-builder/elements/jumbotron)

タイトルとリード文付きの大きなバナーです。他のエレメントを中に落とせます。 マシン名: `az_jumbotron`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | `title` | text | empty | 任意のテキスト | バナータイトルです。 |
| Lead | `lead` | text | empty | 任意のテキスト | タイトル下に表示するサブタイトルテキストです。 |
| Type | `type` | select | `bg-light` (Light) | `bg-light` (Light)、`text-white bg-primary` (Primary)、`text-white bg-secondary` (Secondary)、`text-white bg-success` (Success)、`text-white bg-info` (Info)、`text-white bg-warning` (Warning)、`text-white bg-danger` (Danger)、`text-white bg-dark` (Dark)、`none` (Default) | 背景と文字色のクラスです。 |
| Padding | `padding` | radio | `p-5` (Large) | `p-5` (Large)、`p-4` (Medium)、`p-3` (Small) | パディングサイズです。 |

### [Button](/ja/hc/documentation/learn-dxpr-builder/elements/button)

URLへリンクするBootstrapボタンです。マシン名: `az_button`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | `title` | text | Click to add text | 任意のテキスト | ボタンのテキストです。 |
| Link | `link` | link | empty | URLまたは内部パス | ボタンのリンクです。 |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window)、`_blank` (New window) | リンクの開き先です。`link`設定時に表示します。 |
| Type | `type` | select | `primary` (Primary) | `primary`、`secondary`、`success`、`info`、`warning`、`danger`、`link`、`light`、`dark`。各ラベルは値を大文字はじめにしたもの | Bootstrapボタンスタイルです。 |
| Block button | `block` | toggle | off | `btn-block` (オンの場合) | 全幅ボタンです。 |
| Outline style | `outlined` | toggle | off | `outline` (オンの場合) | 描画は`btn-*`ではなく`btn-outline-*`です。 |
| Size | `size` | radio | empty (Normal) | empty (Normal)、`btn-lg` (Large)、`btn-sm` (Small) | ボタンサイズです。 |

### [Link element](/ja/hc/documentation/learn-dxpr-builder/elements/link)

中のエレメントを1つのリンクで包むコンテナーです。マシン名: `az_link`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Link | `link` | link | empty | URLまたは内部パス | コンテンツリンクです。 |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window)、`_blank` (New window) | リンクの開き先です。`link`設定時に表示します。 |

以下は**SEO**アコーディオンのフィールドです。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title attribute | `title` | text | empty | 任意のテキスト | リンクのtitle属性です。 |
| Tell search engines not to follow | `nofollow` | toggle | off | `nofollow` (オンの場合) | リンクに`rel="nofollow"`を付けます。 |

### [Alert](/ja/hc/documentation/learn-dxpr-builder/elements/alert)

Bootstrapアラートメッセージです。マシン名: `az_alert`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Message | `content` | ckeditor | プレースホルダーテキスト | HTML | メッセージです。 |
| Type | `type` | radio | `alert-success` (Success) | `alert-success` (Success)、`alert-info` (Info)、`alert-warning` (Warning)、`alert-danger` (Danger) | アラート色です。 |

### [Card](/ja/hc/documentation/learn-dxpr-builder/elements/card)

任意のヘッダーとタイトル付きBootstrapカードコンテナーです。マシン名: `az_card`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Header | `header` | text | empty | 任意のテキスト | カードヘッダーテキストです。 |
| Title | `title` | text | empty | 任意のテキスト | カードタイトルです。 |
| Type | `type` | select | empty (Default) | empty (Default)、`text-white bg-primary` (Primary)、`text-white bg-secondary` (Secondary)、`text-white bg-success` (Success)、`text-white bg-info` (Info)、`text-white bg-warning` (Warning)、`text-white bg-danger` (Danger)、`text-white bg-dark` (Dark)、`bg-light` (Light) | カード色クラスです。 |

### [Panel](/ja/hc/documentation/learn-dxpr-builder/elements/panel)

タイトルバー付きパネルコンテナーです。マシン名: `az_panel`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | `title` | text | empty | 任意のテキスト | パネルタイトルです。 |
| Type | `type` | select | `panel-dxpr` (DXPR) | `panel-dxpr` (DXPR)、`panel-default` (Default)、`panel-primary` (Primary)、`panel-success` (Success)、`panel-info` (Info)、`panel-warning` (Warning)、`panel-danger` (Danger) | パネルスタイルです。 |

### [Block quote](/ja/hc/documentation/learn-dxpr-builder/elements/blockquote)

任意の引用元付き引用です。マシン名: `az_blockquote`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | プレースホルダーテキスト | HTML | 引用テキストです。 |
| Cite | `cite` | text | empty | 任意のテキスト | 引用の下に表示する引用元です。 |
| Reverse | `reverse` | toggle | off | `blockquote-reverse` (オンの場合) | 引用を行末に寄せます (`text-end`)。 |

### [Social links](/ja/hc/documentation/learn-dxpr-builder/elements/social-links)

プロフィールページへリンクするソーシャルネットワークアイコンの列または段です。 マシン名: `st_social`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Social links | `st_social_links` | social | FacebookとYouTubeの行 | アイコンごとに1行。ブランドとプロフィールURL | アイコンとそのリンクです。 |
| Layout | `st_type` | radio | `inline` (Inline) | `inline` (Inline)、`stacked` (Stacked) | アイコンレイアウトです。 |
| Style | `st_style` | radio | empty (None) | empty (None)、`rounded` (Rounded)、`circle` (Circle)、`square` (Square) | アイコン背景の形です。 |
| Size | `st_size` | radio | `lg` (Large) | `lg` (Large)、empty (Small)、`2x`、`3x`、`4x`、`5x`。最後の4つのラベルは値と同じ | アイコンサイズです。 |
| CSS3 hover effects | `st_css3_hover_effects` | radio | empty (None) | empty (None)、`disc` (Disc)、`pulse` (Pulse) | ホバー効果です。効果を付けるとアイコンが円形になります。 |

以下は**Icon colors**アコーディオンのフィールドです。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Color | `st_theme_color` | radio | `custom` (Custom) | `brand` (Brand color)、`custom` (Custom)、`inherit` (Inherit) | アイコン色の出どころです。 |
| Color | `st_color` | colour | none | 任意の色 | カスタムアイコン色です。`st_theme_color`が`custom`のときに表示します。 |
| Background color | `st_theme_bgcolor` | radio | `custom` (Custom) | `brand` (Brand color)、`custom` (Custom)、`inherit` (Inherit) | アイコン背景色の出どころです。 |
| Background color | `st_bgcolor` | colour | none | 任意の色 | カスタム背景色です。`st_theme_bgcolor`が`custom`のときに表示します。 |

### [Number counter](/ja/hc/documentation/learn-dxpr-builder/elements/number-counter)

開始値から終了値まで数える数字です。マシン名: `az_counter`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Start | `start` | number | 0 | 数値 | 数えはじめる数値です。 |
| End | `end` | number | 100 | 数値 | 数え上げる数値です。 |
| Font size | `fontsize` | slider | 30 | 0から200まで、刻み1 | 数字のフォントサイズ (ピクセル) です。 |
| Speed | `speed` | slider | 2000 | 0から10000まで、刻み1 | 数え終わるまでの時間 (ミリ秒) です。 |
| Thousands separator | `seperator` | radio | empty (None) | empty (None)、`,` (Comma)、`.` (Dot)、半角スペース (Space) | 最終数値の千単位を区切ります。コードはこの綴りです。 |
| Prefix | `prefix` | text | empty | 任意のテキスト | 数字の前の文字です (例: `$`)。 |
| Suffix | `postfix` | text | empty | 任意のテキスト | 数字の後の文字です (例: `%`)。 |

### [Circle counter](/ja/hc/documentation/learn-dxpr-builder/elements/circle-counter)

任意のテキスト、情報行、中央アイコン付きの円形プログレス表示です。 マシン名: `az_circle_counter`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Foreground color | `fgcolor` | colour | `#333333` | 任意の色 | プログレス弧の色です。 |
| Background color | `bgcolor` | colour | `#999999` | 任意の色 | 弧の後ろの軌道の色です。 |
| Fill color | `fill` | colour | none | 任意の色 | 円の中の塗り色です。 |
| Percent | `percent` | slider | 50 | 0から100まで、刻み1 | プログレス値です。 |
| Dimension | `dimension` | slider | 250 | 100から500まで、刻み1 | 円の直径 (ピクセル) です。 |
| Foreground width | `width` | slider | 10 | 1から100まで、刻み1 | 弧の線幅です。 |
| Animation | `animation` | toggle | on | `yes` (オンの場合) | 弧をアニメーションさせます。 |
| Animation duration | `duration` | slider | 1500 | 0から5000まで、刻み1 | ミリ秒です。`animation`オン時に表示します。 |
| Animation delay | `delay` | slider | 0 | 0から5000まで、刻み1 | ミリ秒です。`animation`オン時に表示します。 |
| Animation in-viewport | `in_viewport` | toggle | on | `yes` (オンの場合) | エレメントがビューに入ったスクロールでアニメーションを開始します。`animation`オン時に表示します。 |

以下は**Circle content**アコーディオンのフィールドです。**Show progress**以降の 全フィールドはオフの間だけ表示します。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Show progress | `show_progress` | toggle | off | `yes` (オンの場合) | 独自テキストとアイコンの代わりにパーセントを表示します。 |
| Text | `text` | text | empty | 任意のテキスト | 中央テキストです。 |
| Font size | `fontsize` | slider | 16 | 0から100まで、刻み1 | 中央テキストのサイズ (ピクセル) です。 |
| Text color | `text_color` | colour | none | 任意の色 | 中央テキストの色です。 |
| Info | `info` | text | empty | 任意のテキスト | 2番目の情報行です。 |
| Info font size | `info_fontsize` | slider | 14 | 0から100まで、刻み1 | 情報行のサイズ (ピクセル) です。 |
| Info color | `info_color` | colour | none | 任意の色 | 情報行の色です。 |
| Icon | `icon` | icon | empty | ビルダープロファイルが許可するセットのアイコン | 中央アイコンです。 |
| Icon size | `icon_size` | slider | 16 | 0から100まで、刻み1 | アイコンのフォントサイズ (ピクセル) です。 |
| Icon color | `icon_color` | colour | none | 任意の色 | アイコンの色です。 |

### [Progress bar](/ja/hc/documentation/learn-dxpr-builder/elements/progress-bar)

ラベル付きの水平Bootstrapプログレスバーです。マシン名: `az_progress_bar`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Label | `label` | text | Click to add text | 任意のテキスト | バー内のテキストです。 |
| Progress | `width` | slider | 50 | 0から100まで、刻み1 | パーセントのプログレスです。 |
| Bar height | `height` | slider | 45 | 0から100まで、刻み1 | バーの高さ (ピクセル) です。 |
| Back color | `bgcolor` | colour | `#e9ecef` | 任意の色 | バーの後ろの軌道色です。 |
| Front color | `fcolor` | colour | `#284ed9` | 任意の色 | バーの色です。 |
| Grow animation | `grow_animation` | toggle | off | `yes` (オンの場合) | バーを0から値までアニメーションさせます。 |
| Stripes | `options` | checkboxes | none ticked | `progress-bar-striped` (Add striped pattern to bar)、`progress-bar-animated` (Animate stripes (requires striped pattern)) | 縞模様と動く縞です。 |

### [Countdown timer](/ja/hc/documentation/learn-dxpr-builder/elements/countdown-timer)

日付、時刻、繰り返し間隔の終わりまで数えます。マシン名: `az_countdown`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Countdown style | `countdown_style` | radio | `plain` (Plain) | `plain` (Plain)、`style1` (Grid)、`style6` (3D flip)、`style9` (Disc)、`style10` (Airport style)、`style12` (Transparent) | 見た目のスタイルです。 |
| Date / Time Limitations | `counter_scope` | radio | `date` (Specify date only) | `date` (Specify date only)、`date_time` (Specify date and time)、`repeating` (Specify time only (repeating every day))、`resetting` (Resetting counter (set interval up to 24 hours)) | タイマーが数える対象です。 |
| Date | `date` | datetime | empty | 日付は`d.m.Y`形式 | 目標日です。`counter_scope`が`date`のときに表示します。 |
| Date / Time | `date_time` | datetime | empty | 日付は`d.m.Y`形式、時間は (`H`) 形式 | 目標日時です。`counter_scope`が`date_time`のときに表示します。 |
| Time | `time` | datetime | empty | 時間は (`H`) 形式 | 毎日の目標時です。`counter_scope`が`repeating`のときに表示します。 |
| Reset in hours | `reset_hours` | slider | 0 | 0から24まで、刻み1 | 間隔の時間数です。`counter_scope`が`resetting`のときに表示します。 |
| Reset in minutes | `reset_minutes` | slider | 0 | 0から60まで、刻み1 | 間隔の分数です。`counter_scope`が`resetting`のときに表示します。 |
| Reset in seconds | `reset_seconds` | slider | 0 | 0から60まで、刻み1 | 間隔の秒数です。`counter_scope`が`resetting`のときに表示します。 |
| Page referrer | `referrer` | link | empty | URLまたは内部パス | カウントダウン満了時に開くページです。`counter_scope`が`repeating`か`resetting`のときに表示します。 |
| Automatic restart | `restart` | toggle | off | `yes` (オンの場合) | 間隔の終わりに再開します。`counter_scope`が`resetting`のときに表示します。 |
| Display options | `display` | checkboxes | all five ticked | `years` (Show remaining years)、`days` (Show remaining days)、`hours` (Show remaining hours)、`minutes` (Show remaining minutes)、`seconds` (Show remaining seconds) | 表示する単位です。 |

### [Marquee](/ja/hc/documentation/learn-dxpr-builder/elements/marquee)

止まらずスクロールする画像の水平帯です。マシン名: `az_marquee`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Images | `images` | images | DXPRロゴの3つの複製 | メディアブラウザーの画像 | 帯の画像です。 |
| Speed | `speed` | slider | 3 | 1から5まで、刻み1 | スクロール速度です。1が最も遅く、5が最も速いです。 |
| Height | `height` | slider | 50 | 10から200まで、刻み1 | 画像の高さ (ピクセル) です。 |
| Image layout | `image_layout` | radio | `fh` (Fixed height images) | `fh` (Fixed height images)、`fw` (Fixed width images) | 画像が高さを共有するか幅を共有するかです。 |
| Image width | `width` | slider | 400 | 50から500まで、刻み1 | 画像の幅 (ピクセル) です。`image_layout`が`fw`のときに表示します。 |
| Gray scale | `grayscale` | toggle | off | `apply` (オンの場合) | 画像をグレースケールで表示します。 |
| Fade edges | `fade_edges` | toggle | off | `apply` (オンの場合) | 帯の両端をフェードさせます。 |

以下は**SEO**アコーディオンのフィールドです。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | 任意のテキスト | 画像の代替テキストです。 |
| Title attribute | `title` | text | empty | 任意のテキスト | 画像のtitle属性です。 |

### [Map](/ja/hc/documentation/learn-dxpr-builder/elements/map)

住所用の埋め込みGoogle Mapです。マシン名: `az_map`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Address | `address` | text | empty | 住所 | 表示する場所です。 |
| Map width | `width` | text | `100%` | CSS長さ。例: `100px`や`50%` | 裸の数値はピクセル扱いです。 |
| Map height | `height` | text | `400px` | CSS長さ、例: `100px` | 裸の数値はピクセル扱いです。 |

### [Icon](/ja/hc/documentation/learn-dxpr-builder/elements/icon)

単一のアイコンです。リンク付きもできます。マシン名: `az_icon`。 モジュールは14のアイコンセットを付属します。テーマとモジュールが追加でき、 ビルダープロファイルがユーザーの見るセットを制限できます。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Icon | `icon` | icon | `bi bi-heart` | ビルダープロファイルが許可するセットのアイコン | アイコンです。 |
| Size | `size` | radio | `fa-lg` (Large) | `normal` (Normal)、`fa-lg` (Large)、`fa-2x` (Extra Large (2x))、`fa-3x` (Very Large (3x))、`fa-4x` (Huge (4x))、`fa-5x` (Gigantic (5x)) | アイコンサイズです。 |
| Link | `link` | link | empty | URLまたは内部パス | アイコンのリンクです。 |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window)、`_blank` (New window) | リンクの開き先です。`link`設定時に表示します。 |

以下は**Icon utilities**アコーディオンのフィールドです。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Style | `st_style` | radio | empty (None) | empty (None)、`stbe-util-icon-rounded` (Rounded)、`stbe-util-icon-circle` (Circle)、`stbe-util-icon-square` (Square) | 背景の形です。 |
| Icon animation | `animation` | radio | empty (No) | empty (No)、`fa-spin` (Spin)、`fa-pulse` (Pulse) | アイコンのアニメーションです。 |
| Icon orientation | `orientation` | radio | empty (Normal) | empty (Normal)、`fa-rotate-90` (Rotate 90)、`fa-rotate-180` (Rotate 180)、`fa-rotate-270` (Rotate 270)、`fa-flip-horizontal` (Flip horizontal)、`fa-flip-vertical` (Flip vertical) | 回転または反転です。 |

### [Divider](/ja/hc/documentation/learn-dxpr-builder/elements/divider)

水平罫線です。マシン名: `az_separator`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Color | `bgcolor` | colour | none | 任意の色 | 線の色です。 |
| Thickness | `thickness` | radio | `auto` (Theme default) | `auto` (Theme default)、`custom` (Custom thickness) | テーマの太さを上書きするかどうかです。 |
| Thickness | `custom_thickness` | slider | 3 | 0から20まで、刻み1 | 線の太さ (ピクセル) です。`thickness`が`custom`のときに表示します。 |
| Length | `width` | radio | `auto` (Theme default) | `auto` (Theme default)、`custom` (Custom width) | テーマの長さを上書きするかどうかです。 |
| Width | `custom_width` | slider | 100 | 0から500まで、刻み10 | 線の長さ (ピクセル) です。0で全幅になります。`width`が`custom`のときに表示します。 |
| Align | `align` | radio | `left` (Left) | `left` (Left)、`center` (Center)、`right` (Right) | 水平方向の配置です。`width`が`custom`のときに表示します。 |

## レイアウトエレメント

### [Section](/ja/hc/documentation/learn-dxpr-builder/layout/sections)

ロー用の最上位コンテナーです。全幅、全高、背景効果の選択肢付きです。 マシン名: `az_section`。新しいセクションはクラス`py-5`が **HTML classes**に付きます。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Full width | `fluid` | toggle | off | `yes` (オンの場合) | 全幅コンテナー (`container-fluid`) を使います。 |
| 100% height | `fullheight` | toggle | off | `yes` (オンの場合) | セクションが画面の高さいっぱいになります。 |
| Vertical centering | `vertical_centering` | toggle | off | `yes` (オンの場合) | コンテンツを垂直中央に寄せます。 |

以下は**Background effects**アコーディオンのフィールドです。**Background effect**以外は その値に依存します。Descriptionカラムの通りです。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Background effect | `effect` | radio | empty (Simple image) | empty (Simple image)、`fixed` (Fixed image)、`parallax` (Parallax image)、`gradient` (Gradient)、`youtube` (YouTube video) | 背景効果です。 |
| Parallax speed | `parallax_speed` | slider | 0 | 0から100まで、刻み1 | パララックスのスクロール速度です。`effect`が`parallax`のときに表示します。 |
| Parallax mode | `parallax_mode` | radio | `fixed` (Fixed) | `fixed` (Fixed)、`scroll` (Local) | 画像の背景固定です。`effect`が`parallax`のときに表示します。 |
| Disable on mobile | `parallax_mobile_disable` | toggle | off | `yes` (オンの場合) | 481ピクセル未満の画面でパララックスをオフにします。`effect`が`parallax`のときに表示します。 |
| Start color | `gradient_start_color` | colour | none | 任意の色 | グラデーション開始色です。`effect`が`gradient`のときに表示します。 |
| End color | `gradient_end_color` | colour | none | 任意の色 | グラデーション終了色です。`effect`が`gradient`のときに表示します。 |
| Gradient direction | `gradient_direction` | slider | 180 | 1から360まで、刻み1 | グラデーション角度 (度) です。`effect`が`gradient`のときに表示します。 |
| Start position | `gradient_start` | slider | 0 | 0から100まで、刻み1 | 開始色の位置 (パーセント) です。`effect`が`gradient`のときに表示します。 |
| End position | `gradient_end` | slider | 100 | 0から100まで、刻み1 | 終了色の位置 (パーセント) です。`effect`が`gradient`のときに表示します。 |
| Video options | `video_options` | checkboxes | none ticked | `disMobile` (Disable on mobile devices)、`loop` (Loop)、`audio` (Unmute (Not reliable when auto-playing due to recent browser policy updates))、`noCrop` (Disable cropping out player)、`resizeSection` (Resize section to match video)、`showControls` (Show controls) | YouTube背景の選択肢です。`effect`が`youtube`のときに表示します。 |
| YouTube video URL | `video_youtube` | text | empty | YouTubeのURL | YouTube背景動画です。`effect`が`youtube`のときに表示します。 |
| Start time in seconds | `video_start` | text | 0 | 秒数 | 動画の開始時間です。`effect`が`youtube`のときに表示します。 |
| Stop time in seconds | `video_stop` | text | 0 | 秒数 | 動画の終了時間です。`effect`が`youtube`のときに表示します。 |

### [Row](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)

カラムを持つBootstrapグリッドローです。新しいローは半幅2カラムではじまります。 マシン名: `az_row`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Equal-height columns | `equal` | toggle | off | `yes` (オンの場合) | 全カラムを同じ高さにします。 |
| Mirror row | `reverse_horizontal` | toggle | off | `yes` (オンの場合) | 768ピクセル以上の画面でカラム順を逆にします。 |

### [Column](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)

ロー内のカラムです。ローがカラムを作るので、Columnはエレメントピッカーに ありません。マシン名: `az_column`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Vertical centering | `vertical_centering` | toggle | off | `yes` (オンの場合) | カラムコンテンツを垂直中央に寄せます。 |

### [Tabs](/ja/hc/documentation/learn-dxpr-builder/layout/tabs-element)

切り替え式タブパネルのコンテナーです。各タブは**Add tab**コントロールで 追加します。マシン名: `az_tabs`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Tab direction | `az_dirrection` | radio | empty (Default) | empty (Default)、`tabs-left` (Left)、`tabs-right` (Right) | タブバーの位置です。コードはこの綴りです。 |
| Style | `tab_style` | radio | empty (Default) | empty (Default)、`modern` (Modern)、`accordion` (Accordion) | タブスタイルです。 |
| Mobile friendly | `responsive` | toggle | on | `yes` (オンの場合) | 小画面でタブを折りたたみ表示にします。 |

各タブ (`az_tab`) の独自設定:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Tab title | `title` | text | Title | 任意のテキスト | タブのラベルです。 |
| Tab description | `subtitle` | ckeditor | empty | HTML | 有効タブに表示する任意の短い傍線です。 |

### [Collapse panel](/ja/hc/documentation/learn-dxpr-builder/layout/collapsibles-element)

折りたたみパネルのコンテナーです。各パネルは**Add toggle**コントロールで 追加します。マシン名: `az_accordion`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Collapse | `collapsed` | toggle | off | `yes` (オンの場合) | 全パネルを閉じた状態ではじめます。オフでは最初のパネルが開いた状態ではじまります。 |
| Expand icon | `expandicon` | radio | empty (None) | empty (None)、`az-accordion--icon-plusminus` (+)、`az-accordion--icon-arrow` (﹀) | 各パネルタイトル横のアイコンです。 |

各パネル (`az_toggle`) の独自設定:

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Toggle title | `title` | text | Title | 任意のテキスト | パネルタイトルです。 |

### [Carousel](/ja/hc/documentation/learn-dxpr-builder/layout/carousel-layout)

スライドのコンテナーです。各スライドは他のエレメントを持ち、**Add slide**コントロールで追加します。スライド (`az_slide`) に独自フィールドは ありません。マシン名: `az_carousel`。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Frames per slide | `items` | slider | 1 | 1から10まで、刻み1 | 横に並べて表示するスライドです。狭い画面では減ります。 |
| Disable auto-play | `autoplay` | toggle | off | `yes` (オンの場合) | スライドの自動送りを止めます。 |
| Auto-play interval | `interval` | slider | 5000 | 1000から20000まで、刻み100 | スライド間の時間 (ミリ秒) です。 |
| Stop on hover | `stoponhover` | toggle | off | `yes` (オンの場合) | ポインターがカルーセル上にある間は自動再生を止めます。 |

以下は**Dots**アコーディオンのフィールドです。**Dots navigation**以降の 全フィールドはオンの間だけ表示します。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Dots navigation | `pagination` | toggle | on | `yes` (オンの場合) | 各スライドのドットを表示します。 |
| Dots orientation | `pagination_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider)、`inside` (Inside slider) | ドットの位置です。 |
| Dot shape | `pagination_shape` | radio | `bar` (Bar) | `bar` (Bar)、`circle` (Circle)、`square` (Square)、`triangle` (Triangle) | ドットの形です。 |
| Active dot transformation | `pagination_transform` | radio | empty (None) | empty (None)、`growTaller` (Grow taller)、`growWider` (Grow wider)、`scaleUp` (Scale up) | 有効ドットの効果です。 |
| Dot color | `pagination_color` | colour | none | 任意の色 | ドットの色です。 |
| Active dot color | `pagination_active_color` | colour | none | 任意の色 | 有効ドットの色です。 |

以下は**Next/Previous**アコーディオンのフィールドです。**Next/Previous**以降の 全フィールドはオンの間だけ表示します。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Next/Previous | `navigation` | toggle | off | `yes` (オンの場合) | 次へ・前へ矢印を表示します。 |
| Orientation | `navigation_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider)、`inside` (Inside slider) | 矢印の位置です。 |
| Dot shape | `navigation_shape` | radio | empty (No background) | empty (No background)、`circle` (Circle)、`square` (Square)、`bar` (Bar) | 矢印の背景の形です。モーダルも**Dot shape**と名指します。 |
| Icon color | `navigation_icon_color` | colour | none | 任意の色 | 矢印アイコンの色です。 |
| Icon hover color | `navigation_icon_hover_color` | colour | none | 任意の色 | 矢印アイコンのホバー色です。 |
| Background color | `navigation_background_color` | colour | none | 任意の色 | 矢印背景の色です。 |
| Background hover color | `navigation_background_hover_color` | colour | none | 任意の色 | 矢印背景のホバー色です。 |
| Outside navigation position | `navigation_position` | select | `adjacent` (Adjacent) | `adjacent` (Adjacent)、`topCenter` (Top center)、`topLeft` (Top left)、`topRight` (Top right)、`bottomCenter` (Bottom center)、`bottomLeft` (Bottom left)、`bottomRight` (Bottom right) | スライダー外の矢印の位置です。 |

### [Positioned layers](/ja/hc/documentation/learn-dxpr-builder/layout/positioned-layers)

子エレメントを自由にドラッグしてサイズ変更するキャンバスです。Positioned layers エレメントは他の同種の中に入れられません。マシン名: `az_layers`。 各子は位置を隠しパラメーターに格納します。`pos_left`、`pos_top`、 `pos_width`、`pos_height`、`pos_zindex`です。

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Width | `width` | text | `100%` | CSS長さ。例: `100px`や`50%` | キャンバスの幅です。裸の数値はピクセル扱いです。 |
| Height | `height` | slider | 500 | 0から10000まで、刻み1 | キャンバスの高さ (ピクセル) です。 |
| Responsive | `responsive` | toggle | off | `yes` (オンの場合) | 利用可能な幅に連動してキャンバスの高さとフォントサイズを拡縮します。 |

## 次はこちら

- [エレメント概要](/hc/documentation/learn-dxpr-builder/elements)
- [レイアウト概要](/hc/documentation/learn-dxpr-builder/layout/overview)
- [エレメント設定](/hc/documentation/learn-dxpr-builder/element-settings)