読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:VisualforceのCSSカスタマイズ

VisualforceのCSSカスタマイズを行うとき、標準スタイルの影響でうまく反映されない場面に遭遇することがあります。いくつかのケースと対応方法を調べてみました。

背景色の変更

Visualforceページの背景色は通常白色となっています。
f:id:tyoshikawa1106:20150328140917p:plain

背景色を変更する方法としてbodyタグに対してCSSを適用する方法が考えられますが、body {} というように指定しても反映されません。


次のようにbodyタグにIdを割り当てそのIDに対してCSSを適用する方法を確認してみました。

<style>
#vf-body {
    background-color: #000000;
}
</style>
<body id="vf-body">
</body>

この方法だと次のような結果となります。
f:id:tyoshikawa1106:20150328141723p:plain


このようにbodyタグに対してCSSを当ててもうまくいきません。何かいい方法はないかと調べてみたところ、『outer』というclassと『outerNoSidebar』というclassが標準で読みこまれていました。※サイドバーの有無で切り替わります。

f:id:tyoshikawa1106:20150328142655p:plain


このClassに対して背景色を指定することでページ内の背景色を変更できました。

#vf-body .outer,
#vf-body .outerNoSidebar {
    background-color: #000000;
}

f:id:tyoshikawa1106:20150328143233p:plain


グラデーションをつけてあげたりすると明るい感じで雰囲気を変えることができます。
f:id:tyoshikawa1106:20150328143415p:plain

ボタンスタイルの変更

VisualforceからApexの処理を実行できるapex:commandButtonですが、標準CSSが適用されているため、CSSが変更しづらくなっています。

f:id:tyoshikawa1106:20150328144319p:plain


ボタンスタイルを変更したい場合は、apex:commandButtonではなくapex:commandLinkを使用すると簡単です。

f:id:tyoshikawa1106:20150328145404p:plain

hoverに対してCSSを指定することでマウスオーバー時に動きを付けることができます。

f:id:tyoshikawa1106:20150328145521p:plain

Fontのカスタマイズ

フォントのカスタマイズは次のような感じで指定することで反映されます。
f:id:tyoshikawa1106:20150328150659p:plain

上記の場合はid="vf-page"を持つ要素内のすべてに対して反映という感じです。対象の要素を指定するのは標準のヘッダー部分などに適用させないためです。ヘッダー部分に適用させてしまうと別ページと比べたときに違いが目立ってしまうのであまり良くないと思います。


上記の方法が一括で指定できて簡単ですが、apex:pageMessagesなどで表示するメッセージにまで反映されてしまうので、注意が必要です。


Font SizeやFont Colorは個別に指定する方がいいかもしれません。

f:id:tyoshikawa1106:20150328151308p:plain

CSS適用時の注意点

Visualforce内でCSSを適用させるとき、標準のスタイルに影響を与えてしまう可能性があります。この問題を回避するためにページ全体に反映されるような特定のID内にのみ適用させる書き方をしておくと安全だと思います。

<style>
    #vf-page table {
        width: 100%;
        background-color: #000000;
    }
</style>
<div id="vf-page">
    <apex:form id="form">
        <table>
            <tr>
                <td>Hello</td>
            </tr>
        </table>
    </apex:form>
</div>

f:id:tyoshikawa1106:20150328152132p:plain


標準部分のスタイルに影響させてしまった場合の例です。

div {
    width: 100%;
    background-color: #000000;
}

f:id:tyoshikawa1106:20150328152343p:plain

メンテしやすいコードにするには

CSSの記述していくとコード量が多くなっていきメインのHTMLコードに辿り着くまでが大変になってしまいます。かといって個別のページ専用CSSをすべて静的リソースで管理するのも大変です。

そういうときはCSS部分を別VFページに外出しして、apex:includeタグで読み込むとスッキリします。静的リソースに比べて編集作業も楽になり、カスタム表示ラベルなども使用することができます。

CSS

f:id:tyoshikawa1106:20150328153305p:plain

メイン

f:id:tyoshikawa1106:20150328153352p:plain


この考え方はJavaScriptにも適用できると思います。apex:includeタグはBootstrapSF1読み込み時やサイト開発など特定の状況で一部のCSSの反映がされなかったりすることがありますが、通常のVF開発では便利なタグだと思います。

サンプルコード

今回のサンプルです。