Visualforce 開発者ガイド
jVisualforce ページへの SLDS の適用
Lightning Design System (SLDS) を使用して、Salesforce アプリケーションのデザインに一致する Visualforce ページを構築できます。SLDS を使用するには、コードにいくつかの調整を加える必要があり、いくつかの留意事項があります。ほとんどの場合で、SLDS を使用する Visualforce コードは問題なく機能します。
Visualforce ページでの SLDS の使用
SLDS を使用するたびに、<apex:slds /> をページに追加し、コードを範囲指定クラス (<div class="slds-scope">...</div>) でラップします。
1<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
2
3 <!-- Import the Design System style sheet -->
4 <apex:slds />
5
6 <!-- REQUIRED SLDS WRAPPER -->
7 <div class="slds-scope">モバイル用の Visualforce 開発で説明してきた多くのベストプラクティスをここでも適用します。<apex:pageblock> や <apex:inputField> などの Apex タグの使用は SLDS ではまだサポートされていません。
SLDS クラスの命名
SLDS は、Block-Element-Modifier (ブロック-要素-修飾子) 構文 (BEM) と呼ばれる標準のクラス命名規則を使用して、クラス名のあいまいさを低減します。
- Block (ブロック) は概要レベルのコンポーネントを表します (car など)。
- Element (要素) はコンポーネントの子孫を表します (car__door)。
- Modifier (修飾子) はブロックまたは要素の特定の状態またはバリエーションを表します (car__door--red)。