【CSS】長さの単位について理解を深めよう！

CSS

【CSS】長さの単位について理解を深めよう！

2023年08月23日 8:00　

【CSS】長さの単位について理解を深めよう！

こんにちは、エンジニア2年目の社員Tです。

CSSで長さを指定する際、色々な単位の指定方法があり、その違いや使い分けがわからないことで戸惑った経験はありませんか？

実際、自身もpxしか知らず、どの単位をどのように使えば良いのか沼ってしまいました。
そこで今回は、CSSでよく使われる単位（em、rem、% など）について、自身の復習も兼ねてまとめてみました。

主な長さの単位一覧

単位	種類	意味
px	絶対値	1/96インチ
%	相対値	※プロパティによって基準が異なる
em	相対値	その要素のフォントサイズの○倍
rem	相対値	ルート要素のフォントサイズの○倍
vw	相対値	ビューポートの幅の○%
vh	相対値	ビューポートの高さの○%
vmin	相対値	ビューポートの小さい側の○%
vmax	相対値	ビューポートの大きい側の○%

単位の定義

px（絶対値）

ピクセル（px）は、1/96インチの長さを表す絶対値の単位。

画面上で固定サイズを指定する時に使用します。

%（相対値）

パーセンテージ（%）は、親要素の特定のプロパティに基づいて相対的なサイズを指定する相対値の単位。

プロパティによって基準が異なる点に注意が必要！

em（相対値）

emは、要素自体のフォントサイズに対する倍率を示す相対値の単位。

例えば、フォントサイズが16pxの要素で1emを使用すると、16pxと同じサイズになります。

rem（相対値）

remは、ルート要素（通常はHTML要素）のフォントサイズに対する倍率を示す相対値の単位。

他の要素のフォントサイズに影響を受けないので、グローバルなサイズ指定に便利！

vw（相対値）

vwは、ビューポートの幅の割合を示す相対値の単位。

画面幅に対しての相対的なサイズ指定に使用します。

vh（相対値）

vhは、ビューポートの高さの割合を示す相対値の単位。

画面高さに対しての相対的なサイズ指定に使用します。

vmin（相対値）

vminは、ビューポートの短い側の幅（幅または高さ、小さい方）の割合を示す相対値の単位。

画面の縦横比を考慮したサイズ指定に使用します。

vmax（相対値）

vmaxは、ビューポートの長い側の幅（幅または高さ、大きい方）の割合を示す相対値の単位。

画面の縦横比を考慮したサイズ指定に使用します。

絶対値、相対値の違い

絶対値は、他の要素に左右されず、常に同じ大きさで表示されるので要素のサイズや位置を正確に指定したい場合に使用する。

相対値は、元となる要素を基準に大きさが決まるため、元となる要素の大きさが変わると、相対値で指定した要素の大きさも変化します。

要素のサイズや位置を柔軟に変更したい場合に使用すると良さそう。

絶対値

固定的な値
他の要素の単位や大きさに影響を受けない
px、cm、mm、ptなど

相対値

可変的な値
他の要素の単位や大きさに影響を受ける
em、rem、％、vwなど

絶対的な長さの単位【px】

px（ピクセル）は、デバイスの1ドットを表す絶対的な単位。

Webページ上での要素のサイズや位置を固定的に指定するために使用します。

ただし、高解像度デバイスでは1px内に複数の実際のドットが含まれる場合があるようです。

pxの使用例

具体的に見ていきましょう！

要素のサイズ指定

.element {
  width: 300px;
  height: 200px;
}

テキストのフォントサイズ指定

.text {
  font-size: 16px;
}

要素の位置指定

.positioned-element {
  position: absolute;
  top: 50px;
  left: 20px;
}

ボーダーの太さ指定

.border-element {
  border: 2px solid black;
}

マージンとパディング指定

.spacing-element {
  margin: 10px;
  padding: 15px;
}

px単位は他の要素に影響を受けず、固定的な値を持つため、特定のサイズや位置を確実に指定したい場合に適しています。

ただし、高解像度デバイスなどで表示が異なる場合があるため、レスポンシブデザインには注意が必要です！

相対的な長さの単位

【%】プロパティによって基準が違う

%（パーセント）は相対的な単位で、プロパティによって基準が異なる。

要素の大きさや位置を親要素や他のプロパティに対する割合で指定するために使用します。

%の使用例

widthやheightプロパティの場合

.container {
  width: 50%;
  height: 75%;
}

この場合、.container要素の幅は親要素の幅の50%、高さは親要素の高さの75%となります。

font-sizeプロパティの場合

.title {
  font-size: 150%;
}

この場合、.title要素のフォントサイズは親要素のフォントサイズの150%となります。

marginやpaddingプロパティの場合

.box {
  margin: 5% 10%;
  padding: 2% 3%;
}

この場合、.box要素のマージンは親要素の幅の5%、高さの10%分だけ空けられ、パディングは親要素の幅の2%、高さの3%に適用されます。

%単位は柔軟なレイアウトの構築に適しており、親要素のサイズに合わせて自動的に調整されるため、レスポンシブデザインに役立ちます。

ただし、基準が異なるため、プロパティごとに使用される要素や効果を確認することが大切です！

【emとrem】フォントサイズ基準

