本日は、実用的なCSS（スタイルシート）のお話。CSSコーディングを始める一番最初にbodyタグに設定しておくと、結構便利かな？と思われるポイントをまとめてみました。。

margin:0; padding:0;

margin:0; padding:0;って設定しておくと、とりあえずブラウザの標準で設定されている余白を無くす事ができますね。ブラウザごとにこの余白の設定はまちまちなもので、わたくしは最初に0にしてます。。（デザインにもよりますが。。）

line-height:1.4;

これは、行間設定ですわ。1.4はモニタで文章を読むときに、人間が一番読みやすいと言われている行間設定です。。

color:#333;

文字の色ですね。これも、デザインによりけりですが。。真っ黒な文字色よりも、濃いグレーくらいのほうが目にやさしい？（好みの問題ですが。。。）

font-family:Arial, sans-serif;

フォントの設定ですね。こちらはお好みのフォントで良いかと思われますが。。

font-size:0.9em;

フォントサイズは、わたくし最近は、0.9emに設定するようにしてます。12pxとか14pxとかpxで指定される方も多いかと思われますが。。。1emに設定しておくと、ブラウザの標準設定では、実際には16pxで表示されるようです。

日本語のような2バイト文字では、16pxちょっと大きすぎるかなぁ。。って感じなので、0.9emに設定。16×0.9=14.4なので、ブラウザの設定を変更していないユーザーさんには、実際には14.4pxで表示されてるはず。ちなみに0.875emって設定すると14pxで表示されます。

ブラウザの設定でフォントのサイズを大きめに変更してるユーザーさんには大きく表示されるので、pxで設定するよりも、親切設定って事ですね。。

っちゅうわけで、まとめてみると。。

body {
margin: 0;
padding: 0;
line-height:1.4;
color:#333;
font-family:Arial, sans-serif;
font-size:0.9em;
}

これは、あくまでも参考ということで。。デザインによっても設定は微妙に変わってくると思いますが。。一般的にはこの辺の設定は使いまわせるのではないでしょうか？？

デザインblogランキング