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

コンポーネントの DOM ID を使用したスタイルの定義

DOM ID を使用してスタイルを適用する場合、スタイル定義に CSS 属性セレクターを使用します。属性セレクターは、HTML タグではなく属性の定義を利用して CSS スタイルを適用します。

どの Visualforce コンポーネントでも id 値をその DOM ID に設定できます。ただし、表示される HTML に含まれる id には通常、Visualforce の自動 ID 生成プロセスの一環として、親コンポーネントの id が先頭に付加されます。たとえば、次のコードの実際の HTML id は、j_id0:myId になります。

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

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

1<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>

このセレクターでは、ID 内のどこかに "myId" が含まれる DOM ID が照合されるため、Visualforce コンポーネントで設定する id をスタイル設定に使用する場合は、その ID がページ上で一意である必要があります。

Visualforce 開発者ガイド

コンポーネントの DOM ID を使用したスタイルの定義

関連項目: