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

カスタムスタイルの使用

独自のスタイルシートまたはスタイルを含めるには、<apex:stylesheet> タグまたは静的 HTML を使用します。

HTML タグの場合、通常の HTML ページと同様にインライン CSS コードを定義できます。

1<apex:page>
2    <style type="text/css">
3        p { font-weight: bold; }
4    </style>
5
6    <p>This is some strong text!</p>
7</apex:page>

次の例では、静的リソースとして定義されているスタイルシートを参照します。最初に、スタイルシートを作成し、customCSS という名前の静的リソースとしてアップロードします。

1h1 { color: #f00; }
2p { background-color: #eec; }
3newLink { color: #f60; font-weight: bold; }

次に、この静的リソースを参照するページを作成します。

1<apex:page showHeader="false">
2    <apex:stylesheet value="{!$Resource.customCSS}" />
3    <h1>Testing Custom Stylesheets</h1>
4    <p>This text could go on forever...<br/><br/>
5       But it won't!</p>
6
7    <apex:outputLink value="http://www.salesforce.com" styleClass="newLink">
8        Click here to switch to www.salesforce.com
9    </apex:outputLink>
10</apex:page>

Salesforce のスタイルを使用しない場合、Salesforce の標準スタイルシートが読み込まれないようにしてページサイズを圧縮できます。読み込まれないようにするには、<apex:page> コンポーネントの standardStylesheets 属性を false に設定します。 Salesforce スのスタイルシートを読み込ま��い場合、こうしたスタイルシートを必要とするコンポーネントは正しく表示されません。

1<apex:page standardStylesheets="false">
2    <!-- page content here -->
3</apex:page>

ヒント

HTML を作成する Visualforce コンポーネントには、パススルー style および styleClass 属性があります。これらの属性を使用すると、独自のスタイルおよびスタイルクラスで、生成される HTML のデザインを制御できます。style ではコンポーネントに直接スタイルを設定でき、styleClass では他の場所で定義されたスタイル用にクラスを添付できます。たとえば、次のコードは <apex:outputText> のクラスを設定して、スタイルを適用します。

1<apex:page>
2
3    <style type="text/css">
4        .asideText { font-style: italic; }
5    </style>
6
7    <apex:outputText style="font-weight: bold;" 
8        value="This text is styled directly."/>
9
10    <apex:outputText styleClass="asideText" 
11        value="This text is styled via a stylesheet class."/>
12
13</apex:page>

DOM ID を使用してスタイルを適用する場合、スタイル定義に CSS 属性セレクタを使用します。「コンポーネントの DOM ID を使用したスタイルの定義」を参照してください。

スタイルシートで画像を使用する場合は、画像を CSS ファイルと一緒に zip に圧縮し、1 つの静的リソースとしてアップロードします。たとえば、CSS ファイルに次のような行があるとします。

1body { background-image: url("images/dots.gif") }

images ディレクトリ全体と親 CSS ファイルを組み合わせて 1 つの zip ファイルにします。次の例では、zip ファイルリソース名は myStyles です。

1<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>

スタイルシートの url 値が空の文字列である場合、そのページを PDF として表示することはできません。たとえば、スタイルルール body { background-image: url(""); } がページに含まれる場合、そのページは PDF として表示されません。

警告

Visualforce 開発者ガイド

カスタムスタイルの使用