Salesforce Lightning Design System でのモバイル検証の使用

Salesforce Lightning Design System (SLDS) Validator は、コードの入力時に SLDS モバイルガイドラインに準拠しているかどうかをチェックします。SLDS Validator は潜在的な問題を発見した場合、警告と改善案を表示します。この警告は、HTML と CSS コードに適用されます。

SLDS では、ユーザインターフェースのスタイル記述子と単位を標準化したさまざまなトークンが定義されています。たとえば、SLDS トークンを使用して、フォント、フォントサイズ、フォントの色などのテキストスタイル属性を指定できます。トークンを使用することで、設計の一貫性を維持しやすくなり、設計の変化に伴った更新が簡単になります。

SLDS では、Visual Studio Code 用の独自のバリデータ拡張機能が提供されています。SLDS バリデータは、Lightning Web コンポーネントのコードをスキャンして、SLDS ガイドラインから逸脱した表現を探します。問題が見つかった場合には、適切な SLDS トークンを提案するか、下線が表示された表現を改善するためのその他のアドバイスを表示します。

モバイルに対応するために、バリデータは、モバイルのアクセシビリティに対応する追加のチェックを実行します。モバイルデバイスでのアクセシビリティには、すべてのユーザの利便性のために、デスクトップブラウザよりも厳しいガイドラインが必要です。たとえば、小さな電話画面の場合、サイズの特定のしきい値を下回るフォントは、視力の良い顧客でも読みにくい場合があります。また、ワードラップ機能は、水平スクロールをサポートしていない狭い画面サイズの場合に、重要度が増します。SLDS Validator の警告は、ユーザの設定がコンポーネントのモバイル性能を低下させると思われる場合に通知されます。

モバイル対応に関する警告メッセージは、次の SLDS ガイドラインに基づいています。

フォントサイズ

モバイルでの可読性を向上するために、次の値の範囲の SLDS トークンを使用します。別の単位種別を使用する必要がある場合は、いずれかの同等の px、pt、em、rem、% の範囲から値を選択してください。

単位	推奨値の範囲
SLDS トークン (推奨)	$font-size-4 以上。Lightning Design System の「Font Size (フォントサイズ)」を参照してください。
px	14 px 以上
pt	10.5 pt 以上
em、rem	0.875 以上
%	87.5 以上

特定の使用事例での推奨値については、「アクセシビリティ対応モバイルデザインガイドラインに従う」を参照してください。

ラベルでのワードラップ

実行時に全文が表示されない問題を回避するために、常にラベルでワードラップを使用してください。省略記号は使用しないでください。

クリック可能な画像、ボタンアイコン、フォーム要素

UI の動作を明確にするために、ユーザの操作をサポートするビジュアル要素には、常にラベルを指定してください。

SLDS モバイルの検証には、SLDS Validator for Visual Studio Code のバージョン 1.4.7 以降が必要です。

SLDS Validator はグローバルに有効化または無効化できます。VS Code の [Preferences (個人設定)] で、[Settings (設定)] | [Extensions (拡張機能)] | [SLDS Validator] | [Salesforce-vscode-slds] | [Basic: Mobile Validation (基本: モバイル検証)] に移動します。

コーディングの際、SLDS Validator によって、モバイルのガイドラインに従っていないコンポーネントにマーカーが表示されます。たとえば、コンポーネントの要素が $font-size-4 よりも小さいテキストサイズを使用している場合、バリデータはその不適切なフォントサイズを黄色の下線で強調表示します。

警告の詳細を参照するには、強調表示されたコードの上にマウスカーソルを置きます。

警告は、正当な理由により無視できる場合もあります。たとえば、開発段階でおおまかな機能にのみ焦点を当てているときなどです。この場合、[クイック修正] メニューを使用して SLDS 警告を抑制できます。

HTML と CSS ファイルの場合:

1. 黄色で下線が引かれている要素にカーソルを合わせます。警告ウィンドウで、[クイック修正] をクリックします。

   

2. [クイック修正] サブメニューから、現在の行の警告のみを抑制するか、現在のファイルのすべての SLDS 警告を抑制するかを選択します。

   

SLDS バリデータは、抑制されたモバイル対応警告について開発者本人や他の開発者に思い出させるために、コードコメントを挿入します。HTML ファイルでこれらの警告を手動で挿入する場合は、次のように自分でコメントを挿入できます。

• 次の 2 つの行の間にある内容は、SLDS 検証から除外されます。

• 次の行は、その次の行のみを SLDS 検証から除外します。

• <!-- sldsValidatorAllow --> という行が HTML ファイルのほかの場所に存在しない場合、ファイルの先頭に次の行を記述すると、ファイルの全内容が SLDS 検証から除外されます。

関連トピック

• SLDS: モバイルデザインガイドラインに従う
• SLDS: Design Tokens (SLDS 設計トークン)
• W3C CSS のヒントとコツ