デフォルトで記述しておくと便利なCSS(スタイルシート)

CSS2008年5月19日

CSS設計の際に、デフォルトで記述しておくと便利なCSSをまとめてみました。

ブラウザで標準設定されている余白をリセット

margin:0; padding:0

各ブラウザ間のmargin、paddingの差異をリセットします。

文字の色を設定

color:#333;

デザインによっては変わることもありますが、大体このぐらいのグレーの文字が一番読みやすい、ということで広く使われています。

フォントサイズの設定

body{font-size:100.01%;}

body{font-size:100.01%;}を指定しておくことでブラウザ間の差異がほぼ解消できます。ポイントは各エレメントでの指定ではemでフォントサイズを指定している点です。

フォントファミリーの設定

font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

これについてはfont-familyの指定をご参照ください。

行間の設定

line-height:1.4;

1.4emはWebでプレーンテキストを読む際、一番読みやすいと言われている行間です。なのでこれもいつもbodyに記述しています。
上記に挙げたCSSを整理すると、実際下記のような記述になります。

body{
color:#333; /* 文字の色 */
font-size: 100.01%; /* フォントサイズをリセット*/
font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",
Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
line-height: 1.4; /* 基本の行間 */
margin:0; padding:0;ブラウザで標準設定されている余白をリセット
}

デザインによっては多少変わってくる部分もあると思いますが、一般的・汎用的な設定を考えたらこんな感じのCSSになるのではないでしょうか。

この記事を読んでいる方にオススメの記事

「CSS」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。