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ピクセルあたりのドット数を表す単位です。画素密度の高いディスプレイで有効です。 |
CSSリファレンス一覧
-
CSSって何?初心者が最初に学ぶべき基礎知識
初めてCSSに触れる方はこちらから読み進めて下さい。CSSの役割やブラウザとの関係など、初心者にも分かりやすいように基礎知識を解説します。
入門編 -
CSSの書き方を詳しく解説!基本的な型とルールを覚えよう
CSSの書き方には一定の法則があるので、慣れてしまえば迷うことはないでしょう。まずは基本的な文法をマスターしましょう。
初級編 -
CSSの特徴をしっかりと把握しよう
CSSにはいくつかの特徴があります。これらを早いうちに理解しておくと、ウェブ制作の作業効率が格段に上がります。
初級編 -
CSSファイルの作り方
CSSファイルは誰でも簡単に作成できます。特別な技術やソフトウェアは必要ありません。
初級編 -
CSSセレクタの一覧表
スタイルの適用対象となる要素を選択するセレクタの一覧表です。詳しい書き方やサンプルコードを掲載しています。
学習編 -
CSSで使える単位の一覧表
プロパティの指定に用いる単位の解説です。CSSで使用できる単位の一覧表を掲載しています。
学習編 -
ボックス・モデルの完全解説
CSSの基礎が固まってきたらボックス・モデルについて学びましょう。これを理解するとCSSの操作が格段にやりやすくなります。
中級編 -
ブロックレベルとインラインレベルを理解する
CSSのブロックレベルとインラインレベルの特性について解説します。これらの扱いはHTMLからボックス・モデルに引き継がれました。
中級編 -
CSSの余白を表すmarginとpaddingを正しく理解する
要素の余白を表すmarginとpaddingについて正しい知識を身に着けましょう。
中級編 -
idとclassを上手く使い分ける
idセレクタとclassセレクタの使い分け方を詳しく解説します。
中級編 -
全称セレクタ(ユニバーサル・セレクタ)の解説
全ての要素のプロパティを一括で操作する全称セレクタについて解説します。
中級編 -
リストのデザインをマスターする
リストのデザインに関するCSSのテクニックを多数紹介します。入れ子、多段式、横並びを全て解決します。
応用編 -
フレックス・ボックスを理解する
横並びのレイアウトやレスポンシブデザインに対応するフレックス・ボックス(Flexible Box)について解説します。
応用編 -
グリッド・レイアウトを理解する
複数の行と列を作成して多次元のレイアウトを行うグリッド・レイアウトについて解説します。
応用編