利用可能なCSSクラス
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
以下の表は、SXAがPagesエディタ体験で使用する利用可能なCSSクラスを示しています。 コンポーネントの見た目や操作感を設定する 際に、このリストを参照できます。
|
カテゴリー |
スタイル名 |
CSSクラス |
コンポーネントへの装着許可 | |
|---|---|---|---|---|
|
Spacing |
へこみの天板 |
indent-top |
アイコン-ボタン-グループ-チェック | |
|
Spacing |
凹み底 |
indent-bottom |
アイコン-ボタン-グループ-チェック | |
|
Spacing |
へこみ側 |
indent |
アイコン-ボタン-グループ-チェック | |
|
Add highlight |
左側にハイライト |
highlighted-left |
アイコン-ボタン-グループ-ラジオ |
Rich Text、Page Content、Promo、Container、Row Splitter |
|
Add highlight |
右側にハイライト |
highlighted-right |
アイコン-ボタン-グループ-ラジオ |
Rich Text、Page Content、Promo、Container、Row Splitter |
|
Add highlight |
ハイライトされたトップ |
highlighted-top |
アイコン-ボタン-グループ-ラジオ |
Rich Text、Page Content、Promo、Container、Row Splitter |
|
Add highlight |
下部にハイライト |
highlighted-bottom |
アイコン-ボタン-グループ-ラジオ |
Rich Text、Page Content、Promo、Container、Row Splitter |
|
Content alignment |
コンテンツを左にアラインする |
position-left |
アイコン-ボタン-グループ-ラジオ | |
|
Content alignment |
コンテンツセンターの整合 |
position-center |
アイコン-ボタン-グループ-ラジオ | |
|
Content alignment |
コンテンツを正しく調整する |
position-right |
アイコン-ボタン-グループ-ラジオ | |
|
Background color |
クリーンな背景 |
container-clean-background |
ドロップリスト |
Container、Row Splitter、Column Splitter |
|
Background color |
色彩の背景 |
container-color-background |
ドロップリスト |
Container、Row Splitter、Column Splitter |
|
Background color |
暗い背景 |
container-dark-background |
ドロップリスト |
Container、Row Splitter、Column Splitter |
|
Background color |
灰色の背景 |
container-gray-background |
ドロップリスト |
Container、Row Splitter、Column Splitter |
|
Background layout |
カバーの背景 |
cover-background |
ドロップリスト |
Container |
|
Background layout |
修正の背景 |
fix-background |
ドロップリスト |
Container |
|
Background layout |
視差背景 |
parallax-background |
ドロップリスト |
Container |
|
Navigation |
Main navigation - 垂直ドロップダウン |
navigation main navigation-main-vertical |
ドロップリスト |
ナビゲーション |
|
Navigation |
Main navigation - 水平ドロップダウン |
navigation main navigation-main-horizontal |
ドロップリスト |
ナビゲーション |
|
Navigation |
モバイルナビゲーション |
navigation-mobile |
ドロップリスト |
ナビゲーション |
|
Navigation |
サイドバーナビゲーション |
navigation-sidebar |
ドロップリスト |
ナビゲーション |
|
Navigation |
サイトマップナビゲーション |
sitemap-navigation |
ドロップリスト |
ナビゲーション |
|
Navigation |
ビッグ/ファットナビゲーション |
navigation-fat |
ドロップリスト |
ナビゲーション |
|
Link list |
リスト・バーティカル |
list-vertical |
チェックボックスフォルダー |
Link List |
|
Rich text |
カスタムの弾条書き |
rich-text-lists |
チェックボックスフォルダー |
Rich Text、ページ内容 |
|
Promo |
プロモヒーロー |
promo-hero |
チェックボックスフォルダー |
プロモーション |
|
Promo |
プロモシャドウ |
promo-shadow |
チェックボックスフォルダー |
プロモーション |
|
Promo |
リンクを下部に添付してください |
absolute-bottom-link |
チェックボックスフォルダー |
プロモーション |
|
Image |
Imageのデフォルトサイズ |
image-default-size |
チェックボックスフォルダー |
Image、プロモーション |
|
Common |
国境はない |
promoted-boxed |
チェックボックスフォルダー |
Rich Text、ページコンテンツ、プロモーション |
|
Common |
箱入り |
boxed |
チェックボックスフォルダー |
Row Splitter、Column Splitter、Container、Page Content、Title |
|
Common |
Buttonリンクスタイル |
link-button |
チェックボックスフォルダー |
Link、Promo、ファイルリスト |
|
Container |
全幅 |
fullwidth-container |
チェックボックスフォルダー |
Container |
|
Container |
インデントインナー |
indent-inner |
チェックボックスフォルダー |
Container |
|
Container |
境界線 |
sxa-bordered |
チェックボックスフォルダー |
Container |