次の表は、SXA が Horizon エディターで使用する使用可能な CSS クラスを示しています。このリストは、編集担当者向けに コンポーネントのルック アンド フィールを設定する ときに参照することができます。

カテゴリー

スタイル名

CSS クラス

表示タイプ

使用できるコンポーネント

1 行目のインデント

indent-top

icon-button-group-check

最終行のインデント

indent-bottom

icon-button-group-check

サイドのインデント

indent

icon-button-group-check

ハイライトを追加

左側をハイライト表示

highlighted-left

icon-button-group-radio

リッチ テキスト、ページ コンテンツ、リッチ テキスト (再利用可能)、プレイリスト、プロモーション、コンテナー、スプリッター (行)

ハイライトを追加

右側をハイライト表示

highlighted-right

icon-button-group-radio

リッチ テキスト、ページ コンテンツ、リッチ テキスト (再利用可能)、プレイリスト、プロモーション、コンテナー、スプリッター (行)

ハイライトを追加

上部をハイライト表示

highlighted-top

icon-button-group-radio

リッチ テキスト、ページ コンテンツ、リッチ テキスト (再利用可能)、プレイリスト、プロモーション、コンテナー、スプリッター (行)

ハイライトを追加

下部をハイライト表示

highlighted-bottom

icon-button-group-radio

リッチ テキスト、ページ コンテンツ、リッチ テキスト (再利用可能)、プレイリスト、プロモーション、コンテナー、スプリッター (行)

コンテンツの調整

コンテンツを左揃えにする

position-left

icon-button-group-radio

コンテンツの調整

コンテンツを中央揃えにする

position-center

icon-button-group-radio

コンテンツの調整

コンテンツを右揃えにする

position-right

icon-button-group-radio

バックグラウンドを削除します

container-clean-background

droplist

コンテナー、スプリッター (行)、スプリッター (列)

カラー 背景

container-color-background

droplist

コンテナー、スプリッター (行)、スプリッター (列)

container-dark-background

droplist

コンテナー、スプリッター (行)、スプリッター (列)

グレー背景

container-gray-background

droplist

コンテナー、スプリッター (行)、スプリッター (列)

背景レイアウト

カバー背景

cover-background

droplist

コンテナー

背景レイアウト

バックグラウンドを修正します

fix-background

droplist

コンテナー

背景レイアウト

パララックス背景

parallax-background

droplist

コンテナー

トランジションを反転

トランジション - フェード

flip-fade

droplist

トランジションを反転

トランジション - スライド

flip-slide-top

droplist

トランジションを反転

垂直に回転

flip-vertical

droplist

ナビゲーション

メイン ナビゲーション - ドロップダウン (垂直)

navigation main navigation-main-vertical

droplist

ナビゲーション

ナビゲーション

メインナビゲーション - ドロップダウン (水平)

navigation main navigation-main-horizontal

droplist

ナビゲーション

ナビゲーション

モバイル ナビゲーション

navigation-mobile

droplist

ナビゲーション

ナビゲーション

サイドバーナビゲーション

navigation-sidebar

droplist

ナビゲーション

ナビゲーション

サイトマップ ナビゲーション

sitemap-navigation

droplist

ナビゲーション

ナビゲーション

Big/Fat ナビゲーション

navigation-fat

droplist

ナビゲーション

tabs-vertical

icon-button-group-radio

tabs-vertical tabs-vertical-right

icon-button-group-radio

tabs-bottom

icon-button-group-radio

アコーディオン

横型アコーディオン

accordion-horizontal

checkbox-folder

アコーディオン

プレイリスト

横位置のプレイリスト

playlist-horizontal

checkbox-folder

プレイリスト

階層リンク

トライアングル セパレータ

triangle-separator

checkbox-folder

階層リンク

階層リンク

中間アイテムを非表示にします

breadcrumb-hide

checkbox-folder

階層リンク

カルーセル

image-full-size

checkbox-folder

カルーセル

余白の仕切り

white-space-divider

checkbox-folder

フィード グリッド

feed-grid

checkbox-folder

ファイル リスト

水平ファイル リスト

file-list-horizontal

checkbox-folder

ファイル リスト

[ ホバー時に反転 ]

ホバーで遷移

flip-hover

checkbox-folder

言語セレクター

上にスライドします

language-selector-item-container-slideup

checkbox-folder

言語セレクター

リンク リスト

縦にリストする

list-vertical

checkbox-folder

リンク リスト

リッチテキスト

カスタムの箇条書き

rich-text-lists

checkbox-folder

リッチ テキスト (再利用可能)、リッチ テキスト、ページ コンテンツ

プロモ ヒーロー

promo-hero

checkbox-folder

プロモ シャドウ

promo-shadow

checkbox-folder

ボタンにリンクを貼ります

absolute-bottom-link

checkbox-folder

他のプロモと同じ高さ

equal

checkbox-folder

タブのオーバーフロー

タブが大きすぎる場合、スクロールできます

tabs-scrollable

checkbox-folder

ファセット要約（水平）

facet-summary-horizontal

checkbox-folder

ファセット要約

ルーペ検索ボタン

loupe-search-btn

checkbox-folder

検索ボックス

画像 デフォルト サイズ

image-default-size

checkbox-folder

画像、画像（再利用可能）、プロモ

オーバーレイでリンクを開く

overlay-source

checkbox-folder

イベント リスト、検索結果、タイトル、ページ コンテンツ、画像、画像（再利用可能）、リッチ テキスト、リッチ テキスト（再利用可能）、リンク、プロモ、メディア リンク、ファイル リスト、リンク リスト、ページ リスト、アコーディオン、カルーセル、タブ、反転、トグル、プレーン HTML、プレーン HTML（再利用可能）、フィールド エディタ、コンテナ

境界線なし

promoted-boxed

checkbox-folder

リッチ テキスト（再利用可能）、リッチ テキスト、ページ コンテンツ、プロモ

囲まれた状態

boxed

checkbox-folder

スプリッター (列)、スプリッター (行)、コンテナー、ページ コンテンツ、タイトル

ボタンのリンクスタイル

link-button

checkbox-folder

リンク、プロモーション、ファイル リスト

均等化された高さ

equalized-content

checkbox-folder

コンテナー、スプリッター (列)、スプリッター (行)

sxa-bordered

checkbox-folder

コンテナー、スプリッター (列)、スプリッター (行)、カルーセル