MNakayamaのブログ

Visualforceに対して色々な方法でスタイルを指定してみます。

Webページであれば、CSSファイルを外部ファイルとして
参照しているケースが多いと思いますが、Visualforceでは
静的リソースにCSSファイルを置いて、参照すればよさそうです。

また、Zipファイルにまとめた場合、圧縮しているパスを指定して
CSSファイルを参照すればＯＫです。

こんな感じですね。

{!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>