CSSで使える単位
CSSでは、単位付きの様々な数値を扱うことができます。これらの値を使用する場合、HTMLで省略していた単位もしっかり記述しなければなりません。ただし、0
を指定する場合に限り省略することが可能です。
長さを表す単位
長さを表す単位は、<length>型と呼ばれる値で使用します。これにはフォントサイズやビューポートに対する相対的な単位と、メートル法やピクセルなどの絶対的な単位があります。
相対的な単位
単位 | 説明 |
---|---|
em | 要素のフォントサイズを基準とする単位です。 |
rem | ルート要素(html等)のフォントサイズを基準とする単位です。 |
cap | 要素に指定されたフォントのCap height (名目上の大文字の高さ)を基準とする単位です。 |
ch | 要素に指定されたフォントの0 (ZERO, U+0030)の送り幅を1ch とみなす単位です。 |
ex | 要素に指定されたフォントのx-height を基準とする単位です。 |
ic | 要素に指定されたフォントの水 (CJK water ideograph, U+6C34)の送り幅を1ic とみなす単位です。 |
lh | 要素の行の高さを基準にした単位です。行の高さはline-height で指定された寸法です。 |
rlh | ルート要素の行の高さを基準にした単位です。行の高さはline-height で指定された寸法です。 |
vw | ビューポートの幅に対する割合を示す単位です。1vw は1% に相当します。 |
vh | ビューポートの高さに対する割合を示す単位です。1vh は1% に相当します。 |
vb | ルート要素のブロック軸方向におけるビューポートの割合を示す単位です。1vb は1% に相当します。 |
vi | ルート要素のインライン軸方向におけるビューポートの割合を示す単位です。1vi は1% に相当します。 |
vmax | ビューポートのブロック軸とインライン軸を比較した時に大きい方の割合を示す単位です。1vmax は1% に相当します。 |
vmin | ビューポートのブロック軸とインライン軸を比較した時に小さい方の割合を示す単位です。1vmin は1% に相当します。 |
相対的な単位の使用例
相対的な単位は、フォントサイズやビューポートなどを基準に制御するプロパティに向いています。
#content {
font-size: 1em;
}
article {
width: 80vw;
margin: 1rem auto 0;
}
article > p {
margin: 1lh 0 0;
}
絶対的な単位
単位 | 説明 |
---|---|
cm | メートル法のセンチメートルを表す単位です。1cm は96px/2.54 に相当します。 |
mm | メートル法のミリメートルを表す単位です。1mm は1/10th of 1cm に相当します。 |
Q | メートル法のクオーターミリメートルを表す単位です。1Q は1/40th of 1cm に相当します。 |
in | ヤードポンド法のインチを表す単位です。1in は2.54cm = 96px に相当します。 |
pc | 印刷などに使用されるパイカを表す単位です。1pc は1/6th of 1in に相当します。 |
pt | 文字や図形のサイズに使用されるポイントを表す単位です。1pt は1/72th of 1in に相当します。 |
px | ディスプレイの画素を意味するピクセルを表す単位です。1px は1/96th of 1in に相当します。 |
絶対的な単位の使用例
絶対的な単位は、ピクセルやセンチメートルなど表示する媒体が決まっていたり、計算式で管理することに向いているプロパティに有効です。
@media screen {
body {
font-size: 16px;
margin: 10px;
}
}
@media print {
body {
font-size: 10pt;
margin: 2cm 3cm;
}
}
割合を表す単位
割合を表す単位は、<percentage>型と呼ばれる値で使用します。これは主に基準となる要素の寸法を100%
とした場合に、相対的な大きさを表す祭に使用します。
単位 | 説明 |
---|---|
% | パーセンテージを表す単位です。基準に対する割合を示します。 |
割合の使用例
割合を示す単位は、親要素や画面の大きさを基準とした相対的な寸法を表す祭などに有効です。
main {
width: 80%;
}
nav {
width: 20%;
}
角度を表す単位
角度を表す単位は、<angle>型と呼ばれる値で使用します。これはグラデーションやフィルタなどの関数内で使用したり、アニメーションやトランジションなどの効果を作成する祭に使用します。
単位 | 説明 |
---|---|
deg | 角度を表す単位です。英語の"degree"を省略した名称です。360deg が円に相当します。 |
grad | 角度を表す単位の一種グラディアンです。18世紀末にフランスで提案された"grade"に由来する名前です。400grad が円に相当します。 |
rad | 角度を表す単位の一種ラジアンです。国際単位系において平面角を表します。2πrad が円に相当します。 |
turn | 周を表す単位です。1回転を1つの単位で扱います。1turn が円に相当します。 |
角度の使用例
角度の単位を使用する場面としては、グラデーションやアニメーションのキーフレームが考えられます。
.gradient_box {
background: linear-gradient(45deg, black, blue);
}
.cube_anime {
transform-style: preserve-3d;
animation: 30s linear 0s infinite normal none running TurnCube;
}
@keyframes TurnCube {
0%{ transform: rotateX(0deg) rotateY(0deg);}
100%{ transform: rotateX(360deg) rotateY(360deg);}
}
時間を表す単位
時間を表す単位は、<time>型と呼ばれる値で使用します。これは主にanimation
やtransition
のタイムラインを操作する祭に使用します。
単位 | 説明 |
---|---|
s | 秒を表す単位です。英語の"seconds"が由来です。1s が1秒に相当します。 |
ms | ミリ秒を表す単位です。英語の"milliseconds"が由来です。1000ms が1秒に相当します。 |
時間の使用例
時間を示す単位は、アニメーションやトランジションなどのタイムラインを扱うプロパティで使用します。
.anim_box {
animation-name: as_move;
animation-timing-function: linear;
animation-duration: 500ms;
animation-delay: 0s;
animation-iteration-count: infinite;
}
.exlink {
color: #02a;
transition: color 1s;
}
.exlink:hover {
color: #a20;
}
周期を表す単位
周期を表す単位は、<frequency>型と呼ばれる値で使用します。対応しているブラウザが限定的であるため、活用できるプロパティの登場が待たれます。
単位 | 説明 |
---|---|
Hz | ヘルツを表す単位です。1秒間に1回発生する周波数を表します。 |
kHz | キロヘルツを表す単位です。ヘルツのキロ単位となり、1kHz は1000Hz に相当します。 |
解像度を表す単位
解像度を表す単位は、<resolution>型と呼ばれる値で使用します。モニターやスマートフォンなどの画面に対して、1単位あたりのドットの数を表します。
単位 | 説明 |
---|---|
dpi | 1インチあたりのドット数を表す単位です。"dots per inch"の略で、画面の解像度の指標として使われます。 |
dpcm | 1センチあたりのドット数を表す単位です。"dots per cm"の略です。 |
dppx | 1ピクセルあたりのドット数を表す単位です。"dots per px"の略です。画素密度の高いディスプレイで有効です。 |
x | 1ピクセルあたりのドット数を表す単位です。画素密度の高いディスプレイで有効です。 |