---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/development/css-architecture'
title: 'CSSアーキテクチャ | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:28:01+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ビルダーのコンテンツはBootstrap 5のマークアップに少量のaz-
  クラスを加えたものです。公開ページに現れるクラスと、エディターの実行中にのみ存在するクラスを把握すれば、テーマCSSの
  適用対象がわかります。
tags:
  - 'Architectuur en API’s'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T11:28:01+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: CSSアーキテクチャ
      description: |-
        ビルダーのコンテンツはBootstrap 5のマークアップに少量のaz-
        クラスを加えたものです。公開ページに現れるクラスと、エディターの実行中にのみ存在するクラスを把握すれば、テーマCSSの
        適用対象がわかります。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T11:28:01+0000'
      dateModified: '2026-10-24T11:28:01+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/development/css-architecture'
      articleSection: 'Architectuur en API’s'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/development/css-architecture'
      description: |-
        ビルダーのコンテンツはBootstrap 5のマークアップに少量のaz-
        クラスを加えたものです。公開ページに現れるクラスと、エディターの実行中にのみ存在するクラスを把握すれば、テーマCSSの
        適用対象がわかります。
      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) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Architectuur en API’s](/hc/documentation/learn-dxpr-builder/extend/architecture) # CSSアーキテクチャ.

 Learn DXPR BuilderExtendArchitectuur en API’s

   ## In this guide

ビルダーのコンテンツはBootstrap 5のマークアップに少量の`az-`クラスを加えたものです。公開ページに現れるクラスと、エディターの実行中にのみ存在するクラスを把握すれば、テーマCSSの 適用対象がわかります。

## 公開ページのクラス

### レイアウト

| マークアップ | クラス |
|---|---|
| セクション | `az-section`の内側には`container`または`container-fluid`が入ります |
| ロー | Bootstrapの`row` |
| カラム | ブレークポイントごとのBootstrap`col-*`クラス |
| コンテンツエレメント | エレメントタイプごとのクラス(例: `az-text`、`az-image`、`az-images-carousel`)。Social Linksは`st-social`を使います。多くは`az-element`も持ちますが、ButtonとImageは持ちません |

古いバージョンで保存されたコンテンツには`az-row`や `az-column`が残っている場合があります。エディターはこれらを認識し、ローやカラムの次回保存時には除外します。

### モディファイア

| クラス | 設定元 |
|---|---|
| `az-row--equal-height` | **Equal-height columns**をローに設定した場合のクラスです。設定がない場合、ローには`align-items-start` |
| `az-row--reverse-horizontal` | **Mirror row**をローに設定 |
| `az-util-vertical-centering` | **Vertical centering**をセクションまたはカラムに設定 |

### Bootstrapグリッド

カラムにはBootstrapのグリッドクラスを使います。

| クラス | 幅 |
|---|---|
| `col` | ローを均等に分割 |
| `col-6` | 50% |
| `col-md-4` | 768px以上で幅33% |
| `col-lg-3` | 992px以上で幅25% |

## カスタムCSSの記述

- ビルダー固有のルールは`.az-section`またはタイプ クラス(例: `.az-text`、`.az-button`)を対象にします。`.az-element`はButtonとImageには適用されません。
- Bootstrapのグリッドクラスは上書きしません。エディターはこれらを通じてカラム幅を設定します。
- 個別のスタイリングには、エレメントの**HTML classes**フィールドにクラスを追加して、そのクラスにスタイルを適用します。

## エディター専用クラス

これらのクラスはエディターの実行中にのみ存在するため、 公開ページが一致することはありません。

| クラス | 適用箇所 |
|---|---|
| `dxpr-builder-ui` | エディターUIのすべての要素(コントロールバー、メニュー、ダイアログ) |
| `controls` | エレメントのコントロールバー |
| `dxpr-editor` | Preview以外のすべてのビューモードでのフィールドコンテナー |
| `az-ctnr` | エディター起動後のフィールドコンテナー |
| `az-sortable-placeholder` | エレメントのドラッグ中のドロッププレースホルダー |

エディター自体のスタイルは`dxpr_builder/css/dxpr_builder_backend.css`にあり、 `dxpr_builder/sass/dxpr_builder_backend.scss`からビルドされます。

## Bootstrapバージョン

ビルダーはBootstrap 5のマークアップを出力します。テーマがBootstrap 5を読み込まない場合は、**Sideload Bootstrap files**を**Bootstrap 5**に設定します。場所は **DXPR Studio > DXPR Builder > General Settings**の**Bootstrap**配下です。**None (theme provides Bootstrap)**はテーマ側での読み込みを前提とします。