ArcGIS Instant Apps では、カスケード スタイル シート (CSS) のカスタマイズがサポートされているため、既存の構成設定では行えないカスタマイズされた変更を Web アプリの外観に加えることができます。 Web アプリの外観のさまざまな要素 (テキスト サイズ、フォーカス インジケーターの色など) を変更できます。
注意:
CSS によるカスタマイズは可能ですが、Web アプリの外観をカスタマイズするには、Instant Apps で提供されているすべての構成を使用することをおすすめします。 すべての CSS クラスが既存のエレメントを変更できるわけではありません。
ArcGIS Instant Apps テンプレートは Calcite Design System を使用して構築されており、一連の設計ガイドラインと再利用可能なコンポーネントによって、直感的で一貫したインターフェイスを作成できます。 アプリのスタイルは、Calcite 変数をオーバーライドしてアプリの外観を変更することでカスタマイズできます。
CSS カスタマイズ オプションの使用
Web アプリの構成を終了したら、CSS を使用したカスタマイズを行えるようになります。
注意:
一部のテンプレートはカスタム CSS をサポートしていません。 詳細については、アプリ ツール比較表 (PDF) をご参照くださいカスタム CSS をサポートするテンプレートを確認できます。
CSS カスタマイズ オプションを使用するには、次の手順を実行します:
- サイド パネルで [高速] モードを無効にします。確認プロンプトが表示されたら [続行] をクリックします。
- [設定の検索] をクリックし、[カスタム CSS] を検索します。
[テーマとレイアウト] 設定が表示されます。
- [カスタム CSS] セクションの [編集] をクリックします。
[カスタム CSS] ウィンドウが表示されます。
- アプリのさまざまなエレメントをオーバーライドする CSS クラスを指定します。
- [閉じる] をクリックしてカスタム CSS を適用します。
これで、変更内容が表示されます。
- カスタマイズに問題がなければ、[公開] をクリックして、カスタマイズされたアプリを配置します。
注意:
Instant Apps のソース テンプレートの更新がアプリのカスタム CSS に影響を及ぼす可能性があるため、製品リリースごとにアプリをテストします。
CSS クラス
以下のセクションでは、アプリに独自のスタイルと書式を設定するために使用される CSS クラスの例を示します。
フォント サイズのカスタマイズ
テキストのフォント サイズを変更する CSS クラスを記述できます。
以下の CSS オーバーライド ルールでは、サイドバー Instant Apps テンプレートのサイドバー ヘッダーのフォント サイズをカスタマイズできます:
h3.esri-widget__heading {
font-size: var(--calcite-font-size-0);
}現在、ヘッダー テキストは 0 フォント サイズで表示されています。これは、1 レムまたは 16 ピクセルです。
フォーカス インジケーターの色のカスタマイズ
アプリの対話的エレメントのフォーカス インジケーターの色を変更できる CSS クラスを記述できます。これは、選択したエレメントを囲むアウトラインとして表示されます。
フォーカス インジケーターの色を変更するには、次の CSS クラスを使用できます:
.calcite-mode-dark{
--calcite-color-focus:#FFFF00;
}このクラスは、対話的エレメントが選択されたときに、フォーカス色を 16 進数値 #FFFF00 (黄色) に変更します。
フォーカス インジケーターの色をカスタマイズすると、Web アプリのテーマ色とのコントラストを高め、視覚的な障害を抱えたユーザーのアクセシビリティーを向上させることができます。