フォローする

スタイルシートを使ったデザイン案の作成

このページについて

このページでは、スタイルシートを使ってデザイン案を作成する方法について説明します。

スタイルシートを編集

Kaizen Platform UI エディターの画面左下にある、StyleSheet タブをクリックすることで、スタイルシートエディターを展開し、スタイルシートを記述を行います。

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

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

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

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

記述方法加算される詳細度
全称セレクタ * 0
要素名 li 1
擬似要素 :first-line 1
クラス .class 10
疑似クラス :hover[href] 10
ID #id 100

出典: Calculating a selector’s specificity

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

.container { width: 950px }

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

body .container { width: 850px }
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。