コンポーネントのデフォルトの外観を変更する

コンポーネントとラッパーのスタイルを設定して、デフォルトの外観を変更します。

このビデオでは、次の手順を実行する方法を紹介します。

始める前に

必要なロール：ui_builder_admin

このタスクについて

このタスクでは、コンポーネントとコンポーネントを含むラッパー (本文、列レイアウト、列など) にスタイルを追加する方法について説明します。コンテンツツリーでコンポーネントを選択してコンポーネントのスタイリングをカスタマイズするか、コンポーネントをラッパー内に配置して複数のコンポーネントにスタイルを適用します。

エクスペリエンス全体にスタイリングを追加する方法の詳細については、「UI ビルダーエクスペリエンスの表示スタイルの管理」を参照してください。

このタスクは、Zurich で導入された新しいレイアウトシステムに適用されます。ページで古いレイアウトシステムを使用している場合は、詳細について「古いレイアウトシステムを使用したコンポーネントへのスタイリングの追加」を参照してください。

注:

ページにコンポーネントを追加して構成すると、ステージに作業内容が表示されます。変更を加えても更新がステージにロードされない場合は、[メニューを開く] アイコンを選択し、[開発者] > [ステージをリロード (Reload Stage)]を選択します。ステージをリロードすると変更内容が表示されますが、保存はされません。作業内容を保存するには、右上の [保存] を選択します。

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. ページまたはページバリアントを開くかまたは作成します。
   UI ビルダーでページを作成する方法の詳細については、「UI ビルダーでページを作成する」を参照してください。
4. コンテンツパネルで、スタイリングを追加するコンポーネントまたはラッパー (本文、列レイアウト、列など) を選択します。
5. 本文またはコンポーネントの場合は、構成パネルで [スタイル] タブを選択します。
   
6. [スタイル] タブの視覚的表現を使用して、ページの外観に最適なものを決定します。

   アクセシビリティ (列レイアウトと列)

   ARIA リージョン名、ARIA リージョン見出しレベル、ARIA ロール、ARIA 見出しの包含などのアクセシビリティ設定を指定します。詳細については、developer.servicenow.com の ARIA ドキュメントを参照してください。

   配置 (列とコンポーネント)

   列の場合、列内のコンポーネントをグループとして整列する方法を定義します。コンポーネントの場合、列や列レイアウトなど、親レイアウト要素内でのコンポーネントの配置方法を定義します。

   背景 (本文、列レイアウト、列、およびコンポーネント)

   レイアウト要素の背景色を設定します。カラーピッカーの [マイカラー] タブから色を選択します。ここには、使用可能な色がグリッドまたはリストで表示されます。または、[カスタム] タブを使用して、HEX、RGB、または HSL で任意の色を指定します。

   

   境界線 (列レイアウト、列、およびコンポーネント)

   コンテンツの周囲に境界線を追加します。この境界線は、余白のすぐ内側とパディングのすぐ外側に配置されます。境界線の太さ、タイプ、色、およびコーナー形状を指定します。コンポーネントの場合、境界線にカスタム CSS を使用するオプションがあります。

   

   レイアウト (本文、列レイアウト、列、およびコンポーネント)

   本文と列の場合は、方向、配置、およびコンテンツの両端揃えを指定します。列レイアウトの場合は、列数と列ギャップ (列間のスペース) を指定します。カードベースコンテナなどの一部のコンポーネントでは、[ CSS を編集] を選択して、コンテナレイヤーとコンテナ内のコンポーネントを制御する内部レイヤーに特定の CSS スタイルを適用します。

   

   シャドー (列レイアウト、列、およびコンポーネント)

   コンテンツの周囲にシャドー効果を追加します。カスタム CSS を使用するオプションがあります。

   サイジング (コンポーネント)

   該当するコンポーネントについて、コンポーネントのデフォルト、最小、最大の高さと幅を設定します (px、%、em、rem、またはカスタム値)。この値は、ユーザーがブラウザーウィンドウのサイズを変更した際に適用されます。

   

   スペース (本文、列レイアウト、およびコンポーネント)

   マージンは、本文、列レイアウト、またはコンポーネントのすぐ内側のスペースのサイズを設定します。パディングは、本文、列レイアウト、またはコンポーネントのすぐ外側のスペースのサイズを設定します。4 つのサイドのすべてに同じサイズを設定するには、[マージン] または [パディング] を選択します。

   

   現在の設定を選択してからオプションを選択することで、各マージンまたはパディングのサイドのサイズを設定できます。

   

