概要

このページでは、エディターにおけるCSSの記述方法について記載します。

CSSの編集方法

KaizenPlatform UI エディターの画面左下にある、「CSS」タブをクリックすることで、CSSエディターを展開し、CSSの記述が行えます。

スタイルシートの実行順序

記述したスタイルシートは、エクスペリエンス対象ページに読み込まれているスタイルシートより後に読み込まれます。

そのため、既に設定されているスタイルを上書きするには、既存の記述よりも高い数値の詳細度でセレクタを利用するか (推奨)、!important キーワードを利用します。

セレクタの詳細度は以下のような基準で計算されます。

出典: Calculating a selector’s specificity

例えば、既存のスタイルで、以下の様に設定されていた場合、

.container { width: 950px }

UI エディターで以下のように要素名を追加して記述することで詳細度が＋１され、width プロパティを上書きすることができます。

body .container { width: 850px }