---
sourceDocument: Xanadu モバイルの構成とナビゲーション
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/xanadu/mobile

 Release :

    - xanadu

ft:locale :

    - ja-JP

ft:publication_title :

    - Xanadu モバイルの構成とナビゲーション

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - Platform


---

# 入力説明の色変数のサポート

# 入力説明の色変数のサポート {#ariaid-title1}

* リリースバージョン: Xanadu
* 
* 更新日 2024年08月01日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：4分

色変数を使用してモバイル入力の説明のテーマを変更する方法について説明します。

|-|-|
| 入力の \[ 説明 \] フィールドで色変数を使用して、テキストの色を制御します。 \[説明\] フィールドが <kbd class="ph userinput">HTML</kbd> として構成されている場合は、入力の \[説明\] フィールドで色変数を使用してテキストの色を制御します。 たとえば、 `#FF0000` のような色の 16 進値に加えて、 `--now-color-primary-0` などの色の変数を使用できます。使用可能な変数のリストについては、「 [モバイルのカラーテーマに関する考慮事項](https://servicenow-prod.fluidtopics.net/LrIr98uk7ZkBxnAiMRoxPg "モバイルアプリケーションで色を使用してユーザーエクスペリエンスを向上させる方法を学びます。環境に適した色を使用すると、ユーザーをアプリ経由でガイドし、重要な情報をすばやく識別するのに役立ちます。")」を参照してください。 入力の詳細については、「 [入力フォーム画面を構成する](https://servicenow-prod.fluidtopics.net/ntoIHRdKxUgXyzILe88yeQ "入力パラメーターを設定して、ユーザーがモバイルアプリのレコードリストを表示できるようにします。ユーザーはレコード名をタップするだけで、リストからレコードにアクセスできます。")」を参照してください。 |   |
[ ]

{#color-var-input-description__table_vwc_wg2_zvb}

## 入力説明カラーガイド {#color-var-input-description__section_vvh_wzp_1xb}

色変数は次のように分類されます。 設計ガイドラインを使用して、ユースケースに適した色変数を識別します。

アラートカラーパレット
:   アラートカラーパレットの色は、重要なステータス、状況、およびタスクを強調表示します。アラートの色は、装飾や整理のためではなく、特定の意味を伝えるために使用します。

グループ化されたカラーパレット
:   グループ化されたカラーパレットの色は、業種の色規則に従います。これらの色を使用して、色付きのアイテムが特定の業界または基幹業務に関連付けられていることを示します。各色の意味はコンテキストによって異なりますが、アプリ内では一貫している必要があります。
{#color-var-input-description__table_otd_c1q_1xb__entry__3}

| 色名 | 例 | カラー変数 |
|-|-|-|
| 重大 |   | モバイル変数 :   `alert--critical-0` Web 変数 :   `--now-color_alert--critical-0` |
| 高 |   | モバイル変数 :   `alert--high-0` Web 変数 :   `--now-color_alert--high-0` |
| 訓告 |   | モバイル変数 :   `alert--warning-0` Web 変数 :   `--now-color_alert--warning-0` |
| 中 |   | モバイル変数 :   `alert--moderate-0` Web 変数 :   `--now-color_alert--moderate-0` |
| 情報 |   | モバイル変数 :   `alert--info-0` Web 変数 :   `--now-color_alert--info-0` |
| 好意的 |   | モバイル変数 :   `alert--positive-0` Web 変数 :   `--now-color_alert--positive-0` |
| 低 |   | モバイル変数 :   `alert--low-0` Web 変数 :   `--now-color_alert--low-0` |
| 無効 | ![無効なアラートのカラースキーム]() | モバイル変数 :   `alert-disabled-background` Web 変数 :   `--now-color_background--secondary` |
| 重大 (代替) | ![重大アラートのカラースキーム (代替)]() | モバイル変数 :   `alert--critical-4` Web 変数 :   `--now-color_alert--critical-4` |
| 高 (代替) | ![高アラートのカラースキーム (交互)]() | モバイル変数 :   `alert--high-4` Web 変数 :   `--now-color_alert--high-4` |
| 警告 (代替) | ![警告アラートのカラースキーム (代替)]() | モバイル変数 :   `alert--warning-4` Web 変数 :   `--now-color_alert--warning-4` |
| 中 (代替) | ![中アラートのカラースキーム (代替)]() | モバイル変数 :   `alert--moderate-4` Web 変数 :   `--now-color_alert--moderate-4` |
| 情報 (代替) | ![情報アラートのカラースキーム (代替)]() | モバイル変数 :   `alert--info-4` Web 変数 :   `--now-color_alert--info-4` |
| 正 (代替) | ![正のアラートのカラースキーム (代替)]() | モバイル変数 :   `alert--positive-4` Web 変数 :   `--now-color_alert--positive-4` |
| 低 (代替) | ![低アラートのカラースキーム (代替)]() | モバイル変数 :   `alert--low-4` Web 変数 :   `--now-color_alert--low-4` |
| 無効 (代替) | ![無効なアラートのカラースキーム (代替)]() | モバイル変数 :   `alert-disabled-text` Web 変数 :   `--now-color_text--ターシャリ` |
[表 : 1. アラートカラーパレット]

{#color-var-input-description__table_otd_c1q_1xb} {#color-var-input-description__table_f5d_c1q_1xb__entry__3}

| 色名 | 例 | カラーバリエーション |
|-|-|-|
| 青 | ![青色のグループ化されたカラースキーム]() | Web 変数 :   `--now-color_grouped--blue-0` |
| 茶色 | ![茶色のグループ化されたカラースキーム]() | Web 変数 :   `--now-color_grouped--brown-0` |
| グレイ | ![グレーのグループ化されたカラースキーム]() | Web 変数 :   `--now-color_grouped--gray-0` |
| 緑 | ![緑のグループ化されたカラースキーム]() | Web 変数 :   `--now-color_grouped--green-0` |
| 緑黄 | ![緑黄のグループ化されたカラースキーム]() | Web 変数 :   `--now-color_grouped--green-yellow-0` |
| マゼンタ | ![マゼンタのグループ化されたカラースキーム]() | Web 変数 :   `--now-color_grouped--magenta-0` |
| オレンジ | ![オレンジ色のグループ化されたカラースキーム]() | Web 変数 :   `--now-color_grouped--orange-0` |
| ピンク | ![ピンクのグループ化されたカラースキーム]() | Web 変数 :   `--now-color_grouped--pink-0` |
| 紫 | ![紫のグループ化されたカラースキーム]() | Web 変数 :   `--now-color_grouped--紫-0` |
| 青緑 | ![青緑色のグループ化されたカラースキーム]() | Web 変数 :   `--now-color_grouped--teal-0` |
| 黄 | ![黄色のグループ化されたカラースキーム]() | Web 変数 :   `--now-color_grouped--yellow-0` |
| 青 (代替) | ![青色のグループ化された配色 (交互)]() | Web 変数 :   `--now-color_grouped--blue-4` |
| 茶色 (代替) | ![茶色のグループ化された配色 (交互)]() | Web 変数 :   `--now-color_grouped--brown-4` |
| グレー (代替) | ![グレーのグループ化された配色 (代替)]() | Web 変数 :   `--now-color_grouped--gray-4` |
| 緑 (代替) | ![緑のグループ化された配色 (交互)]() | Web 変数 :   `--now-color_grouped--green-4` |
| 緑黄 (交互) | ![緑黄グループ化カラースキーム (交互)]() | Web 変数 :   `--now-color_grouped--green-yellow-4` |
| マゼンタ (代替) | ![マゼンタのグループ化されたカラースキーム (交互)]() | Web 変数 :   `--now-color_grouped--magenta-4` |
| オレンジ (代替) | ![オレンジ色のグループ化されたカラースキーム (代替)]() | Web 変数 :   `--now-color_grouped--orange-4` |
| ピンク (代替) | ![ピンクのグループ化されたカラースキーム (代替)]() | Web 変数 :   `--now-color_grouped--pink-4` |
| 紫 (代替) | ![紫のグループ化されたカラースキーム (交互)]() | Web 変数 :   `--now-color_grouped--紫-4` |
| 青緑 (代替) | ![青緑色のグループ化されたカラースキーム (交互)]() | Web 変数 :   `--now-color_grouped--teal-4` |
| 黄 (代替) | ![黄色のグループ化されたカラースキーム (代替)]() | Web 変数 :   `--now-color_grouped--yellow-4` |
[表 : 2. グループ化されたカラーパレット]

{#color-var-input-description__table_f5d_c1q_1xb}