CSSでのブラウザー事のフォントサイズや表示の統一について

CSSでのブラウザー事のフォントサイズや表示の統一について

今回は基礎中の基礎の事なんですが、CSSを勉強し始めるていざサイトを作っている時にブラウザー事にフォントサイズが違ったり、marginの具合が違った現象を経験した事ってありませんか?

ブラウザー事の表示の違いのうんぬんがまったく分かっていないと相当困っちゃいますよね><

なので今回はブラウザー事に表示が違うフォントサイズやmarginやpaddingを統一する為の記述を解説していきたいと思います。

…ここからが続き

ブラウザー事の表示が違うのを統一

まず一番最初にCSSを何も設定しない状態でhtmlタグの表示の違いを見てみましょう。

margin,paddingの統一

body, div, dl, dt, dd, ul, ol, li, h1, h2, h2, h3, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td	{
	margin: 0;	padding: 0;
}

使うであろうhtmlタグのmargin,paddingを0 に指定。
するとこんな感じに表示が変わります。

フォントサイズの統一

h1, h2, h2, h3, h5, h6	{
	font-size: 100%;
}

先にフォントサイズが明らかに違うh タグを統一しておきます。

body {
	font-size: 75%;
}
html>/**/body {
	font-size: 12px;
}

ここで基準フォントサイズをどのブラウザーでも12px相当に統一。

ちなみに今の状態はこんな感じですね。

font-family,line-heightの設定

body {
	font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;
	line-height: 150%;
}
* + html body {
	font-family: "メイリオ","Meiryo";
}

はっきり言ってここは個人差が出ると思うのですが、自分はこのように指定していますね。

  • * + html bodyに指定してあるのはメイリオが適応されるブラウザではメイリオ表示って感じですね(MACやWin Vista用)
  • 読みやすいとされているline-heightの感覚は130% ~ 150%(1.3em ~ 1.5em)なので自分は150%にしています。

先に指定しておいた方が良い要素

html {
	overflow-y: scroll;
}
table	{
	border-collapse: collapse;	border-spacing: 0;
}
img	{
	border: 0;
}
li	{
	list-style-type: none;
}

最低限を記述するとこんな感じですね。

  • htmlで指定してあるのはFirefoxのスクロールバーの有無でセンタリング位置がズレるのをを解消する為です。
  • tableにつく余白みたいなのを消してます。(それが必要な人は指定しなくて良いと思います。)
  • imgに何故かborderが指定してあるので消しちゃいます。
  • li要素の数字や横につく●みたいなのを消します。

ざっとこんな感じで初期状態のブラウザの違いに悩まされる事はないと思いますよ。
後自分は上記説明した意外にも少し項目を追加しているのをdefault.cssとして最初に読ませているのでダウンロード出来るようにしておきますね。

まー昔にブラウザスタイルの初期化する為のデフォルトCSSという記事を書いたのですが、この時のを少し修正してますので下記からダウンロードして使って下さい。

Comments

ゆた

ゆた

返信ありがとうございます。
アバウトな感じでOKという事ですね。計算が必要であればめんどい・・・と思っていたので安心しました^^

2009年12月30日 20:30

MIYA

MIYA

ゆたさん。

ぶっちゃけ厳格に指定しなくてもそれくらいの大きさにはなってくれます。
ちなみに計算方法なんですが、この記事紹介している方法だとデフォルトを12pxにしていますので、
指定したいフォントサイズ(例16)÷ 12 = 該当の数値(1.333333…)
てな感じになるので、%にするために100倍にして下さい。

2009年12月26日 16:03

ゆた

ゆた

フォントサイズの統一で困っていたところたどり着きました。
各ブロックごとに指定したい場合%指定になると思うのですが厳格に88.3%といったような細かい指定が必要でしょうか?
今は見解で%を適当にしてるのですが10pxにしたいなら○○%で16pxにしたいなら○○%に指定するといったような目安となる計算方法てきなものはありますか?

2009年12月26日 14:23

MIYA

MIYA

10px基準の方が確かに分かりやですね!
自分は12pxから変化させるときの%はずっと使っていたのでもう大体暗記しちゃいましたけどね;

ハムさんのjQuery自作のスプリクトは必要に応じての要所、要所しか書いてないので、勉強中の自分には理解しやすいんですよ^^

2008年10月31日 12:06

ハム

ハム

10pxにしておくと、サイズの指定が感覚的に出来るので楽なんですよ。12pxにしてしまうと、変化させるときの%を覚えている必要があったりするので、10pxは楽です。

チバさんの問題って、多分font-familyで日本語fontの指定をするとある程度解消されたようなきがします。しかしそれでも完全に修正されるわけでないので、結局なやんでしまっているのですけどね。

jQuery自作のスプリクト、見てもらえていたのですね。ありがとうございます。あまり使いどころがないものばかりだったりしますが、勉強程度に見てもらえたらと思っていつも書いています。

2008年10月31日 00:32

チバ

チバ

僕も10px基準で設定していますが、10pxを基準にするとサイズ指定がわかりやすいってだけでそうしています。

10pxでも12pxでも問題なのは、IEで10px相当(11px?)のサイズ指定をした時に大きくなってしまう件が解消されれば何でもいいと思うんです。個人的には。

2008年10月30日 22:28

MIYA

MIYA

それぞれですよね。
自分は12pxを基準にしている人が多いと思ってたんですが、10pxを基本にしてるが思っていた以上にいる事にビックリもしてます。

すべてのブラウザでまったく同じ表示って事は今後ありえない話でしょうね;;

てか前に話したんですがIE6が消えてくれるだけで凄くありがたいですけどねw

少し話は変わるのですが最近書いているjQuery自作のスプリクト結構参考にさせて貰ってますよ^^

2008年10月30日 20:06

ハム

ハム

fontの指定ってホントに人それぞれですね。
僕の場合は10pxを基本にして、IE用に62.5%を指定しています。
それでもIE6は少し横幅が大きく表示されてしまうケースが多いんですけどね。

なんとかしたいものです。

2008年10月30日 18:49

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article