利用可能なCSSクラス
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
以下の表は、Horizonエディタ体験でSXAが使用する利用可能なCSSクラスを示しています。 コンポーネントの見た目や操作 感を設定する際に、このリストを参照できます。
カテゴリー
スタイル名
CSSクラス
コンポーネントへの装着許可
間隔
へこみの天板
indent-top
アイコン-ボタン-グループ-チェック
間隔
凹み底
indent-bottom
アイコン-ボタン-グループ-チェック
間隔
へこみ側
indent
アイコン-ボタン-グループ-チェック
ハイライトを追加
左側にハイライト
highlighted-left
アイコン-ボタン-グループ-ラジオ
リッチテキスト、ページコンテンツ、リッチテキスト(再利用可能)、プレイリスト、プロモーション、コンテナ、スプリッター(行)
ハイライトを追加
右側にハイライト
highlighted-right
アイコン-ボタン-グループ-ラジオ
リッチテキスト、ページコンテンツ、リッチテキスト(再利用可能)、プレイリスト、プロモーション、コンテナ、スプリッター(行)
ハイライトを追加
ハイライトされたトップ
highlighted-top
アイコン-ボタン-グループ-ラジオ
リッチテキスト、ページコンテンツ、リッチテキスト(再利用可能)、プレイリスト、プロモーション、コンテナ、スプリッター(行)
ハイライトを追加
下部にハイライト
highlighted-bottom
アイコン-ボタン-グループ-ラジオ
リッチテキスト、ページコンテンツ、リッチテキスト(再利用可能)、プレイリスト、プロモーション、コンテナ、スプリッター(行)
内容の整合性
コンテンツを左にアラインする
position-left
アイコン-ボタン-グループ-ラジオ
内容の整合性
コンテンツセンターの整合
position-center
アイコン-ボタン-グループ-ラジオ
内容の整合性
コンテンツを正しく調整する
position-right
アイコン-ボタン-グループ-ラジオ
背景色
クリーンな背景
container-clean-background
ドロップリスト
コンテナ、スプリッター(行)、スプリッター(列)
背景色
色彩の背景
container-color-background
ドロップリスト
コンテナ、スプリッター(行)、スプリッター(列)
背景色
暗い背景
container-dark-background
ドロップリスト
コンテナ、スプリッター(行)、スプリッター(列)
背景色
灰色の背景
container-gray-background
ドロップリスト
コンテナ、スプリッター(行)、スプリッター(列)
背景レイアウト
カバーの背景
cover-background
ドロップリスト
コンテナ
背景レイアウト
修正の背景
fix-background
ドロップリスト
コンテナ
背景レイアウト
視差背景
parallax-background
ドロップリスト
コンテナ
フリップ遷移
トランジション - フェード
flip-fade
ドロップリスト
フリップ
フリップ遷移
トランジション - スライド
flip-slide-top
ドロップリスト
フリップ
フリップ遷移
垂直回転
flip-vertical
ドロップリスト
フリップ
ナビゲーション
メインナビゲーション - 垂直ドロップダウン
navigation main navigation-main-vertical
ドロップリスト
ナビゲーション
ナビゲーション
メインナビゲーション - 水平ドロップダウン
navigation main navigation-main-horizontal
ドロップリスト
ナビゲーション
ナビゲーション
モバイルナビゲーション
navigation-mobile
ドロップリスト
ナビゲーション
ナビゲーション
サイドバーナビゲーション
navigation-sidebar
ドロップリスト
ナビゲーション
ナビゲーション
サイトマップナビゲーション
サイトマップナビゲーション
ドロップリスト
ナビゲーション
ナビゲーション
ビッグ/ファットナビゲーション
navigation-fat
ドロップリスト
ナビゲーション
タブ
左側のタブ
tabs-vertical
アイコン-ボタン-グループ-ラジオ
タブ
タブ
右側のタブ
tabs-vertical tabs-vertical-right
アイコン-ボタン-グループ-ラジオ
タブ
タブ
下部のタブ
tabs-bottom
アイコン-ボタン-グループ-ラジオ
タブ
アコーディオン
水平アコーディオン
accordion-horizontal
チェックボックスフォルダー
アコーディオン
プレイリスト
横向きプレイリスト
playlist-horizontal
チェックボックスフォルダー
プレイリスト
パンくず
三角形分離器
triangle-separator
チェックボックスフォルダー
パンくず
パンくず
中間アイテムを隠す
breadcrumb-hide
チェックボックスフォルダー
パンくず
カルーセル
全幅画像
image-full-size
チェックボックスフォルダー
カルーセル
ディバイダー
白いスペースディバイダー
white-space-divider
チェックボックスフォルダー
ディバイダー
フィード
フィードグリッド
feed-grid
チェックボックスフォルダー
フィード
ファイル一覧
水平ファイルリスト
file-list-horizontal
チェックボックスフォルダー
ファイル一覧
ホバーでフリップ
ホバリング時の遷移
flip-hover
チェックボックスフォルダー
フリップ
言語セレクター
スライドアップ
language-selector-item-container-slideup
チェックボックスフォルダー
言語選択器
リンクリスト
リスト・バーティカル
list-vertical
チェックボックスフォルダー
リンクリスト
リッチテキスト
カスタムの弾条書き
rich-text-lists
チェックボックスフォルダー
リッチテキスト(再利用可能)、リッチテキスト、ページコンテンツ
プロモーション
プロモヒーロー
promo-hero
チェックボックスフォルダー
プロモーション
プロモーション
プロモシャドウ
promo-shadow
チェックボックスフォルダー
プロモーション
プロモーション
リンクを下部に添付してください
absolute-bottom-link
チェックボックスフォルダー
プロモーション
プロモーション
他のプロモと同じ高さ
equal
チェックボックスフォルダー
プロモーション
タブが溢れます
タブが大きすぎる場合はスクロール可能です
tabs-scrollable
チェックボックスフォルダー
タブ
Search
ファセット・サマリー・ホリザンタル
facet-summary-horizontal
チェックボックスフォルダー
ファセット概要
Search
ルーペの検索ボタン
loupe-search-btn
チェックボックスフォルダー
Searchボックス
画像
画像のデフォルトサイズ
image-default-size
チェックボックスフォルダー
画像、画像(再利用可能)、プロモーション
共通
オーバーレイでリンクを開ける
overlay-source
チェックボックスフォルダー
イベントリスト、Search results、タイトル、ページ内容、画像、画像(再利用可能)、リッチテキスト、リッチテキスト(再利用可能)、リンク、プロモーション、メディアリンク、ファイルリスト、リンクリスト、ページリスト、アコーディオン、カルーセル、タブ、フリップ、トグル、プレーンHTML、プレーンHTML(再利用可能)、フィールドエディタ、コンテナ
共通
国境はない
promoted-boxed
チェックボックスフォルダー
リッチテキスト(再利用可能)、リッチテキスト、ページコンテンツ、プロモーション
共通
箱入り
boxed
チェックボックスフォルダー
スプリッター(列)、スプリッター(行)、コンテナ、ページ内容、タイトル
共通
ボタンリンクスタイル
link-button
チェックボックスフォルダー
リンク、プロモーション、ファイルリスト
共通
均等な高さ
equalized-content
チェックボックスフォルダー
コンテナ、スプリッター(列)、スプリッター(行)
共通
境界線
sxa-bordered
チェックボックスフォルダー
コンテナ、スプリッター(列)、スプリッター(行)、カルーセル