CSSクラスリファレンス.

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

DXPR BuilderコンテンツはBootstrap 5クラスと独自の少数クラスを使います。このリファレンスでは使う可能性・CSS指定する可能性の高いものを挙げます。

カスタムクラスの追加

エレメントを選びます。
開くのはMore > Settingsです。
設定のGeneralセクションでHTML classesフィールドのクラスを選びます。任意のクラス名を入力するにはEdit as textをクリックし、クラスを半角スペースで区切ります。

Class	Description
`.container`	固定幅の中央寄せコンテナー
`.container-fluid`	全幅コンテナー

Class	Description
`.az-element`	多くのコンテンツエレメントの基本クラスです。ButtonとImageには付かないので、代わりに`.az-<type>`を指定します
`.az-<type>`	エレメントタイプごとに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表示ユーティリティーを組み合わせて特定画面サイズでコンテンツを表示・非表示します。

<!-- 携帯電話でのみ表示 -->
<div class="d-block d-md-none">携帯電話向けコンテンツ</div>

<!-- デスクトップでのみ表示 -->
<div class="d-none d-md-block">デスクトップ向けコンテンツ</div>

エレメントのHTML classesフィールド (設定のGeneralセクション) にこのクラスを追加してレスポンシブ表示を制御します。