技術コンテンツ

CSS

No.33 数値と単位

【CSS】スタイルの数値と単位

CSSの数値と単位について解説します。

検証環境

CSS

macOS

14.1

数値

CSSでは整数や小数点数などの数値を利用できます。

フォント（文字）や要素のサイズを数値で設定することが可能です。

単位

数値には基本的に単位を付与します。

代表的な単位はpxやem、rem、%です。

各単位について、次のプロパティを使って確認します。

プロパティ	説明
font-size	文字サイズ
width	要素の横幅
height	要素の縦幅
background	要素の背景

単位 : px

単位pxはピクセルを表します。

ピクセルとはディスプレイを構成する粒の単位で、解像度によって実際のサイズが異なります。

サンプル : font-size

sample.html

<style>
.message {
    ___ih_hl_start
    font-size: 36px;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>
<p class="message">CSS : Cascading Style Sheets</p>

プレビュー

サンプル : width, height

sample.html

<style>
div {
    ___ih_hl_start
    width: 100px;
    height: 100px;
    ___ih_hl_end
    background: red;
}
</style>

<div></div>

プレビュー

単位 : em

単位emは親要素の文字サイズ相対値です。

例えば、親要素の文字サイズが16pxの場合、2.5emは40pxになります。

ただし、widthやheightなどにemを使う場合、要素自体の文字サイズが相対値の対象になります。

サンプル : font-size

sample.html

<style>
div {
    font-size: 16px;
}
.message {
    ___ih_hl_start
    font-size: 2.5em;
    ___ih_hl_end
}
</style>

<div>
    <p>CSS : Cascading Style Sheets</p>
    <p class="message">CSS : Cascading Style Sheets</p>
</div>

プレビュー

サンプル : width, height

sample.html

<style>
.d1 {
    font-size: 16px;
}
.d2 {
    ___ih_hl_start
    width: 2em;
    height: 2em;
    ___ih_hl_end
    background: red;
}
.d3 {
    font-size: 24px;
    ___ih_hl_start
    width: 2em;
    height: 2em;
    ___ih_hl_end
    background: red;
}
</style>

<div class="d1">
    <div class="d2"></div>
    <hr>
    <div class="d3"></div>
</div>

プレビュー

単位 : rem

単位remはルート要素（主にhtml要素）の文字サイズ相対値です。

例えば、ルート要素の文字サイズが16pxの場合、2.5remは40pxになります。

サンプル : font-size

sample.html

<style>
html {
    font-size: 16px;
}
div {
    font-size: 24px;
}
.message1 {
    font-size: 2.5em;
}
.message2 {
    ___ih_hl_start
    font-size: 2.5rem;
    ___ih_hl_end
}
</style>

<div>
    <p class="message1">CSS : Cascading Style Sheets</p>
    <p class="message2">CSS : Cascading Style Sheets</p>
<div>

プレビュー

サンプル : width, height

sample.html

<style>
html {
    font-size: 16px;
}
.d1 {
    font-size: 24px;
}
.d2 {
    width: 2em;
    height: 2em;
    background: red;
}
.d3 {
    ___ih_hl_start
    width: 2rem;
    height: 2rem;
    ___ih_hl_end
    background: red;
}
</style>

<div class="d1">
    <div class="d2"></div>
    <hr>
    <div class="d3"></div>
</div>

プレビュー

単位 : %

単位%（パーセント）は親要素のサイズ相対値です。

例えば、親要素のwidthが250pxの場合、50%は125pxになります。

注意点は%を高さ（height）に使用する場合、親要素の高さが計算（指定）済みである必要があります。

親要素の高さは未指定の場合、子要素の高さから算出するため、%で計算できません。

サンプル : font-size

sample.html

<style>
div {
    font-size: 24px;
}
.message {
    ___ih_hl_start
    font-size: 50%;
    ___ih_hl_end
}
</style>

<div>
    <p>CSS : Cascading Style Sheets</p>
    <p class="message">CSS : Cascading Style Sheets</p>
</div>

プレビュー

サンプル : width, height

sample.html

<style>
.box {
    background: blue;
    height: 100px;
}
.d1 {
    ___ih_hl_start
    width: 50%;
    height: 30%;
    ___ih_hl_end
    background: red;
}
.d2 {
    ___ih_hl_start
    width: 80%;
    height: 50%;
    ___ih_hl_end
    background: green;
}
</style>

<div class="box">
		<div class="d1"></div>
    <div class="d2"></div>
</div>

プレビュー