cssで文字サイズ指定、ptでもpxでも指定できますが、違いは？

質問

CSS初心者です。初歩的ですが、教えてください。
文字サイズの指定の単位はいろいろあるみたいですが、
皆様はどの単位を使っていますか？
例えば、ptとpxどちらも結構細かくサイズを指定できますが、
どちらかを選ぶ理由がいまのところありません。
どちらを何故使うのか、違いはあるのか・・・？
よろしくお願いします。

回答No.2

bugtte · ベストアンサー

＞pxもパソコンの解像度に比例して表示される大きさが変わりますよね？
それは勿論ですが、基準にしやすいかしにくいか、という違いが出ます。

きっちりしたレイアウトを制作する際は横幅をピクセルで指定する事になると思います。
例えば600ピクセルで制作するとしましょう。
そこに１文字を目一杯表示したいとします(そんな事はしない。というツッコミは無しで…)。
その場合はフォントのサイズを600pxにすればいいことは考えるまでもありません。

しかしポイントの場合は？
「1ピクセル＝○センチ」という変換は出来ません。よってポイントでも同じ事が言えます。
例え600ピクセルの横幅ぴったりのポイント数値を見つけたとしても、他の画面では？という事になります。

ポイント、センチ単位は印刷物の制作等の場合は使います。イラストレーターでチラシを制作する際等です。
しかしホームページは印刷する事を重視して制作するものではありません。
その為ピクセル単位を推薦します。

読みにくい文章かと思いますがこんな感じでいかがでしょう？

お礼

pt→印刷
px→画面表示

非常に解りやすいです。どうもありがとうございました。
px基準にしておけば、モニタ解像度の変化では崩れないということですね。

回答No.5

leap_day

こんにちは

ブラウザによってツールバーとかで表示領域が異なったりするのでこっちのブラウザではぴったりだけどあっちのブラウザでは右と下に余白ができてしまう(逆にはみ出てしまう(スクロールバーが出てしまう))ということがありますが『px』が最小単位です

1pt = 1.3325px (Macでは1pt = 1pxとなっているようですが)

1pt = 1/72 (in)
インチ(in)の解釈が解像度によって変わってWindowsなら（96DPIなので）96pxで1in、Macなら（72DPIなので）72pxで1inといった感じになります

要は自分が何処を基準にするかだと思います
px : 最小単位(＝ドット)
pt : 現実にあるサイズ(1インチ)
em : フォントサイズ
% : ブラウザサイズ、親要素のサイズ
一般的に使われるのはこの4つかな？

あと別質問（縦方向のセンタリング)になるのですが・・・
※ブロックとしての中央配置ではなく行の中での文字の中央配置という意味でしたら無視してください

vertical-alignと<span>で解決したとあったのですがvertical-alignは行またはセルに対しての縦方向の指定で<span>はインライン要素なのでheightは指定できていないと思うのですが・・・

<div style="width:500px;height:60px;text-align:center;vertical-align:middle;display:table-cell;border:1px solid;">
text<br>text
</div>
とすればIE以外であれば中央配置できます

外枠と内枠のwidth,heightがきっちり決まっているのであれば
<div style="width:500px;height:300px;position:relative;overflow:hidden;border:1px solid;">
<div style="width:40px;height:40px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px;">text<br>text</div>
</div>
という感じで出来ます
※width:40px;height:40px;はテキスト量によって調整
※それに伴いmargin-top:-20px;margin-left:-20px;をheightの半分(top)、widthの半分(left)にしてください

参考URL：

http://www.web-mame.net/css_course/css_size.html

お礼

こんにちは、いつもありがとうございます。
vertical-alignですが、違う条件で一行が中央揃えになったのを見て
早合点していました。
その後泥沼の混乱に陥り頭から離れなくなり
css参考書を買って調べて不可能という
これまた早合点に至っておりました。
書き込み頂いた通りでバッチリでした。
ご親切にありがとうございました。

回答No.4

Nine-nine

私は小さな事はpxかemで、大枠は%を使っています。
固定は、私は苦手です。細かい指定をすると、ブラウザ間であわせるのが大変ですし、リキッドの方が私のレイアウトでは、対応できます。混ぜて適材適所で使ってます。

質問者さんの想定には入っていない単位ばかり使ってる事になります。

お礼

px,em,%
たくさんある単位のなかで意識してみます。
ありがとうございます。

回答No.3

bugtte

追記

一応１ピクセル＝○ポイントの変換は出来るようですが…
http://www.glamenv-septzen.net/pukiwiki/index.php?cmd=read&page=reports%2F2006052101%2Ftable%A5%EC%A5%A4%A5%A2%A5%A6%A5%C8
参考になるかと思いますので読んでみて下さい。

回答No.1

bugtte

ポイントは物理的な値です。
70ポイント=1インチ=2.54cmなのですが、パソコンはピクセル単位で表示しているので使用するモニターやOSによって大きさが異なってしまいます。
よってウェブデザインの際はピクセルで制作することをお勧めします。

お礼

早速のご回答ありがとうございます～。
pxがよいとのことですね。とりあえずpxではじめてみます！

でも、pxもパソコンの解像度に比例して表示される大きさが変わりますよね？
ptのほうは、物理的な単位なのに、解像度によって変わってしまう
ということですが、その違いがまだよくわかりません・・・。