Design System の使用開始
学習の目的
このモジュールを完了すると、次のことができるようになります。
- Design System を使用して基本的な Visualforce ページのスタイルを設定する。
- Design System のクラス構造と Block-Element-Modifier (ブロック-要素-修飾子) (BEM) 構文について説明する。
最初のページの作成
このモジュールの残りの部分で、Design System を使用して Visualforce ページを構築します。最初の Visualforce ページを作成し、設計システムを含めてみましょう。その後、テストページで Design System クラス構造について説明します。
\[設定\] に移動して「ページ」をクイック検索し、Visualforce ページを作成します。フォームに次のように入力します。
- 表示ラベル:
Trailhead_SLDS_Basic - 名前: デフォルトで
Trailhead_SLDS_Basicが自動入力されます。
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Salesforce Lightning Design System Trailhead Module</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Import the Design System style sheet -->
<apex:slds />
</head>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds-scope">
<!-- MASTHEAD -->
<p class="slds-text-heading--label slds-m-bottom--small">
Salesforce Lightning Design System Trailhead Module
</p>
<!-- / MASTHEAD -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<!-- SECTION - BADGE COMPONENTS -->
<section aria-labelledby="badges">
<h2 id="badges" class="slds-text-heading--large slds-m-vertical--large">Badges</h2>
<div>
<span class="slds-badge">Badge</span>
<span class="slds-badge slds-theme--inverse">Badge</span>
</div>
</section>
<!-- / SECTION - BADGE COMPONENTS -->
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</body>
</html>
</apex:page>
ページをプレビューすると、次のように表示されます。
CSS を一切記述しなくても新しい Lightning デザインのように見えます。便利だと思いませんか?
ただし残念ながら、これらのバッジは Trailhead ポートフォリオには含まれません。これらは Trailhead のバッジではなく、Desing System のコンポーネントです。独自のバッジの作成をお手伝いしたいところですが、Trailhead ポリスの機嫌を損ねるのでやめておきましょう。
例は単純明快なものですが、Design System の概念が多数取り入れられています。レイアウトについて説明する前に、これらについて確認していきます。
すべての Visualforce ページと同様に、マークアップの外部ラッパーは <apex:page> 要素です。
html タグには、xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 属性を必ず含めてください。これは、Visualforce 内で SVG アイコンのスプライトマップがサポートされるために重要です。注意: 例は、ヘッダー、サイドバー、組み込みのスタイルシートがオフになっていることを示しています。現在、Salesforce ヘッダーまたはサイドバーを使用する必要がある場合、<html> 要素の追加属性は指定できません。この場合、SVG アイコンはサポートされません。
<head> セクションで <apex:slds /> を使用して Design System をインポートします。するとドキュメント内で CSS が読み込まれます。
次に、最初の Design System マークアップを含む <body> タグに読み込まれます。一行ずつ見ていきます。多くのことが行われるので、同時にお気に入りのエディタでページを開いておくことをお勧めします。では始めましょう。
Visualforce で Design System マークアップを使用するときには、slds-scope 範囲指定クラスを使用して外部ラッパー <div> の内側に配置する必要があります。毎回必ずです。Visualforce ヘッダーや左側のナビゲーションがあるかどうかは関係ありません。よろしいですか? これは後でテストで出題されます。
次に、2 つの Design System クラスが適用された単純なマストヘッド <p> タグがあります。最初の slds-text-heading_label は、テキストヘッダーのスタイル設定を適用します。2 番目のクラス slds-m-bottom_small は、ヘッダーの下にパディングを追加するスペーシングのユーティリティクラスです。この変なクラス名は何でしょう? 2 つのアンダースコアはタイプミスでしょうか? これからすべて説明していきます。
<section> 要素の内側に別のヘッダーがあります。今回は上部と下部のパディングを追加する slds-m-vertical_large スペーシングのユーティリティクラス を指定した <h2> です。
この縦方向の間隔を明示的に追加する必要があることに驚くかもしれません。Design System では、Web ページのレイアウトではなく、アプリケーションの構築に重点が置かれるということを覚えておいてください。そのため、デフォルトの余白はタイポグラフィから削除され、アプリケーションビルダーは必要なものを正確に指定することができます。
最後に、最初の Design System コンポーネントであるバッジコンポーネントがあります。実際のところは 2 つです。それぞれ、span 要素に slds-badge クラスを適用して作成されています。2 番目のバッジには、配色を反転するテーマユーティリティクラス slds-theme_inverse が使用されています。複数の Design System クラスを同じ要素に適用して徐々にカスタマイズします。この場合は、バッジスタイルを適用した後に、色を反転します。これは、このモジュールの後半で多く見られます。
これで完成です。マークアップを配置し、最新の Lightning ビジュアルデザインに対応する Design System クラスを適用します。CSS を記述することは一切ありません。
Design System クラスについてはすべて Design System の Web サイトに例とともに記載されています。
SLDS クラスの命名
先に進む前に、Design System クラス名で使用する アンダースコアについて説明します。CSS では、Block-Element-Modifier (ブロック-要素-修飾子) 構文 (BEM) と呼ばれる標準のクラス命名規則を使用して、クラス名のあいまいさを低減します。
- Block (ブロック) は概要レベルのコンポーネントを表します (
.carなど) - Element (要素) はコンポーネントの子孫を表します (
.car__doorなど) - Modifier (修飾子) はブロックまたは要素の特定の状態またはバリエーションを表します (
.car__door_redなど)
では、火急の問題です。なぜすべてアンダースコアを使用するのでしょうか? 第一に、ブロックまたは要素と修飾子を区切ることで、CSS ルールが適用されている対象がわかりやすくなります。さらに、アンダースコアを使用するということは、ブロックまたは修飾子自体にハイフンまたはアンダースコアを含めることができるということです (たとえば、.slds-button__icon_x-small)。試してくみてください。慣れてしまえば、役に立つことがわかります。