2007年11月22日木曜日

pxとem

http://nagomiplace.blog50.fc2.com/blog-entry-94.htmlより
pxですと
『12px』を設定するとブラウザで文字を大きく表示しても変わらず
小さくしても変わらず。
どんな環境でも12pxが保たれます。
emはその逆
文字を大きく表示すると一緒に大きくなります。
小さく表示設定すれば一緒に小さく。

どっちがユーザーはいいのでしょうか?

サンプルつくったので
ブラウザの表示から文字の大きさを変えてみて下さい。

で、ソースの一部を抜粋。
<style type="text/css">
<!--
.text_10 {
font-size: 10px;
}
.text_12 {
font-size: 12px;
}
.text_15 {
font-size: 15px;
}
.text_s {
font-size: 0.65em;
}
.text_m {
font-size: 0.75em;
}
.text_l {
font-size: 0.95em;
}
-->
</style>
</head>

<body>

<p><span class="text_10">10pxで設定した場合</span><span class="text_12">/12pxで設定した場合</span><span class="text_15">/15pxで設定した場合</span></p>

0.65emで設定した場合</span><span class="text_m">0.75emで設定した場合</span><span class="text_l">0.85emで設定した場合</span></p>

</body>
</html>


ちなみにemとは
http://www.sophia-it.com/content/emより

em
読み方:エム
emとは、タイポグラフィの分野で用いられる長さの単位のひとつで、現在使用しているフォントサイズを基準とした単位のことである。

emで表される長さはポイント(pt)と等しく、例えばフォントサイズを10ptに指定している場合、1emが示す長さは10ptとなる。

emは多くの場合、CSS(スタイルシート)において文字のレイアウトを指定するための単位として用いられる。文字サイズを相対的に指定することができるので、行間の高さなどを効率的に調整することができる。例えば「行間は文字の高さの1.5倍」(1.5em)などと指定することができる。

歴史的には、emは活版印刷で用いられていた単位であり、大文字の「M」が縦横いっぱいの空間を占めることから、フォントサイズの基準として使用されてきたとされる。現在ではemの示す意味は変わっているが、今でもこの意味で説明されることがある。

0 件のコメント: