Home > CSS > [ CSS ] 10px を基準にしてフォントサイズを指定する

[ CSS ] 10px を基準にしてフォントサイズを指定する

さっき書いたエントリー の応用で、デフォルトフォントサイズを 10 ピクセルにし、

font-size:10px → font-size:100% or font-size:1.0em
font-size:12px → font-size:120% or font-size:1.2em
font-size:14px → font-size:140% or font-size:1.4em
font-size:16px → font-size:160% or font-size:1.6em
font-size:18px → font-size:180% or font-size:1.8em

と指定できると簡単かなぁと思い、サンプルを作ってみました。

Comments: 4

rea 07-02-22 (木) 20:39

こんばんわ。

自分の場合は、ユニバーサルセレクタですべての要素のfont-sizeを100%にし、それを基準に指定しています。
こんな感じですね↓

* {
font-size: 100%;
}
h1 {
font-size: 150%;
}
p {
font-size: 80%;
}

いろいろ試しましたが、これが一番シンプルでいいかなと思います。
フォントサイズは制作者側が細かく指定しても、ユーザーが簡単に変えられるので、アバウトにしておくほうがいいかもしれませんね。

Bowz 07-02-22 (木) 21:45

こんばんわ。コメントありがとうございます。
確かに、フォントサイズはアバウトにしておく方が良いかも知れませんね。
何となく神経質になってるのかな？←俺

qeb 07-02-23 (金) 14:25

こんにちは
1emを10pxにしてしまうと、スタイルされてないタグが登場した時に、マメ字になってでちゃいませんか？
p=1em=14pxあたりがいいんじゃないかと勝手に思ってます。
body {font-size: 84%;}にすると、タグをつけてない文字も読める大きさでいいですよ。

Bowz 07-02-23 (金) 15:00

コメントありがとうございます。
確かに、デフォルトを 10px にしてしまうと、スタイルの適用漏れがあった時、マメ文字になっちゃいますね。
やっぱり、記事に書いてあるような手法は使わない方が良いみたい。

Comment Form
Remember personal info

Trackback+Pingback: 1

TrackBack URL for this entry
http://bowz.info/852/trackback
Listed below are links to weblogs that reference
[ CSS ] 10px を基準にしてフォントサイズを指定する from Bowz::Notebook
Trackback from チバのブログ 08-07-13 (日) 14:43

IEのバグを回避しつつ基準のフォントサイズを決めるスタイルシート

文字コードがUTF-8の時、IEでだけ10px前後のフォントサイズが12px相当の大きさに表示されてしまうと言うバグ（？）に長年頭を悩ませてきました。 Movable TypeとかWordpressと…

Home > CSS > [ CSS ] 10px を基準にしてフォントサイズを指定する

Search (S)
Recent Entries
Pages
Categories
Archives
Feeds
Meta
管理人運営ブログ
スポンサードリンク
楽天ダイナミックアド
タグクラウド

Return to page top