色々な方法でスタイルを指定してみます
Visualforceに対して色々な方法でスタイルを指定してみます。
Webページであれば、CSSファイルを外部ファイルとして
参照しているケースが多いと思いますが、Visualforceでは
静的リソース にCSSファイルを置いて、参照すればよさそうです。
また、Zipファイルにまとめた場合、圧縮しているパスを指定して
CSSファイルを参照すればOKです。
こんな感じですね。
{!URLFOR($Resource.common, 'style.css')}
TestStyle.css(静的リソース「TestStyle」)
.sample { color: #F00; font-style: italic; }
style.css(静的リソース「common」)
.main { background-color: #ccc; }
common.zipとして静的リソースを登録しています。
Visualforceページ
<apex:page standardstylesheets="false" sidebar="false" showheader="true"> <apex:stylesheet value="{!$Resource.TestStyle}" /> <apex:stylesheet value="{!URLFOR($Resource.common, 'style.css')}" /> <style> [id*=myid] { font-weight: bold; color: #F00; background-color: #DDF; } </style> <p><h1>色々な手法でスタイルを指定してみる</h1></p> <p><apex:outputtext style="font-weight: bold; background-color: #DFD;" value="これは要素に直接スタイルを指定" /></p> <p><apex:outputtext id="myid" value="これは DOM ID からスタイルを指定" /></p> <p class="sample">apex:stylesheet にて teststyle 静的リソースからスタイルを指定</p> <div class="main"> <p>aepx:stylesheet にて common.zip の style.css 静的リソースからスタイルを指定</p> <p>{!URLFOR($Resource.common, 'style.css')}</p> </div> <br /> </apex:page>
実行結果
あとは通常のHTMLのCSS当て方と一緒ですね。
1点だけ、勉強になったのは、IDへのスタイル設定です。
VisualforceではIDが階層のように XXX:YYY:ID01 という感じで
自動で割り当てられてしまうのですが、
CSSのセレクタに[id*=ID01]という形で、記述しておけば
「含まれていれば」と設定できるので、覚えておけば便利そうです。
でもidにスタイルはあまり推奨されないかな、、できれば class の方が良いかもですね。
日々精進。ほんならね~