Lightning Design System を使用してコンポーネントのスタイルを設定する

Salesforce Lightning Design System (SLDS) は、Lightning Experience と一貫性があるデザインを提供する CSS フレームワークです。SLDS スタイルを使用すれば、標準のスタイルをリバースエンジニアリングしなくても Salesforce と一貫性のある UI をカスタム Lightning Web コンポーネントに設定できます。これは特に、Lightning Experience および Salesforce モバイルアプリケーションで実行される Lightning コンポーネントとともに機能します。

対話型の基本コンポーネントの例については、「コンポーネントの参照」を参照してください。

lightning 名前空間の基本コンポーネントは、Lightning Design System スタイル設定を使用します。多くの基本コンポーネントは、SLDS コンポーネントブループリントから作成されます。ブループリントは、フレームワークに依存しないアクセス可能な HTML および CSS です。たとえば、lightning-accordion や lightning-card、lightning-tree などのコンポーネントがあります。

基本コンポーネントには class 属性が備えられているため、SLDS ユーティリティクラスまたはカスタムクラスをコンポーネントの外部要素に追加できます。たとえば、余白ユーティリティクラスを lightning-button 基本コンポーネントに適用するには、class="slds-m-left_medium" を使用します。ここでは、ボタン間の余白を増やすために使用されています。

一部のコンポーネントには、設計バリエーションを簡単に適用できるように variant 属性が用意されています。

コンポーネントのスタイル設定では、今後のリリースで変更される可能性があるため、Lightning 基本コンポーネントの内部マークアップまたは CSS クラスに依存しないようにしてください。文書化されたスタイル設定フックを使用する場合を除き、基本コンポーネントのスタイル設定の上書きはサポートされません。「コンポーネントのスタイル設定のアンチパターン」を参照してください。

Lightning 基本コンポーネントのスタイルを変更するには、最初に「Component Reference (コンポーネントリファレンス)」でコンポーネントに設計バリエーションがあるかどうかを確認します。コンポーネントのスペーシング (位置揃え、パディング、余白、タイポグラフィなど) を変更するには、Lightning Design System ユーティリティクラスを使用します。

設計バリエーションやユーティリティクラスで要件を満たすことができない場合は、スタイル設定フックを検討してください。詳細は、「Lightning Design System スタイル設定フックを使用したコンポーネントのスタイル設定」を参照してください。

スタイル設定フックが使用事例に適していない場合、アクセス権が global に設定されている設計トークンを試します。

Winter '24 以降、Web コンテンツアクセシビリティのガイドライン (WCAG

Content Accessibility Guidelines) 2.1 の色のコントラスト基準に合わせるために、できるだけ設計トークンではなく、色のグローバルスタイル設定フックを使用することをお勧めしています。Lightning Design System の「Migration Guide (移行ガイド)」を参照してください。

グローバル設計トークンを使用してもうまくいかない場合は、SLDS クラスを上書きするのではなくカスタム CSS クラスを作成します。クラス名は変更される可能性があるため、所有していないクラス名を参照先とするのではなく、クラスを作成します。たとえば、.slds-input は基本コンポーネントの内部マークアップに含まれるため対象としません。代わりに、カスタムクラスを作成して class 属性に渡します。

Lightning Experience または Salesforce モバイルアプリケーションに存在するカスタムコンポーネントでは、import ステートメントや静的リソースなしで Lightning Design System を使用することができます。Lightning Design System CSS クラスは、HTML 要素に単純に割り当てます。

スタイル設定を段階的に適用します。

CSS のベストプラクティスに従い、セレクタをオーバーロードしないようにします。

Lightning Web コンポーネントを作成するには、小さな lightning 基本コンポーネントを組み合わせて、より複雑なカスタムコンポーネントを構成します。ボタンやメディアオブジェクトなどのコンポーネントから設計を作成するようにします。レイアウトにグリッドクラスや間隔クラスなどのユーティリティを使用します。コンポーネントに新しい機能を追加するときは、Lightning Design System を検索し、クラスをテンプレートに適用する有効なパターンがないか調べます。

たとえば、ユーティリティクラスを使用して、ヘッダーサイズを変更するか、パディングを div コンテナに追加します。

使用事例に合う基本コンポーネントが見つからない場合は、最も近い SLDS ブループリントを見つけて、独自のコンポーネントを作成します。「SLDS ブループリントからのコンポーネントの作成」を参照してください。

関連トピック