tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:VisualforceのリセットCSSについて

standardStylesheets="false"で標準のスタイルシートを無効化しても、Visulaforceページと通常のHTMLでは少しCSSの設定が異なる箇所があります。


hタグとliタグです。hタグはブロック要素として扱われていないと思います。またliタグの場合、マーカー部分を非表示にしてもその幅分が自動で空いてしまいます。


次のCSSでたぶん解決できると思います。

h1, h2, h3, h4, h5, h6 {
  display: block;
}
ul li {
  margin-left: 0;
}


おまけですが、aタグにマウスを当てた時の下線もCSSで消せないときがあります。!importantを宣言してあげると解決すると思います。

a:hover {
  text-decoration: none !important;
}


最後に、細かいところでやはり違いがでる箇所があるので、HTMLをそのまま移せば簡単に動くという感じで考えないようにした方がいいと思います。