CSS(スタイルシート)講座:各ブラウザの互換性を考慮したCSSを学びたい人にオススメ!
CSSで使用できる単位
CSSでは媒体によって大きさが変わる相対的な値と、媒体を問わず大きさが一定な絶対的な値を扱うことが出来ます。また、値が0の場合は単位を省略することが出来ます。
| 単位 | 意味 | |
|---|---|---|
| 相対 | em | その範囲で有効なフォントの高さを1とした単位 |
| ex | その範囲で有効なフォントの小文字の「x」を1とした単位 | |
| px | 1ピクセル(画面を構成する点の集まりのうちの1つ。=1ドット)を1とする単位。(画像でも使われている単位なので、文字との比率が変わらないという点では他の相対単位とは意味合いが異なります) | |
| % | パーセンテージ指定。基準はそれぞれ異なる。可変長のレイアウトをする時などに使用。 | |
| 絶対 | in | インチ(1インチ~2.54cm) |
| cm | センチメートル | |
| mm | ミリメートル | |
| pt | ポイント(1ポイント=1/72インチ) | |
| pc | パイカ(1パイカ=12ポイント) |
webページは画面に表示させることを前提に作られているので、画面に表示させるのに都合の良いpxが単位として用いられることが多いです。 ただしpxは画面の解像度に大きく依存するので注意が必要です。px指定でレイアウトする場合は、800×600pxまたは1024×768pxを目安にレイアウトしたほうが良いかと思います。 また、フォントをpx指定すると、IEで文字サイズの変更ができなくなるので、可読性を考えて文字を大きめに設定するか、文字サイズを変更する仕組みを作る必要があります。
