カスタムスタイルクラスとルールの作成

スタイルクラスのルールを UI ビルダー で使用して、CSS クラスを参照してカスタムの表示スタイルを UI 要素に適用します。

始める前に

必要なロール：admin

このタスクについて

インラインスタイルを記述せずにフィールド、コンテナ、ボタン、およびその他のインターフェイスコンポーネントの外観を制御することで、UI をよりすっきりさせ、一貫性を保ちやすくします。すべてのスタイルクラスとルールは、ページ上の任意のコンテナまたはコンポーネントに適用できます。CSS スタイルの詳細については、 ServiceNow Developer サイト および ServiceNow コミュニティサイトを参照してください。

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. ページを作成するか、開きます。
4. コンポーネントをページに追加します。
5. 構成パネルで [スタイル] タブを選択します。
6. [スタイルクラス] フィールドの横にある [...] アイコンを選択します。
   [ページクラスとルール (Page classes and rules)] ポップアップが表示されます。
7. オプション: [ + クラスを追加] を選択します。
   1. [ スタイルクラス名 ] フィールドに名前を入力します。
   2. コンポーネントに適用する CSS スタイルを指定します。
   3. [Apply (適用)] を選択します。
8. オプション: [ + ルールを追加] を選択します。
   1. [ スタイルルール名] フィールドに名前を入力します。
   2. コンポーネントに適用する CSS ルールを指定します。
   3. [Apply (適用)] を選択します。
9. [ ページクラスとルール (Page classes and rules )] ポップアップを閉じます。
10. [ スタイルクラス] フィールドを選択します。
11. スタイルクラスまたはスタイルルールをリストから選択します。
12. [Save (保存)] を選択します。
13. [ プレビュー] を選択して、適用されたスタイルクラスまたはスタイルルールをテストします。