ウェブランサー

CSSで使える単位

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]の使い方について
ユニバーサルセレクタ(*)について ユニバーサルセレクタ(全称セレクタ)を使えば全てのタグを一括で指定できます