emとremはどちらもフォントサイズを基準とした相対的な単位ですが、異なる要素を基準にして値が計算されます。

emの使用例

emは、その要素自身のフォントサイズを基準として相対的な値を指定します。

.parent {
  font-size: 16px;
}
.child {
  font-size: 1.2em; /* 親要素のフォントサイズの1.2倍 */
  margin: 0.5em;   /* 親要素のフォントサイズの0.5倍 */
}

この場合、.child要素のフォントサイズは親要素.parentのフォントサイズの1.2倍となります。
同様に、マージンも親要素のフォントサイズの0.5倍になります。

remの使用例

remは、ルート要素（通常はhtml要素）のフォントサイズを基準として相対的な値を指定します。

html {
  font-size: 16px;
}
.parent {
  font-size: 1.25rem; /* ルート要素のフォントサイズの1.25倍 */
  padding: 0.75rem;   /* ルート要素のフォントサイズの0.75倍 */
}

この場合、.parent要素のフォントサイズはルート要素htmlのフォントサイズの1.25倍となります。

同様に、パディングもルート要素のフォントサイズの0.75倍になります。

emとremは共に相対的な単位であるため、親要素のフォントサイズが変わるとそれに合わせて要素のサイズも変わります。

しかし、emは親要素を基準としているため、親子関係が深い場合にフォントサイズの継承が複雑になることがあります。

一方、remは常にルート要素のフォントサイズを基準とするため、継承の影響を受けにくい特徴があります。

【vw、vh、vmin、vmax】ビューポート基準

vw、vh、vmin、およびvmaxは、ビューポートの幅と高さに対する相対的な単位です。

これらの単位は、画面サイズに合わせて要素の大きさを調整するのに役立ちます。

vw: ビューポートの幅の1%に相当します。つまり、画面の幅に対する割合で大きさを指定できます。
vh: ビューポートの高さの1%に相当します。画面の高さに対する割合で大きさを指定できます。
vmin: ビューポートの幅と高さのうち、小さい方の1%に相当します。画面サイズの小さい側に合わせて要素の大きさを調整できます。
vmax: ビューポートの幅と高さのうち、大きい方の1%に相当します。画面サイズの大きい側に合わせて要素の大きさを調整できます。

vwとvhの使用例

.container {
  width: 50vw;
  height: 75vh;
}

この場合、.container要素の幅はビューポートの幅の50%、高さはビューポートの高さの75%となります。

vminとvmaxの使用例

.box {
  width: 40vmin;
  height: 60vmax;
}

この場合、.box要素の幅はビューポートの幅と高さのうち、小さい方の40%、高さは大きい方の60%となります。

これらの単位はレスポンシブデザインに特に有用であり、画面サイズに応じて要素の大きさを自動的に調整できるため、様々なデバイスに対応するウェブページを作成する際に重要です。

レスポンシブデザインでの活用

レスポンシブデザインは、異なる画面サイズやデバイスに対応するための重要な手法です。

長さの単位をうまく活用することで、コンテンツが異なるビューポートに適切に適応するデザインを実現できます。

メディアクエリと相対単位

レスポンシブデザインを実現するためにメディアクエリを使用する際にも、相対的な単位が役立ちます。

ビューポートの幅や高さに基づいてスタイルを調整することができます。以下は、メディアクエリ内で相対単位を使用する例です。

@media screen and (max-width: 768px) {
  .mobile-text {
    font-size: 1.2rem; /* メディアクエリ内でフォントサイズを調整 */
    padding: 5vw; /* メディアクエリ内でビューポートの幅に基づくパディングを設定 */
  }
}

これらの例は、異なる長さの単位を異なるプロパティと組み合わせることで、柔軟でレスポンシブなデザインを実現する際に活用できるものです。

プロジェクトの要件やデザインに合わせて、適切な組み合わせを選ぶことが重要です。

レスポンシブなグリッドレイアウト

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* グリッドの自動調整 */
  gap: 2rem; /* グリッド間のスペーシング */
}

グリッドレイアウトをレスポンシブにするために、%単位ではなく固定値を基準にしながらも、最小最大値と間隔を指定してデザインが調整されるようにしています。

レスポンシブなテキストスタイル

.text {
  font-size: 2rem; /* フォントサイズの基本値 */
  @media screen and (max-width: 480px) {
    font-size: 1.5rem; /* モバイル用にフォントサイズを調整 */
  }
}

メディアクエリを使って、異なる画面幅に合わせてテキストのフォントサイズを調整する例です。

これらの例は、長さの単位とレスポンシブデザインの原則を組み合わせることで、さまざまなデバイスや画面サイズに対応するデザインを実現する手法を示しています。

最後に

CSSの長さの単位について詳しく解説しました。ピクセル（px）から相対単位（%、em、rem、vw、vh）まで、それぞれの特徴や使いどころを理解することで、柔軟なデザインを実現する際に役立つと思います。
私自身も未経験のエンジニアとして、CSSの長さの単位について躓いたので、復習も兼ねてブログに記しました。

ピクセル（px）から相対単位（%、em、rem、vw、vh）まで、初めて触れる方も含めて、理解が深まっていたら嬉しいです。
未経験からスタートしていますが、少しずつ知識を積み重ねていくことで、いつか成果を出すことができると信じています。

これからも頑張ります！