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

Lightning Design System の考慮事項

Lightning 基本コンポーネントには、Salesforce Lightning Design System のスタイル設定が標準で用意されていますが、要件に応じていくつかの CSS を記述することもできます。

スタンドアロンアプリケーションおよび Lightning Out など、Salesforce アプリケーションおよび Lightning Experience 外部のコンポーネントを使用している場合、force:slds を拡張して Lightning Design System のスタイル設定をコンポーネントに適用します。基本コンポーネントで Lightning Design System を使用するためのガイドラインをいくつか示します。

基本コンポーネントでのユーティリティクラスの使用

Lightning Design System ユーティリティクラスは、コンポーネントのビジュアルデザインの基本であり、位置揃え、グリッド、間隔、タイポグラフィなどの再利用を促進します。ほとんどの基本コンポーネントには class 属性が備えられているため、ユーティリティクラスまたはカスタムクラスをコンポーネントの外部要素に追加できます。たとえば、lightning:button にスペーシングのユーティリティクラスを適用できます。

1<lightning:button name="submit" label="Submit" class="slds-m-around_medium"/>

追加するクラスはコンポーネントに適用される他の基本クラスに追加され、以下のマークアップが生成されます。

1<button class="slds-button slds-button_neutral slds-m-around_medium"    
2        type="button" name="submit">Submit</button>

同様に、カスタムクラスを作成して class 属性に渡すことができます。

1<lightning:badge label="My badge" class="myCustomClass"/>

提供されている CSS のスキャフォールディングを超えて、詳細レベルで柔軟にコンポーネントをカスタマイズできます。独自の本文マークアップを作成できる lightning:card を見ていきましょう。本文マークアップで slds-p-horizontal_small または slds-card__body_inner クラスを適用して、本文の前後にパディングを追加できます。

1<!-- lightning:card example using slds-p-horizontal_small class -->
2<lightning:card>
3  <aura:set attribute="title">My Account</aura:set>
4  <aura:set attribute="footer">Footer</aura:set>
5  <aura:set attribute="actions">
6    <lightning:button label="New"/>
7  </aura:set>
8  <p class="slds-p-horizontal_small">
9    Card Body
10  </p>
11  </lightning:card>

1<!-- lightning:card example using slds-card__body_inner -->
2<lightning:card>
3    <aura:set attribute="title">My Account</aura:set>
4    <aura:set attribute="footer">Footer</aura:set>
5    <aura:set attribute="actions">
6      <lightning:button label="New"/>
7    </aura:set>
8    <div class="slds-card__body_inner">
9      Card Body
10    </div>
11</lightning:card>

Block-Element-Modifier (ブロック-要素-修飾子) (BEM) 表記

Lightning 基本コンポーネントで使用される CSS クラス名は、Salesforce Lightning Design System で使用される Block-Element-Modifier (ブロック-要素-修飾子) (BEM) 表記に準拠します。以前はクラス名に 2 つの連続するダッシュが含まれていましたが、それが 1 つのアンダースコアに置き換わりました。たとえば、以前の CSS クラス名が slds-p-around--small だった場合、slds-p-around_small になります。作成したコンポーネントのカスタム CSS で、2 つの連続するダッシュが含まれる SLDS クラスを参照している場合、1 つのアンダースコアを使用するようにセレクタを更新します。詳細は「Lightning Design System FAQ (Lightning Design System: FAQ)」を参照してください。

カスタムコンポーネントのスタイル設定の適用

ときとして、ユーティリティクラスでは不十分で、コンポーネントバンドルにカスタムのスタイル設定を追加する必要がある場合があります。前に、カスタムクラスを作成して class 属性に渡すことができることを説明しました。所有していないクラスはいつでも変更される可能性があるため、所有していないクラス名を参照先とするのではなく、クラスを作成することをおすすめします。たとえば、.slds-input や .lightningInput はデフォルトで、基本コンポーネントで使用可能な CSS クラスであるため、参照先としないでください。コンポーネント間で設計が一致するように、トークンを使用することも検討できます。トークンバンドルで値を指定し、コンポーネントの CSS リソースで再利用します。

