この文章は 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 を使用したスタイルの定義