VisualforceのCSSカスタマイズを行うとき、標準スタイルの影響でうまく反映されない場面に遭遇することがあります。いくつかのケースと対応方法を調べてみました。
背景色の変更
Visualforceページの背景色は通常白色となっています。
背景色を変更する方法としてbodyタグに対してCSSを適用する方法が考えられますが、body {} というように指定しても反映されません。
次のようにbodyタグにIdを割り当てそのIDに対してCSSを適用する方法を確認してみました。
<style>
#vf-body {
background-color: #000000;
}
</style>
<body id="vf-body">
</body>この方法だと次のような結果となります。
このようにbodyタグに対してCSSを当ててもうまくいきません。何かいい方法はないかと調べてみたところ、『outer』というclassと『outerNoSidebar』というclassが標準で読みこまれていました。※サイドバーの有無で切り替わります。
このClassに対して背景色を指定することでページ内の背景色を変更できました。
#vf-body .outer,
#vf-body .outerNoSidebar {
background-color: #000000;
}
グラデーションをつけてあげたりすると明るい感じで雰囲気を変えることができます。
ボタンスタイルの変更
VisualforceからApexの処理を実行できるapex:commandButtonですが、標準CSSが適用されているため、CSSが変更しづらくなっています。
ボタンスタイルを変更したい場合は、apex:commandButtonではなくapex:commandLinkを使用すると簡単です。
hoverに対してCSSを指定することでマウスオーバー時に動きを付けることができます。
Fontのカスタマイズ
フォントのカスタマイズは次のような感じで指定することで反映されます。
上記の場合はid="vf-page"を持つ要素内のすべてに対して反映という感じです。対象の要素を指定するのは標準のヘッダー部分などに適用させないためです。ヘッダー部分に適用させてしまうと別ページと比べたときに違いが目立ってしまうのであまり良くないと思います。
上記の方法が一括で指定できて簡単ですが、apex:pageMessagesなどで表示するメッセージにまで反映されてしまうので、注意が必要です。
Font SizeやFont Colorは個別に指定する方がいいかもしれません。
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>
標準部分のスタイルに影響させてしまった場合の例です。
div {
width: 100%;
background-color: #000000;
}
メンテしやすいコードにするには
CSSの記述していくとコード量が多くなっていきメインのHTMLコードに辿り着くまでが大変になってしまいます。かといって個別のページ専用CSSをすべて静的リソースで管理するのも大変です。
そういうときはCSS部分を別VFページに外出しして、apex:includeタグで読み込むとスッキリします。静的リソースに比べて編集作業も楽になり、カスタム表示ラベルなども使用することができます。
CSS
メイン
この考え方はJavaScriptにも適用できると思います。apex:includeタグはBootstrapSF1読み込み時やサイト開発など特定の状況で一部のCSSの反映がされなかったりすることがありますが、通常のVF開発では便利なタグだと思います。
サンプルコード
今回のサンプルです。
