CSSの基本なサイズ単位px,rem,em,%,vw,vh,vmin,vmaxについて解説

【 2025/05/06 19:16 更新】

CSSのサイズ単位とは？何があるの？

CSSには、要素のサイズ指定するための単位がたくさん用意されています。

px : ピクセル単位。
rem : ルート(htmlタグの指定)のフォントサイズ単位。
em : 親要素のフォントサイズ単位。
% : パーセンテージ単位。親要素が基準。
vw : ビューポート(画面)の横幅の%。
vh : ビューポート(画面)の縦幅の%。
vmin: "vw"・"vh"のうち、小さい方。
vmax: "vw"・"vh"のうち、大きい方。
lvw : 最大のビューポート(画面)の横幅の%。
lvh : 最大のビューポート(画面)の縦幅の%。
svw : 最小のビューポート(画面)の横幅の%。
svh : 最小のビューポート(画面)の縦幅の%。
dvw : 動的なビューポート(画面)の横幅の%。
dvh : 動的なビューポート(画面)の縦幅の%。
cm : センチメートル単位。(印刷用単位)
mm : ミリメートル単位。(印刷用単位)
in : インチ単位。(1in = 2.54cm)(印刷用単位)
pt : ポイント単位。(1pt = 1/72in)(印刷用単位)
pc : パイカ単位。(1pc = 12pt)(印刷用単位)

※本記事ではlvw・lvh・svw・svh・dvw・dvh・cm・mm・in・pt・pcについては解説しません。

ピクセルとは

デジタル画面の最小単位のことです。
解像度や画像の大きさ、画面の大きさによく使われます。
CSSでは要素の大きさを1px=1ピクセルとして指定できます。

本記事では、よく使われる単位px,rem,em,%,vw,vh,vmin,vmaxについて説明するよ！

CSSの単位「px」

CSSのサイズ単位「px」とは、デジタル画面の最小単位である1ピクセルを基準とした単位です。

ピクセルとは

【 test.css 】


.block {
    height: 100px;
    width: 200px;
    border: 10px solid gray;
    background-color: aqua;
}

【 HTMLファイル】


<div class="block">
    中身:H:100px × W:200px<br>
    枠線:10px
</div>

ブラウザで実行するとこんな感じです。

pxで指定したheight・width・borderプロパティのサイズが反映されました。

例で使用したCSSプロパティ解説

例で使用したプロパティについては以下の通りです。

height/width	widthは要素の幅、heightは要素の高さを指定できるプロパティです。
border	枠線を指定できるプロパティです。プロパティの記載は「border: (種類) (太さ) (色)」のように指定します。【borderについて】プロパティ：border \| こじはなNote
background-color	背景の色を指定できるプロパティです。プロパティの記載は「background-color: (色)」のように指定します。【background-colorについて】プロパティ：background-color \| こじはなNote

CSSの単位「rem」

CSSのサイズ単位「rem」とは、ルート(htmlタグの指定)のフォントサイズを基準とした単位です。

ルート(htmlタグの指定)のフォントサイズ

htmlタグ(ルート要素)に指定したフォントサイズは、全要素のフォントサイズの基準となります。

【htmlタグについて】
htmlタグ | こじはなNote

【 test.css 】


html {
    <!-- ルート(html)要素のフォントサイズ指定 -->
    font-size: 20px;
}

.block {
    height: 10rem;
    width: 20rem;
    border: 1rem solid gray;
    background-color: aqua;
}

【 HTMLファイル】


<div class="block">
    ルートフォントサイズ: 20px<br>
    中身:H:10rem × W:20rem<br>
    枠線:1rem
</div>

ブラウザで実行するとこんな感じです。

remで指定したheight・width・borderプロパティのサイズが反映されました。

例では、ルート(html)要素にフォントサイズ20pxを指定しているため、1rem = 20pxとなります。

例で使用したCSSプロパティ解説

例で使用したプロパティについては以下の通りです。

