---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/utility-classes'
title: 'ユーティリティクラス | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:27:13+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'すべてのエレメントには名前付きクラスの一覧を持つHTML classesフィールドがあります。Bootstrap 5ユーティリティとドロップシャドウは組み込みです。テーマは.info.yml経由で独自グループを追加でき、モジュールはalterフック経由で追加できます。このページでは一覧の内容と独自クラスの登録方法を説明し、編集者がクラス名を入力する代わりに名前でブランドの見た目を選べるようにします。'
tags:
  - 'Je huisstijl toepassen'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T11:27:13+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: ユーティリティクラス
      description: 'すべてのエレメントには名前付きクラスの一覧を持つHTML classesフィールドがあります。Bootstrap 5ユーティリティとドロップシャドウは組み込みです。テーマは.info.yml経由で独自グループを追加でき、モジュールはalterフック経由で追加できます。このページでは一覧の内容と独自クラスの登録方法を説明し、編集者がクラス名を入力する代わりに名前でブランドの見た目を選べるようにします。'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T11:27:13+0000'
      dateModified: '2026-10-24T11:27:13+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/customization/utility-classes'
      articleSection: 'Je huisstijl toepassen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/utility-classes'
      description: 'すべてのエレメントには名前付きクラスの一覧を持つHTML classesフィールドがあります。Bootstrap 5ユーティリティとドロップシャドウは組み込みです。テーマは.info.yml経由で独自グループを追加でき、モジュールはalterフック経由で追加できます。このページでは一覧の内容と独自クラスの登録方法を説明し、編集者がクラス名を入力する代わりに名前でブランドの見た目を選べるようにします。'
      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) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # ユーティリティクラス.

 Learn DXPR BuilderManage the siteJe huisstijl toepassen

   ## In this guide

 Related guides

- [テーマのCSSでビルダーコンテンツをスタイルする](/ja/hc/documentation/learn-dxpr-builder/customization/custom-css)
- [テキストエディターにブランドスタイルとボタンを追加する](/ja/hc/documentation/learn-dxpr-builder/customization/text-editor)
- [Hooks APIリファレンス](/ja/hc/documentation/learn-dxpr-builder/development/hooks-api)

すべてのエレメントには名前付きクラスの一覧を持つ**HTML classes**フィールドがあります。Bootstrap 5ユーティリティとドロップシャドウは組み込みです。テーマは`.info.yml`経由で独自グループを追加でき、モジュールはalterフック経由で追加できます。このページでは一覧の内容と独自クラスの登録方法を説明し、編集者がクラス名を入力する代わりに名前でブランドの見た目を選べるようにします。

## クラスを適用する

1. エレメントの設定を開き、**General**パネルの下部で**HTML classes**を探します。
2. ボックスをクリックして一覧からクラスを選びます。ボックスへの入力で一覧を絞り込めます。
3. 一覧にないクラスを入力するには、**Edit as text**をクリックして入力します。
4. ダイアログの**Save**をクリックし、次にビルダーツールバーの**Save**をクリックします。

クラスは保存されるHTMLのエレメントの`class`属性に入ります。よくある用途は[HTML IDとクラス](/hc/documentation/learn-dxpr-builder/element-settings/custom-css)で編集者向けに説明しています。

## 一覧の内容

エディターは起動時に一覧を作成します。次の3つのソースをこの順序でマージします。

1. 組み込み一覧です。**Drop shadows**グループ、短い**Bootstrap classes**グループ、Bootstrap 5ユーティリティが用途別にグループ化されています。**Display & Visibility**、**Responsive Visibility**、**Margins**、**Padding**、**Text Colors**などです。
2. 対象は`.info.yml`に`dxpr_builder_classes`キーを持つすべてのインストール済みテーマ用のグループです。グループにはテーマ名のラベルが付きます。
3. モジュールからの変更です。詳しくは[モジュールからのクラス登録](#register-classes-from-a-module)をご覧ください。

すべてのサイトにはスペース用のクラス(例: `mt-3`、`px-4`)、表示用のクラス(例: `d-none`)、テキスト用のクラス(例: `text-center`、`fw-bold`)があります。設定は不要です。

## テーマでのクラス登録

テーマの`.info.yml`に`dxpr_builder_classes`マッピングを追加します。各キーはクラス名またはスペース区切りの複数で、各値は編集者が見るラベルです。DXPR Themeはこの方法でクラスを登録しています。

```yaml
dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

```

1. 追加するのは`themes/custom/mytheme/mytheme.info.yml`へのマッピングです。

    ```yaml
    dxpr_builder_classes:
      brand-card: 'Brand card'
      brand-card shadow-lg: 'Brand card with shadow'

    ```
2. クラスのCSSはテーマがすべてのページで読み込むライブラリーに記述します。詳しくは[カスタムCSS](/hc/documentation/learn-dxpr-builder/customization/custom-css)をご覧ください。
3. キャッシュは`drush cr`でクリアします。Drupalがinfoファイルを再度読み取ります。
4. エレメントの設定を開き、**HTML classes**にテーマ名のグループと2つのエントリが表示されることを確認します。

キーを持つすべてのインストール済みテーマがグループを追加します。デフォルトテーマだけではありません。グループには常にテーマ名が付きます。infoファイルで名前変更はできません。

## モジュールからのクラス登録

カスタムモジュールはalterフックでクラスを追加したり、テーマが登録したクラスを削除したりできます。組み込みBootstrapエントリは削除できません。エディターがブラウザーで追加するためです。コードは[Hooks APIリファレンス](/hc/documentation/learn-dxpr-builder/development/hooks-api#hook_dxpr_builder_classes_alter)にあります。

## Bootstrapバージョン

組み込み一覧はBootstrap 5です。テーマがBootstrap 5を読み込まない場合は、**Sideload Bootstrap files**を**Bootstrap 5**に設定します。**Bootstrap**配下(**DXPR Studio** > **DXPR Builder** > **General Settings**)で、クラスに背後のCSSを持たせるためです。読み込む内容は[パフォーマンス](/hc/documentation/learn-dxpr-builder/advanced/performance#bootstrap-sideloading)をご覧ください。

## クラスが表示されない場合

- **HTML classesにテーマのグループがありません。**Drupalはテーマのinfoファイルの古いコピーを使っています。**Clear all caches**を**Configuration** > **Development** > **Performance** (`/admin/config/development/performance`)でクリックするか、`drush cr`を実行します。
- **キーを持つテーマがグループを追加しません。**カウントされるのはインストール済みテーマのみです。**Appearance** (`/admin/appearance`)でテーマをインストールします。デフォルトテーマである必要はありません。
- **クラスを選んでもエレメントの見た目が同じです。**ページにそのクラスのCSSが読み込まれていません。テーマが読み込むライブラリーにルールを追加します。詳しくは[カスタムCSS](/hc/documentation/learn-dxpr-builder/customization/custom-css)をご覧ください。Bootstrapクラスについては[Bootstrapバージョン](#bootstrap-version)をご覧ください。

## 次のステップ

- [カスタムCSS](/hc/documentation/learn-dxpr-builder/customization/custom-css)：クラスの背後にあるルールを書く。
- [テキストエディター](/hc/documentation/learn-dxpr-builder/customization/text-editor)：**Styles**一覧で段落・単語用のクラスを提供する。
- [Hooks APIリファレンス](/hc/documentation/learn-dxpr-builder/development/hooks-api)：DXPR Builderが提供するその他のフック。