ywork2020.com

Title

CSSで使われる単位

目次 (INDEX)

CSSで使われる単位: パーセンテージ値について

CSSでスタイルの設定に使われる単位には、沢山の種類があります。 しかし、実際に使われている単位は、それほど多くないと思います。ここでは単位の大きな分類としてパーセンテージ値、絶対単位と相対単位について、 お話しさせていただこうと思います。

まず、パーセンテージ値についてです。 これは、主にブラウザの表示上の既定値からの相対比率を指定する場合や、今時点で設定されている値に対しての相対比率を指定する場合、 また、親要素から継承された値に対しての相対比率を指定する場合などに用いられます。 例えば、次のコードの様に全ての要素のfont-sizeを一律の値で設定したとします。

*{
	font-size: 5mm;
}

これが5mmの文字です。全ての要素のフォントサイズの基準になります。

上記のようにCSSのコードの先頭で記述すると全ての要素に対してフォントサイズを5mmに設定することができます。 これに続けて次のように記述してみます。

*{
	font-size: 5mm;
}
h1{
	font-size: 200%;
}
h2{
	font-size: 150%;
}

<h1>200%の文字です。</h1>
つまり、10mm(1cm)です。

<h2>150%の文字です。</h2>
つまり、7.5mmです。

これでサンプルの様にh1要素を使うと10mmになり、h2要素を使うと7.5mmで表示されます。

今回はフォントサイズをサンプルにしましたが、このように基準に対してパーセンテージ値でスタイルを設定することは後で再調整する場合、非常に効率が良いと言えます。 なぜなら、基準値を変更するだけでサイト全体のフォントサイズが指定比率で一度に変更されるわけですから、サイト全体のスタイルバランスを崩しにくいわけです。

目次に戻る

CSSで使われる単位: 相対単位について

つづいて、相対単位についてですが、相対単位というのは前項で説明したパーセンテージ値に似た指定方法でもあります。 例えば、前項と同じく、CSSの先頭に下記のコードを記述して全ての要素のフォントサイズを一律に5mmに設定したとします。

*{
	font-size: 5mm;
}

これでh1要素もh2要素もh3要素もフォントサイズは5mmになっています。

<h1>font-size: 5mm;</h1>

<h2>font-size: 5mm;</h2>

<h3>font-size: 5mm;</h3>

ここから次のコードを追加して相対単位によるフォントサイズの変更を掛けてみます。 ここでは、サンプルとしてemという単位を使います。 emとは現在、設定されている文字の高さを基準として表される単位です。 これを使ってh1要素、h2要素、h3要素にフォントサイズを設定します。

*{
	font-size: 5mm;
}
h1{
	font-size: 2em;
}
h2{
	font-size: 1.5em;
}
h3{
	font-size: 1em;
}

<h1>font-size: 2em;</h1>
つまり、5mm×2=10mmです。

<h2>font-size: 1.5em;</h2>
つまり、5mm×1.5=7.5mmです。

<h3>font-size: 1em;</h3>
つまり、5mm×1=5mmです。

このように現時点の値を基準にして比率や倍率などで値を変化させる単位を相対単位といいます。

相対単位によく使われる単位として、emやremなどが挙げられます。 先ほどのサンプルで使用したemは現時点の文字の高さを基準にします。またremはルート要素の文字の高さを基準にします。 ルート要素とはhtml要素のことです。この2つの単位はデザイン的に相対比をコントロールしやすいのが特徴です。

また、ピクセル(px)という単位も相対単位として、よく使われます。 このピクセルは非常に微調整しやすく扱いやすい単位ではありますが、モニターの画素を1とした単位なので相対比率で使いやすい単位とはいえません。 これは、サイト全体のデザインの基準を決めたり、マージンやパディングなど、余白の調整など絶対的に固定して置きたい基準を設定する場合には、 おすすめできる単位です。

目次に戻る

CSSで使われる単位: 絶対単位について

前項では、相対単位について説明しました。その中でミリメートル(mm)という単位を使用しましたが、それがまさに絶対単位のことです。 CSSで使用できる絶対単位には多くのものがあります。その中でも、なじみやすく理解しなすいものとしてはmmではないでしょうか。 例えば前項のようにフォントサイズに5mmを指定すれば、1文字の高さ5mmで表示されるということになります。

またよく使われる絶対単位として、degという角度を指定する単位があります。

目次に戻る

CSSの単位の種類

よく使われる相対単位

CSSの単位名単位の説明
em その要素の文字の高さを1とする単位です。 例えば、font-sizeプロパティは親要素の値を継承します。 そのため、親要素にfont-sizeが指定された場合は親要素のfont-sizeを1として相対的に文字の高さが変更されます。 親要素にfont-sizeの指定がない場合はブラウザの既定値を基準とします。
ex その要素のフォントのx-height(小文字のxの高さ)を1とする単位です。 font-sizeでexを指定した場合、親要素の小文字のxの高さを1とします。 親要素にfont-sizeの指定がない場合は、ブラウザの規定値の小文字のxの高さを基準とします。
CSSのemとexの範囲
px コンピュータのディスプレイの1ピクセルを1とする単位です。
表示される大きさはディスプレイの解像度によって異なります。

目次に戻る

よく使われる絶対単位

CSSの単位名単位の説明
cm センチメートル
mm ミリメートル
in インチ ( 1in = 2.54cm )
pt ポイント ( 1pt = 1/72in )
pc パイカ ( 1pc = 12pt )

目次に戻る

よく使われる角度を表す単位

CSSの単位名単位の説明
deg ディグリー[degree] (1deg = 1度)
rad ラジアン[radian] (1rad = 57.3deg)
turn ターン[turn] (1turn = 360度)

目次に戻る

CSS3から新しく追加された単位

CSSの単位名単位の説明
ch その要素内で使われるフォントの数字の0の幅を1とする単位です。
rem ルート要素のfont-sizeの値を1とする単位です。
ルート要素そのものにremが指定された場合は、ルート要素の初期値を基準とします。
vw ビューポートの幅を100とする単位です。
1vwはビューポートの幅の1%に相当します。
vh ビューポートの高さを100とする単位です。
1vhはビューポートの高さの1%に相当します。
vmin vwとvhのどちらか小さいほうと同じです。
vmax vwとvhのどちらか大きいほうと同じです。
ビューポートと呼ばれる、ブラウザのコンテンツが表示される領域のサイズを基準としているので、ブラウザのウィンドウサイズを変更した場合は、それに伴い値も変更されます。
※現時点でこれらの単位に対応していないブラウザもあるので、使用する際はその辺りも考えなくてはなりません。

目次に戻る