font-size	フォントのサイズを指定できるプロパティです。プロパティの記載は「font-size: サイズ」のように指定します。
height/width	widthは要素の幅、heightは要素の高さを指定できるプロパティです。
border	枠線を指定できるプロパティです。プロパティの記載は「border: (種類) (太さ) (色)」のように指定します。【borderについて】プロパティ：border \| こじはなNote
background-color	背景の色を指定できるプロパティです。プロパティの記載は「background-color: (色)」のように指定します。【background-colorについて】プロパティ：background-color \| こじはなNote

CSSの単位「em」

CSSのサイズ単位「em」とは、親要素のフォントサイズを基準とした単位です。

【 test.css 】


.parent-block {
    <!-- 親要素のフォントサイズ指定 -->
    font-size: 15px;
}

.block {
    height: 10em;
    width: 20em;
    border: 1em solid gray;
    background-color: aqua;
}

【 HTMLファイル】


<div class="parent-block">
フォントサイズ: 15px
<div class="block">
    中身:H:10em × W:20em<br>
    枠線:1em
</div>
</div>

ブラウザで実行するとこんな感じです。

emで指定したheight・width・borderプロパティのサイズが反映されました。

例では、親要素にフォントサイズ15pxを指定しているため、1em = 15pxとなります。

例で使用したCSSプロパティ解説

例で使用したプロパティについては以下の通りです。

font-size	フォントのサイズを指定できるプロパティです。プロパティの記載は「font-size: サイズ」のように指定します。
height/width	widthは要素の幅、heightは要素の高さを指定できるプロパティです。
border	枠線を指定できるプロパティです。プロパティの記載は「border: (種類) (太さ) (色)」のように指定します。【borderについて】プロパティ：border \| こじはなNote
background-color	背景の色を指定できるプロパティです。プロパティの記載は「background-color: (色)」のように指定します。【background-colorについて】プロパティ：background-color \| こじはなNote

CSSの単位「%」

CSSのサイズ単位「%」とは、親要素の幅を基準としたパーセンテージ(割合)です。

レスポンシブ画面によく使う指定方法です。

【 test.css 】


.parent-block {
    height: 200px;
    width: 300px;
    background-color: beige;
}

.block {
    height: 80%;
    width: 100%;
    background-color: aqua;
}

【 HTMLファイル】


<div class="parent-block">
親要素サイズ: H:200px × W:300px
<div class="block">
    中身:H:80% × W:100%
</div>
</div>

ブラウザで実行するとこんな感じです。

%で指定したheight・widthプロパティのサイズが反映されました。

例では、親要素の幅に200px × 300pxを指定しているため、子要素の縦幅は200pxの80%、横幅は300pxの100%となります。

例で使用したCSSプロパティ解説

例で使用したプロパティについては以下の通りです。

height/width	widthは要素の幅、heightは要素の高さを指定できるプロパティです。
background-color	背景の色を指定できるプロパティです。プロパティの記載は「background-color: (色)」のように指定します。【background-colorについて】プロパティ：background-color \| こじはなNote

CSSの単位「vw」

CSSのサイズ単位「vw」とは、ビューポート(画面)の横幅の%を表した単位です。
ビューポート(画面)の横幅の1%=1vwです。

100vwはビューポート(画面)の表示部分の横幅の100%となります。

【 test.css 】


html {
    background-color: beige;
}

.block {
    height: 20vw;
    width: 100vw;
    background-color: aqua;
}

【 HTMLファイル】


viewport
<div class="block">
    中身:H:20vw × W:100vw
</div>

ブラウザで実行するとこんな感じです。

vwで指定したheight・widthプロパティのサイズが反映されました。

例では、縦幅はビューポートの横幅20%、横幅はビューポートの横幅100%となります。

例で使用したCSSプロパティ解説

例で使用したプロパティについては以下の通りです。

height/width	widthは要素の幅、heightは要素の高さを指定できるプロパティです。
background-color	背景の色を指定できるプロパティです。プロパティの記載は「background-color: (色)」のように指定します。【background-colorについて】プロパティ：background-color \| こじはなNote

CSSの単位「vh」

CSSのサイズ単位「vh」とは、ビューポート(画面)の縦幅の%を表した単位です。
ビューポート(画面)の縦幅の1%=1vhです。

