さっき書いたエントリー の応用で、デフォルトフォントサイズを 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
と指定できると簡単かなぁと思い、サンプルを作ってみました。
ベースとなるフォントサイズが 10px なので、パーセント指定にする時、余計な端数が出なくて気持ちいいかなと…。
こう言う手法って、どうなんだろ？
こんばんわ。
自分の場合は、ユニバーサルセレクタですべての要素のfont-sizeを100%にし、それを基準に指定しています。
こんな感じですね↓
* {
font-size: 100%;
}
h1 {
font-size: 150%;
}
p {
font-size: 80%;
}
いろいろ試しましたが、これが一番シンプルでいいかなと思います。
フォントサイズは制作者側が細かく指定しても、ユーザーが簡単に変えられるので、アバウトにしておくほうがいいかもしれませんね。
こんばんわ。コメントありがとうございます。
確かに、フォントサイズはアバウトにしておく方が良いかも知れませんね。
何となく神経質になってるのかな？←俺
こんにちは
1emを10pxにしてしまうと、スタイルされてないタグが登場した時に、マメ字になってでちゃいませんか？
p=1em=14pxあたりがいいんじゃないかと勝手に思ってます。
body {font-size: 84%;}にすると、タグをつけてない文字も読める大きさでいいですよ。
コメントありがとうございます。
確かに、デフォルトを 10px にしてしまうと、スタイルの適用漏れがあった時、マメ文字になっちゃいますね。
やっぱり、記事に書いてあるような手法は使わない方が良いみたい。
IEのバグを回避しつつ基準のフォントサイズを決めるスタイルシート
文字コードがUTF-8の時、IEでだけ10px前後のフォントサイズが12px相当の大きさに表示されてしまうと言うバグ（？）に長年頭を悩ませてきました。 Movable TypeとかWordpressと…
[…] 今回CSS: 10px を基準にしてフォントサイズを指定するという記事を参考に10pxを基準にしたCSSを作ってみました。 […]