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

カスタムスタイルの使用

ページのデザインを Salesforce と異なるものにする場合、<apex:page> タグの showHeader 属性に false を設定し、<apex:stylesheet> タグまたは HTML を使用して独自のスタイルシートとボディを追加します。

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

1swfobject.registerObject("clippy.codeblock-0", "9");<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>

ページのサイズを圧縮するには、<apex:page> コンポーネントの standardStylesheets 属性を false に設定して、標準の Salesforce スタイルシートが読み込まれないようにします。これらのスタイルシートを読み込まない場合、Salesforce CSS を必要とするコンポーネントが正しく表示されなかったり、そのスタイルがリリースによって変わったりする場合があります。

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

ヒント

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

1swfobject.registerObject("clippy.codeblock-4", "9");<apex:page>
2    <style type="text/css">
3        .italicText { font-style: italic; }
4    </style>
5    <apex:outputText styleClass="italicText" value="This is kind of fancy."/>
6</apex:page>

DOM ID を使用してスタイルを適用する場合、スタイル定義に CSS 属性セレクタを使用する必要があります。属性セレクタは、HTML タグではなく属性の定義を利用して CSS スタイルを適用します。任意の Visualforce コンポーネントの id 値を設定できますが、場合によってはその id の先頭に親コンポーネントの id が付加されます。たとえば、次のコードの id は j_id0:myId です。

1<apex:page>
2    <apex:outputText id="myId" value="This is less fancy."/>
3</apex:page>

CSS にこれを反映するには、属性セレクタを使用します。

1swfobject.registerObject("clippy.codeblock-6", "9");<apex:page>
2    <style type="text/css">
3        [id*=myId] { font-weight: bold; }
4    </style>
5    <apex:outputText id="myId" value="This is way fancy !"/>
6</apex:page>

スタイルシートで画像を使用する場合は、画像を 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 開発者ガイド

No Results

カスタムスタイルの使用