Salesforce スタイルの使用

ページにスタイルシートを追加するには、<apex:stylesheet> タグを使用します。スタイルシートのスタイル定義に Visualforce コンポーネントを接続するには、これらのほとんどのコンポーネントで使用できる style 属性または styleClass 属性を使用します。このように、独自の Salesforce スタイルを拡張できます。

次のマークアップは非常に基本的なページを示します。<apex:stylesheet> タグは、[設定] の [開発] | [静的リソース] で TestStyles という名前の静的リソースとして保存された、CSS スタイルシートを参照します。これは、<apex:stylesheet> タグの value 属性の $Resource グローバル変数によって参照されます。<apex:outputText> タグの styleClass 属性は、スタイルシートに定義されたサンプルスタイルクラスを使用しています。

1swfobject.registerObject("clippy.codeblock-0", "9");<apex:page>
2    <apex:stylesheet value="{!$Resource.TestStyles}"/>
3    <apex:outputText value="Styled Text in a sample style class" styleClass="sample"/>
4</apex:page>

この例に使用されているスタイルシートは、次のとおりです。

1.sample {
2    font-weight: bold;
3}

Visualforce ページを作成する場合、期待される Salesforce のデザインを知っておくと、そのスタイルにマッチしたページを表示するのに役立ちます。たとえば、ユーザがデザインをカスタマイズするかどうか選択できるとします。Visualforce ページは、その違いを考慮して設計する必要があります。

ユーザに表示するスタイルを識別するには、$User.UITheme と $User.UIThemeDisplayed という 2 つのグローバル変数が役立ちます。これら 2 つの変数は、$User.UITheme がユーザに表示すべきデザインを返し、$User.UIThemeDisplayed が実際のデザインを返すという点で異なります。たとえば、ユーザは [新しいユーザインターフェースのテーマ] のデザインを表示するよう設定された権限を持っている場合がありますが、そのデザインをサポートしていないブラウザを使用していると、Internet Explorer 6 などで $User.UIThemeDisplayed が異なる値を返す場合があります。

1swfobject.registerObject("clippy.codeblock-2", "9");<apex:page standardController="Account">
2    <apex:variable var="newUI" value="newSkinOn" 
3        rendered="{!$User.UIThemeDisplayed = 'Theme3'}">
4        <apex:stylesheet value="{!URLFOR($Resource.myStyles, 'newStyles.css')}" />
5    </apex:variable>
6    <apex:variable var="oldUI" value="oldSkinOn" 
7        rendered="{!$User.UIThemeDisplayed != 'Theme3'}">
8        <apex:stylesheet value="{!URLFOR($Resource.myStyles, 'oldStyles.css')}" />
9    </apex:variable>
10    <!-- Continue page design -->
11</apex:page>

1swfobject.registerObject("clippy.codeblock-3", "9");<apex:page showHeader="true" tabstyle="Case">
2    <apex:pageMessage severity="error" rendered="{!$User.UITheme = 'Theme3' && 
3                                                    $User.UIThemeDisplayed != 'Theme3'}">
4    We've noticed that the new look and feel is enabled for your organization. 
5    However, you can't take advantage of its brilliance. Please check with 
6    your administrator for possible reasons for this impediment.
7    </apex:pageMessage>
8    <apex:ListViews type="Case" rendered="{!$User.UITheme = 'Theme3' && 
9                                           $User.UIThemeDisplayed = 'Theme3'}"/>
10</apex:page>

Salesforce では、アプリケーション全体でさまざまなスタイルシート (.css ファイル) を使用して、すべてのタブを Salesforce のデザインに準拠させています。これらのスタイルシートは、<apex:page> タグの showHeader 属性に false を指定しない限り、Visualforce ページに自動的に含まれます。

Salesforce スタイルシートが含まれないようにすると、独自のカスタムスタイルシートのみがページのスタイルに影響します。Salesforce のデザインに部分的または完全にマッチするスタイルを構築するという目的では、デフォルトのスタイルシートから選択したコンテンツを参照し、使用することをお勧めします。