7. オプション: 本文およびコンポーネントの場合、CSS コードを編集するには、[スタイル] タブの下部にある [CSS の表示と編集] リンクを選択します。
   [スタイル] タブに CSS スタイルコードエディターが表示されます。最も一般的に使用される CSS プロパティは次のとおりです。

   • background-color
   • background-image
   • border-style
   • border-width
   • border-color
   • border-radius
   • box-shadow
   • height
   • min-height
   • max-height
   • margin
   • overflow
   • padding
   • width
   • min-width
   • max-width
   • z-index

   

   重要:

   一部のコンポーネントには、UI ビルダー の CSS で上書きできないビルトインのスタイリング構成が含まれています。これらのスタイル設定をオーバーライドする方法については、「UI ビルダーエクスペリエンスの表示スタイルの管理」を参照してください。
8. メインヘッダーで、[保存] を選択して変更を保存します。

古いレイアウトシステムを使用したコンポーネントへのスタイリングの追加

コンポーネントの CSS スタイルを設定して、デフォルトの外観を変更します。

始める前に

必要なロール：ui_builder_admin

このタスクについて

このタスクでは、コンポーネントを含むラッパーにスタイルを追加する方法について説明します。通常は、コンポーネントにスタイルを直接適用するのではなく、この方法をお勧めします。スタイルを定義するコンポーネントがコンテナコンポーネント内に配置され、コンポーネントがラッパーに配置されていることを確認します。コンポーネントのラッパーはコンテンツ階層内のコンポーネントより 1 レベル高く、デフォルトでは「メイン」というラベルが付けられています。

ページ全体にスタイリングを追加するには、ページのラッパーで標準ベースの CSS を使用できます。エクスペリエンス全体にスタイリングを追加する方法の詳細については、「UI ビルダーエクスペリエンスの表示スタイルの管理」を参照してください。

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. ページまたはページバリアントを開くかまたは作成します。
   UI ビルダーでページを作成する方法の詳細については、「UI ビルダーでページを作成する」を参照してください。

   注:

   コンポーネントにスタイルを追加する前に、コンポーネントをコンテナに配置する必要があります。
4. スタイルを追加するコンポーネントを保持するコンテナを選択します。
   通常、コンテナはコンテンツツリー内のコンポーネントよりも 1 つ上のレベルにあります。
   構成パネルに [スタイル] タブが表示されます。
5. [CSS スタイル] ウィンドウで、標準ベースの CSS プロパティと値を入力します。
   次の CSS プロパティは、コンテナ内のコンポーネントにスタイルを適用するために最も一般的に使用されます。

   • background-color
   • background-image
   • border-style
   • border-width
   • border-color
   • border-radius
   • box-shadow
   • height
   • min-height
   • max-height
   • margin
   • overflow
   • padding
   • width
   • min-width
   • max-width
   • z-index

   重要:

   一部のコンポーネントには、UI ビルダー の CSS で上書きできないビルトインのスタイリング構成が含まれています。これらのスタイル設定をオーバーライドする方法については、「UI ビルダーエクスペリエンスの表示スタイルの管理」を参照してください。
6. メインヘッダーで、[保存] を選択して変更を保存します。

   図 : 1. [スタイル構成] パネルでコンポーネントにスタイルを追加する