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

Lightning Design System の使用

<apex:slds> 要素を使用して Visualforce ページに Lightning Design System を組み込み、Lightning Experience のスタイルに合わせます。このコンポーネントの使用は、Lightning Design System を静的リソースとしてアップロードして Visualforce ページで使用することに代わる合理的な方法です。

Lightning Design System を静的リソースとしてアップロードする必要はありません。そのため、ページの構文をシンプルに保ち、250 MB の静的リソース制限を超えずに済みます。Visualforce ページで Lightning Design System スタイルシートを使用するには、ページマークアップの任意の場所に <apex:slds /> を追加します。

Visualforce ページで Lightning Design System スタイルシートを使用する手順は、次のとおりです。

ページマークアップの任意の場所に <apex:slds /> を追加します。
<apex:page> の applyBodyTag 属性または applyHtmlTag 属性を false に設定します。
任意の SLDS スタイルまたはアセット親要素についての slds-scope クラスを含めます。

Visualforce タグは、slds-scope 要素でラップしないでください。

警告

一般に、Lightning Design System はすでに範囲が指定されています。ただし、applyBodyTag または applyHtmlTag を false に設定した場合、範囲指定クラス slds-scope を含める必要があります。範囲指定クラス内のマークアップで、Lightning Design System のスタイルとアセットを参照できます。

Lightning Design System のアセット (SVG アイコンや画像など) を参照するには、URLFOR() 数式関数と $Asset グローバル変数を使用します。たとえば、次のマークアップを使用して、SVG 取引先アイコンを参照します。

SVG アイコンを使用するには、xmlns="http://www.w3.org/2000/svg" と xmlns:xlink="http://www.w3.org/1999/xlink" を html タグ内で使用して、必要な XML 名前空間を追加します。

Salesforce のサイドバー、ヘッダー、または組み込みのスタイルシートを使用している場合、属性を html に追加できません。SVG アイコンは、showHeader、standardStylesheets、および sidebar が false に設定されている場合のみサポートされます。

メモ

例

次のマークアップは、簡単な取引先詳細ページを表示します。このページでは、Lightning Design System のカード要素および標準取引先コントローラを使用します。このページには、取引先の PNG アイコンも表示されます。

レコード ID を使用してデータを読み込まない限り、このページにデータはありません。Lightning Design System は、Visualforce ページにデータを取り込むコンポーネント (<apex:pageBlock>、<apex:detail> など) をサポートしません。Lightning Design System を使用してページから Salesforce データにアクセスするには、リモートオブジェクト、JavaScript Remoting、または REST API を代わりに使用してください。

Lightning Design System のスタイル設定のその他の例については、Salesforce Lightning Design System に関するリファレンスサイトを参照し、詳細については、Trailhead を参照してください。

Visualforce 開発者ガイド

Lightning Design System の使用

例