スタイルを使用した表示と非表示

Lightning Design System ユーティリティクラスには、要素の表示および非表示ができる表示クラスがあります。これらのクラスは、JavaScript で追加、削除、切り替えを行う表示/非表示のペアとして設計されています。一度に 1 つのクラスのみを適用します。クラスの詳細は「Lightning Design System: Utilities: Visibility (Lightning Design System: ユーティリティ: 表示)」を参照してください。JavaScript を使用したマークアップの切り替えについての詳細は「マークアップの動的な表示または非表示」を参照してください。

レイアウトにグリッドを使用

lightning:layout は柔軟なグリッドシステムへの答えです。lightning:layoutItem コンポーネントを lightning:layout で囲むとシンプルなレイアウトが完成し、slds-grid クラスで div コンテナが作成されます。追加の Lightning Design System グリッドクラスを適用するには、lightning:layout 属性の任意の組み合わせを指定します。たとえば、vertical-align="stretch" を指定して slds-grid_vertical-stretch クラスを追加します。horizontalAlign、verticalAlign、および pullToBoundary 属性を使用して、Lightning Design System グリッドクラスをコンポーネントに適用できます。ただし、これらの属性を介して使用できないグリッドクラスもあります。追加のグリッドクラスを指定するには、class 属性を使用します。次のグリッドクラスは class 属性を使用して追加できます。

.slds-grid_frame
.slds-grid_vertical
.slds-grid_reverse
.slds-grid_vertical-reverse
.slds-grid_pull-padded-x-small
.slds-grid_pull-padded-xx-small
.slds-grid_pull-padded-xxx-small

次の例では、slds-grid_reverse クラスを slds-grid クラスに追加します。

1<lightning:layout horizontalAlign="space" class="slds-grid_reverse">
2   <lightning:layoutItem padding="around-small">
3     <!-- more markup here -->
4   </lightning:layoutItem>
5   <!-- more lightning:layoutItem components here -->
6</lightning:layout>

詳細は、「Grid utility (グリッドユーティリティ)」を参照してください。

基本コンポーネントへのバリエーションの適用

コンポーネントのバリエーションはそのコンポーネントの設計バリエーションを参照して、ユーザがコンポーネントの外観を容易に変更できるようにします。基本コンポーネントのバリエーションを各々の Lightning Design System バリエーションと一致させようとしますが、1 対 1 の対応ではありません。ほとんどの基本コンポーネントには variant 属性が用意されています。たとえば、lightning:button はさまざまなテキストや背景色をボタンに適用するために、base、neutral、brand、destructive、inverse などの多くのバリエーションをサポートしています。

1<lightning:button variant="brand" label="Brand" onclick="{! c.handleClick }" />

success バリエーションはサポートされていません。ただし、slds-button_success クラスを追加して同じ結果を得ることができます。

1<lightning:button name="submit" label="Submit" class="slds-button_success"/>

別の例を見てみましょう。lightning:tile コンポーネントを使用して、関連する情報のグループを作成できます。このコンポーネントには variant 属性は用意されていませんが、slds-tile_board クラスを渡すことで Lightning Design System ボードバリエーションを実現できます。

1<aura:component>
2  <ul class="slds-has-dividers_around-space">
3    <li class="slds-item">
4      <lightning:tile label="Anypoint Connectors" href="/path/to/somewhere" class="slds-tile_board">
5          <p class="slds-text-heading_medium">$500,000</p>
6          <p class="slds-truncate" title="Company One"><a href="#">Company One</a></p>
7          <p class="slds-truncate">Closing 9/30/2015</p>
8       </lightning:tile>
9    </li>
10  </ul>
11</aura:component>

必要なバリエーションがない場合は、独自のカスタム CSS クラスを作成する前に、Lightning Design System クラスを基本コンポーネントに渡す��とができるかどうかを確認します。恐れずに基本コンポーネントの Lightning Design System クラスやバリエーションを試してみてください。詳細は、「Lightning Design System」を参照してください。

Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)