CSSで使える単位
CSSでは、HTMLで省略していた単位もしっかり指定しなければなりません。ただし、0を指定する場合に限り省略することが可能です。
使える単位の一覧表
| 単位 | 種類 | 説明 |
|---|---|---|
| px | 相対単位 | モニターの画素（ピクセル）を1とする単位。解像度72dpiのモニタであれば1インチの中に72個のピクセルが含まれ、物理的な長さは25.4mmになる。相対的な単位だが、殆どのケースで絶対単位として利用されている |
| % | 相対単位 | パーセントで割合を指定 |
| em | 相対単位 | 親要素のフォントサイズを基準とする単位 |
| rem | 相対単位 | ルート要素（html等）のフォントサイズを基準とする単位 |
| vm | 相対単位 | viewport width（ビューポートの幅）に対する割合の単位。デバイスの画面幅が320pxであれば、100vw=320px |
| vh | 相対単位 | viewport height（ビューポートの高さ）に対する割合の単位。デバイスの画面の高さが600pxであれば、100vw=600px |
| vmin | 相対単位 | ビューポートの幅と高さのうち、値が小さい方に対する割合 |
| vmax | 相対単位 | ビューポートの幅と高さのうち、値が大きい方に対する割合 |
| ex | 相対単位 | 小文字の[x]を1とする単位 |
| pt | 絶対単位 | ポイント（1/72インチ）を1とする単位 |
| pc | 絶対単位 | 1パイカ（12ポイント）を1とする単位 |
| mm | 絶対単位 | ミリメートルを基準にした単位 |
| cm | 絶対単位 | センチメートルを基準にした単位 |
| in | 絶対単位 | インチ（2.54センチメートル）を1とする単位 |
単位指定の使用例
CSSのプロパティには、様々な値を指定することが多いので単位の扱いに慣れておきましょう。
CSS
body {
padding: 0;
margin: 0;
font-size: 100%;
line-height: 1.5;
}
#header {
padding: 10px 5%;
margin-bottom: 10px;
font-size: 1.5em;
line-height: 120%;
}
.border_box {
border: 1px solid #333333;
}
CSSリファレンス
| CSSって何？ | 初めての方はこちらからお読み下さい |
| CSSの書き方 | CSSの書き方について基本的な解説です |
| CSSの特徴 | CSSの特徴を理解して有効に活用しましょう |
| CSSで使えるセレクタ | セレクタとはスタイルを適用する対象を指定するものです |
| CSSで使える単位 | CSSで使える単位の一覧です |
| ブロックレベルとインライン | ブロックレベル要素とインライン要素について詳しく解説 |
| idとclassについて | 要素にidとclassで名前を付ける |
| 余白と外枠の関係 | 余白や外枠を指定する際のコツについて |
| DOCTYPE宣言・DOCTYPEスイッチ | [!DOCTYPE]の使い方について |
| ユニバーサルセレクタ（*）について | ユニバーサルセレクタ（全称セレクタ）を使えば全てのタグを一括で指定できます |