100vhはビューポート(画面)の表示部分の縦幅の100%となります。

【 test.css 】


html {
    background-color: beige;
}

.block {
    height: 100vh;
    width: 80vh;
    background-color: aqua;
}

【 HTMLファイル】


viewport
<div class="block">
    中身:H:100vh × W:80vh
</div>

ブラウザで実行するとこんな感じです。

vhで指定したheight・widthプロパティのサイズが反映されました。

例では、縦幅はビューポートの縦幅100%、横幅はビューポートの縦幅80%となります。

例で使用したCSSプロパティ解説

例で使用したプロパティについては以下の通りです。

height/width	widthは要素の幅、heightは要素の高さを指定できるプロパティです。
background-color	背景の色を指定できるプロパティです。プロパティの記載は「background-color: (色)」のように指定します。【background-colorについて】プロパティ：background-color \| こじはなNote

CSSの単位「vmin」

CSSのサイズ単位「vmin」とは、"vw"・"vh"のうち、小さい方を表した単位です。

【 test.css 】


html {
    background-color: beige;
}

.block {
    height: 100vmin;
    width: 100vmin;
    background-color: aqua;
}

【 HTMLファイル】


viewport
<div class="block">
    中身:H:100vmin × W:100vmin
</div>

ブラウザで実行するとこんな感じです。

【ビューポートが縦150px・横300pxの場合】

ビューポートは横300pxよりも縦150pxの方が小さいため、100vmin = 150pxとなります。

【ビューポートが縦500px・横300pxの場合】

ビューポートは縦500pxよりも横300pxの方が小さいため、100vmin = 300pxとなります。

例で使用したCSSプロパティ解説

例で使用したプロパティについては以下の通りです。

height/width	widthは要素の幅、heightは要素の高さを指定できるプロパティです。
background-color	背景の色を指定できるプロパティです。プロパティの記載は「background-color: (色)」のように指定します。【background-colorについて】プロパティ：background-color \| こじはなNote

CSSの単位「vmax」

CSSのサイズ単位「vmin」とは、"vw"・"vh"のうち、大きい方を表した単位です。

【 test.css 】


html {
    background-color: beige;
}

.block {
    height: 100vmax;
    width: 100vmax;
    background-color: aqua;
}

【 HTMLファイル】


viewport
<div class="block">
    中身:H:100vmax × W:100vmax
</div>

ブラウザで実行するとこんな感じです。

【ビューポートが縦150px・横300pxの場合】

ビューポートは縦150pxよりも横300pxの方が大きいため、100vmax = 300pxとなります。

【ビューポートが縦500px・横300pxの場合】

ビューポートは横300pxよりも縦500pxの方が大きいため、100vmax = 500pxとなります。

例で使用したCSSプロパティ解説

例で使用したプロパティについては以下

height/width	widthは要素の幅、heightは要素の高さを指定できるプロパティです。
background-color	背景の色を指定できるプロパティです。プロパティの記載は「background-color: (色)」のように指定します。【background-colorについて】プロパティ：background-color \| こじはなNote

まとめ

CSSのサイズ指定単位は、px・rem・em・%・vw・vh・vmin・vmax・lvw・lvh・svw・svh・dvw・dvh・cm・mm・in・pt・pcがある。
「px」：デジタル画面の最小単位である1ピクセルを基準とした単位。
「rem」：ルート(htmlタグの指定)のフォントサイズを基準とした単位。
「em」：親要素のフォントサイズを基準とした単位。
「%」：親要素の幅を基準としたパーセンテージ(割合)。
「vw」：ビューポート(画面)の横幅の%を表した単位で、ビューポート(画面)の横幅の1%=1vwとなる。
「vh」：ビューポート(画面)の縦幅の%を表した単位で、ビューポート(画面)の縦幅の1%=1vhとなる。
「vmin」："vw"・"vh"のうち、小さい方を表した単位。
「vmax」："vw"・"vh"のうち、大きい方を表した単位。

【 2025/05/06 19:16 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！