Visualforce 開発者ガイド
Spring '26 (API version 66.0)
Winter '25 (API version 62.0)
Spring '24 (API version 60.0)
Winter '24 (API version 59.0)
Summer '23 (API version 58.0)
Spring '23 (API version 57.0)
Winter '23 (API version 56.0)
Summer '22 (API version 55.0)
Spring '22 (API version 54.0)
Winter '22 (API version 53.0)
Summer '21 (API version 52.0)
Spring '21 (API version 51.0)
Winter '21 (API version 50.0)
Summer '20 (API version 49.0)
Spring '20 (API version 48.0)
Winter '20 (API version 47.0)
Summer '19 (API version 46.0)
Spring '19 (API version 45.0)
Winter '19 (API version 44.0)
Summer '18 (API version 43.0)
Spring '18 (API version 42.0)
Winter '18 (API version 41.0)
Summer '17 (API version 40.0)
Spring '17 (API version 39.0)
Winter '17 (API version 38.0)
Summer '16 (API version 37.0)
Spring '16 (API version 36.0)
Winter '16 (API version 35.0)
Summer '15 (API version 34.0)
Spring '15 (API version 33.0)
Winter '15 (API version 32.0)
Salesforce スタイルの使用
スタイルシートを使用した Salesforce スタイルの拡張
Lightning Design System の使用
Lightning Experience スタイルシートで既存の Visualforce ページをスタイル設定
カスタムスタイルの使用
Salesforce ユーザーインターフェースおよびスタイルの抑制
コンポーネントの DOM ID を使用したスタイルの定義
Salesforce スタイルシートのスタイルの使用
ユーザーに表示する Salesforce スタイルの識別
JavaScript 内でユーザーに表示する Salesforce スタイルの決定
HTML コメントと IE 条件付きコメント
カスタム文書型の使用
カスタム ContentType の使用
Visualforce コンポーネントのカスタム HTML 属性の設定
用語集
Visualforce ページのスタイル設定
Visualforce ページのスタイルは、標準の Salesforce ページのデザインを模倣するか、独自のスタイルシートやコンテンツタイプを使用して容易に設定できます。
多くの Visualforce コンポーネントには style または styleClass 属性があります。このいずれかの属性を定義すると、CSS コー��をコンポーネントに関連付けることができます。カスタム CSS コードを使用すると、幅、高さ、色、フォントなど、コンポーネントのデフォルトのビジュアルスタイルを変更できます。
-
Salesforce スタイルの使用
詳細ページの関連リストやセクションヘッダーなど、多くの Visualforce コンポーネントのデザインは、すでに Salesforce の同じコンポーネントと共通しています。配色など、こうしたコンポーネントのスタイルの一部は、コンポーネントが表示されるタブに基づいています。コンポーネントのスタイル設定に使用するタブスタイルを指定するには、ページを標準コントローラーに関連付けるか、<apex:page> または <apex:pageBlock> タグの tabStyle 属性を設定します。 -
スタイルシートを使用した Salesforce スタイルの拡張
ページにスタイルシートを追加するには、<apex:stylesheet> タグを使用します。スタイルシートのスタイル定義に Visualforce コンポーネントを接続するには、これらのほとんどのコンポーネントで使用できる style 属性または styleClass 属性を使用します。このように、独自の Salesforce スタイルを拡張できます。 -
Lightning Design System の使用
<apex:slds> 要素を使用して Visualforce ページに Lightning Design System を組み込み、Lightning Experience のスタイルに合わせます。このコンポーネントの使用は、Lightning Design System を静的リソースとしてアップロードして Visualforce ページで使用することに代わる合理的な方法です。 -
Lightning Experience スタイルシートで既存の Visualforce ページをスタイル設定
lightningStylesheets 属性を使用して Lightning Experience または Salesforce モバイルアプリケーションでページを表示するときにページのスタイルに Lightning Experience のデザインを使用するかどうかを制御できます。 -
カスタムスタイルの使用
独自のスタイルシートまたはスタイルを含めるには、<apex:stylesheet> タグまたは静的 HTML を使用します。 -
Salesforce ユーザーインターフェースおよびスタイルの抑制
デフォルトで、Visualforce ページは、Salesforce の他の部分と同じビジュアルスタイル設定やユーザーインターフェースの「クロム」を採用します。このデフォルトスタイルの動作によ���て、まるで Salesforce の組み込みのような見た目のページを作成できます。ページを Salesforce のような外観にしない場合は、Salesforce ページおよびビジュアルデザインの各面を抑制できます。 -
コンポーネントの DOM ID を使用したスタイルの定義
DOM ID を使用してスタイルを適用する場合、スタイル定義に CSS 属性セレクターを使用します。属性セレクターは、HTML タグではなく属性の定義を利用して CSS スタイルを適用します。 -
Salesforce スタイルシートのスタイルの使用
Salesforce では、アプリケーション全体でさまざまなスタイルシート (.css ファイル) を使用して、すべてのタブを Salesforce のデザインに準拠させています。これらのスタイルシートは、<apex:page> タグの showHeader 属性に false を指定しない限り、Visualforce ページに自動的に含まれます。 -
ユーザーに表示する Salesforce スタイルの識別
Visualforce ページを作成する場合、期待される Salesforce のデザインを知っておくと、そのスタイルにマッチしたページを表示するのに役立ちます。たとえば、ユーザーがデザインをカスタマイズするかどうか選択できるとします。Visualforce ページは、その違いを考慮して設計する必要があります。 -
JavaScript 内でユーザーに表示する Salesforce スタイルの決定
ページやアプリケーションで多数の JavaScript を使用する場合、JavaScript コードでユーザーに表示する Salesforce テーマを識別するのは重要です。現在のユーザーエクスペリエンスコンテキストを識別すれば、JavaScript コード内のナビゲーションを適切に管理できます。