この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

アプリケーションでの Salesforce Lightning Design System の使用

Salesforce Lightning Design System では、Lightning Experience と一貫性のあるデザインを作成できます。Lightning Design System スタイルを使用すれば、標準のスタイルをリバースエンジニアリングしなくても Salesforce と一貫性のある UI をカスタムアプリケーションに設定できます。

独自アプリケーションで force:slds を拡張すると、自動的に Lightning Design System のスタイルとデザイントークンが使用されます。これが、Lightning Design System 機能強化が常に最新の状態になり、一貫性を維持する最も簡単な方法です。

force:slds を拡張する方法は、次のとおりです。

1<aura:application extends="force:slds">
2    <!-- customize your application here -->
3</aura:application>

静的リソースの使用

force:slds を拡張すると、CSS が変更されるたびに Lightning Design System スタイルのバージョンが自動的に更新されます。特定の Lightning Design System バージョンを使用する場合は、そのバージョンをダウンロードし、組織に静的リソースとして追加します。

最新の Lightning Design System スタイルが自動的に使用できるよう、force:slds を拡張することをお勧めします。特定の Lightning Design System バージョンを使用し続けると、Lightning Experience のその後のバージョンとの競合が発生するか、重複した CSS をダウンロードしてしまう可能性があります。

メモ

Lightning Design System の最新バージョンをダウンロードする手順は、次のとおりです。

Salesforce Lightning Design System のダウンロードページに移動します。[Design System Zip] セクションで、最新バージョンのダウンロードリンクをクリックします。
アーカイブを展開したり、ブラウザで自動的に展開することを許可したりしないでください。
メモ
[設定] から、[クイック検索] ボックスに「静的リソース」と入力し、[静的リソース] を選択します。
[新規] をクリックします。
リソースの [名前] を入力します。
Lightning Design System アーカイブの静的リソースの名前は SLDS### という形式にすることをお勧めします。### は Lightning Design System のバージョン番号 (例: SLDS203) です。こうすることで、複数のバージョンの Lightning Design System をインストールでき、コンポーネントのバージョンの利用状況を管理できます。
[ファイル] テキストボックスの横にある [参照] をクリックして、ダウンロードした Lightning Design System の zip ファイルに移動します。
[キャッシュコントロール] を [公開] に設定します (このオプションが表示された場合)。
[保存] をクリックします。

コンポーネントで Lightning Design System の静的バージョンを使用するには、<ltng:require/> を使用してその静的バージョンを含めます。以下に例を示します。

1<aura:component>
2    <ltng:require 
3        styles="{!$Resource.SLDS203 + '/assets/styles/lightning-design-system-ltng.css'}"/>
4</aura:component>

Lightning コンポーネント開発者ガイド

アプリケーションでの Salesforce Lightning Design System の使用

静的リソースの使用

関連項目: