--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/reference/css-classes' title: 'CSSクラスリファレンス | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:49:56+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR BuilderコンテンツはBootstrap 5クラスと独自の少数クラスを使います。 このリファレンスでは使う可能性・CSS指定する可能性の高いものを挙げます。 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-24T08:49:56+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: CSSクラスリファレンス description: |- DXPR BuilderコンテンツはBootstrap 5クラスと独自の少数クラスを使います。 このリファレンスでは使う可能性・CSS指定する可能性の高いものを挙げます。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:49:56+0000' dateModified: '2026-10-24T08:49:56+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/css-classes' articleSection: エレメントとCSS - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/reference/css-classes' description: |- DXPR BuilderコンテンツはBootstrap 5クラスと独自の少数クラスを使います。 このリファレンスでは使う可能性・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 --- [ヘルプセンター](/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) # CSSクラスリファレンス. DXPR Builderを学ぶリファレンスエレメントとCSS ## このガイドの内容 DXPR BuilderコンテンツはBootstrap 5クラスと独自の少数クラスを使います。 このリファレンスでは使う可能性・CSS指定する可能性の高いものを挙げます。 ## カスタムクラスの追加 1. エレメントを選びます。 2. 開くのは**More > Settings**です。 3. 設定の**General**セクションで**HTML classes**フィールドのクラスを選びます。任意のクラス名を入力するには**Edit as text**をクリックし、クラスを半角スペースで区切ります。 ## Bootstrapグリッドクラス ### コンテナークラス | Class | Description | |---|---| | `.container` | 固定幅の中央寄せコンテナー | | `.container-fluid` | 全幅コンテナー | ### ローとカラムのクラス | Class | Description | |---|---| | `.row` | カラム用フレックスコンテナー | | `.col-{n}` | ローのn/12を占めるカラム | | `.col-sm-{n}` | small (576px以上) のカラム幅 | | `.col-md-{n}` | medium (768px以上) のカラム幅 | | `.col-lg-{n}` | large (992px以上) のカラム幅 | | `.col-xl-{n}` | XL (1200px以上) のカラム幅 | ## Bootstrap間隔ユーティリティー ### マージン | Class | Description | |---|---| | `.m-{0-5}` | 全辺のマージン | | `.mt-{0-5}` | 上のマージン | | `.mb-{0-5}` | 下のマージン | | `.ms-{0-5}` | 開始側のマージン (LTRでは左) | | `.me-{0-5}` | 終了側のマージン (LTRでは右) | | `.mx-{0-5}` | 左右のマージン | | `.my-{0-5}` | 上下のマージン | ### パディング | Class | Description | |---|---| | `.p-{0-5}` | 全辺のパディング | | `.pt-{0-5}` | 上のパディング | | `.pb-{0-5}` | 下のパディング | | `.ps-{0-5}` | 開始側のパディング | | `.pe-{0-5}` | 終了側のパディング | | `.px-{0-5}` | 左右のパディング | | `.py-{0-5}` | 上下のパディング | ## Bootstrapテキストユーティリティー | Class | Description | |---|---| | `.text-start` | 左寄せテキスト | | `.text-center` | 中央寄せテキスト | | `.text-end` | 右寄せテキスト | | `.fw-bold` | 太字テキスト | | `.fw-light` | 細字テキスト | | `.fst-italic` | 斜体テキスト | | `.text-uppercase` | 大文字テキスト | | `.text-lowercase` | 小文字テキスト | | `.fs-1`〜`.fs-6` | フォントサイズ (1が最大) | ## Bootstrap色ユーティリティー ### 文字色 | Class | Description | |---|---| | `.text-primary` | テーマプライマリー色 | | `.text-secondary` | テーマセカンダリー色 | | `.text-success` | 緑 (成功) | | `.text-danger` | 赤 (危険・エラー) | | `.text-warning` | 黄 (警告) | | `.text-info` | シアン (情報) | | `.text-muted` | 灰色の控えめテキスト | | `.text-white` | 白テキスト | ### 背景色 | Class | Description | |---|---| | `.bg-primary` | プライマリー背景 | | `.bg-secondary` | セカンダリー背景 | | `.bg-success` | 緑背景 | | `.bg-danger` | 赤背景 | | `.bg-warning` | 黄背景 | | `.bg-info` | シアン背景 | | `.bg-light` | 薄灰色背景 | | `.bg-dark` | 暗背景 | ## Bootstrap表示ユーティリティー | Class | Description | |---|---| | `.d-none` | エレメントを隠します | | `.d-block` | ブロック表示 | | `.d-inline` | インライン表示 | | `.d-sm-none` | small以上で隠します | | `.d-md-block` | medium以上で表示します | | `.d-lg-none` | large以上で隠します | ## DXPR Builderクラス ### エレメントクラス | Class | Description | |---|---| | `.az-element` | 多くのコンテンツエレメントの基本クラスです。ButtonとImageには付かないので、代わりに`.az-`を指定します | | `.az-` | エレメントタイプごとに1クラスです。例: `.az-text`、`.az-image`、`.az-images-carousel`。Social Linksのクラスは`.st-social` | | `.az-section` | セクションエレメント | | `.row` | ローエレメント (Bootstrap)。旧版コンテンツのクラスは`.az-row` | | `.col-*` | カラムエレメント (Bootstrap)。旧版コンテンツのクラスは`.az-column` | ### アニメーションクラス アニメーションはanimate.css命名を使います。エレメントのアニメーション中は次を持ちます。 | Class | Description | |---|---| | `.animated` | アニメーション実行中に付きます | | `.infinite` | 付くのは**Infinite**オン時です | | Animation name, such as `.fadeIn` | 再生中の**Animation in**・**Animation out**効果です | ### バリアントクラス | Class | Description | |---|---| | `.az-variant-container` | A/Bテストコンテナーです。併用クラスは`.rl-experiment` | | `.az-variant-wrapper` | 各バリアント枝です | | `.az-variant-original` | 元の枝 (A) です | | `.az-variant-1`、`.az-variant-2` | 枝B、C以降です | | `.az-variant-active` | 現在表示中の枝です | ## レスポンシブ表示にクラスを使う Bootstrap表示ユーティリティーを組み合わせて特定画面サイズでコンテンツを 表示・非表示します。 ```html
携帯電話向けコンテンツ
デスクトップ向けコンテンツ
``` エレメントの**HTML classes**フィールド (設定の**General**セクション) に このクラスを追加してレスポンシブ表示を制御します。