Px vs. Em vs. Rem: どの CSS ユニットを使用すべきか?

Web ページを作成するときにテキストのフォントサイズをカスタマイズするための CSS ユニットをいくつか学習します。 pt、pc、ex など多くの単位がありますが、ほとんどの場合、最も一般的な 3 つの単位、px、em、および rem に注目する必要があります。多くの開発者は通常、これらのユニットの違いを理解していません。したがって、以下はこれらのユニットの詳細な説明です。

今日のメイク動画

先に進む前に、単位長には 2 つのタイプがあることに注意してください。 絶対の と 相対的 .

絶対長

絶対的な長さの単位は固定されており、これらのいずれかで表される長さは、正確にそのサイズとして表示されます。

画面のサイズは大きく異なるため、絶対的な長さの単位を画面で使用することはお勧めしません。ただし、印刷レイアウトなど、出力媒体がわかっている場合は使用できます。

単位	説明
cm	センチメートル
んん	ミリメートル
の	インチ (1in = 96px = 2.54cm)
ピクセル *	ピクセル (1px = 1 インチの 1/96)
ポイント	ポイント (1pt = 1 インチの 1/72)
パソコン	スペード (1pc = 12pt)

相対的な長さ

相対長さの単位は、別の長さプロパティに相対的な長さを指定します。相対的な長さの単位は、異なるレンダリングメディア間で適切にスケーリングされます。

Macでズームインする方法

単位	に関連して
の*	要素の font-size に相対的 (2em は現在のフォントのサイズの 2 倍を意味します)
元	現在のフォントの x-height に相対的 (めったに使用されません)
チャンネル	「0」（ゼロ）の幅を基準に
レム*	ルート要素の font-size に相対的
vw	ビューポートの幅の 1% に対して*
vh	ビューポートの高さの 1% を基準*
分	ビューポートの*小さい方の寸法の 1% に対して
vmax	ビューポートの*大きな寸法の 1% に対して
%	親要素に相対的

1.Px（ピクセル）

ピクセルはおそらく CSS で最も使用される単位であり、Web ページのテキストのフォントサイズを設定する際に非常に人気があります。 1 ピクセル (1px) は、印刷媒体の 1/96 インチとして定義されます。

ただし、コンピューターの画面では、通常、センチメートルやインチなどの実際の測定値とは関係がありません。それらは小さいが見えるように定義されているだけです。表示されると見なされるものは、デバイスによって異なります。

デバイスによって、画面上の 1 インチあたりのピクセル数が異なります。これは、ピクセル密度と呼ばれます。デバイスの画面の物理的なピクセル数を使用してそのデバイスのコンテンツのサイズを決定した場合、すべてのサイズの画面で同じように見えるようにするのは困難です。

そこで、デバイスのピクセル比の出番です。基本的には、CSS ピクセル (1 ピクセル) がデバイスの画面で占めるスペースを計算して、別のデバイスと比較したときに同じサイズに見えるようにする方法にすぎません。

以下に例を示します。

<div class="container"> 
     <div> 
       <h1>This is a paragraph</h1> 
       <p> 
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
         Reprehenderit incidunt perferendis iure veritatis cupiditate delectus 
         omnis at! Officiis praesentium officia, nemo veniam consequatur 
         nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor 
         sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus 
         amet possimus iure impedit assumenda distinctio aliquid debitis, autem 
         vel ullam aut, quod corporis ratione atque ducimus dolorum. 
       </p> 
     </div> 
   </div>

.container { 
  width: 100%; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.container div { 
  max-width: 500px; 
  padding: 5px 20px; 
  border: 1px grey solid; 
  border-radius: 10px; 
} 
p { 
  font-size: 16px; 
}

出力

web-content-sized-in-pixel-css-unit-of-measurement

上のボックスはラップトップのような大画面で表示したときの外観で、下のボックスはその外観です。スマートフォンなどの小さな画面に表示された場合 .

両方のボックスのテキストが同じサイズであることに注意してください。これが基本的にピクセルの仕組みです。これにより、Web コンテンツ (テキストだけでなく) がデバイス間で同じサイズに見えるようになります。

2.私（M）

em 単位は、ほとんどの CSS 単位がタイポグラフィに由来するため、大文字の「M」(em) からその名前が付けられました。親要素の現在のフォントサイズをベースとして使用します。親から継承されたフォントサイズに基づいて、要素のフォントサイズを拡大または縮小するために使用できます。

font-size が 16px の親 div があるとします。その div に段落要素を作成し、font-size を 1em にすると、段落の font-size は 16px になります。

ただし、別の段落に 2em の font-size を指定すると、32px に変換されます。以下の例を考えてみましょう。

   <div class="div-one"> 
      <p class="one-em">1 em based on 10px</p> 
      <p class="two-em">2 em based on 10px</p> 
  </div> 
    <div class="div-two"> 
     <p class="one-em">1 em based on 10px</p> 
     <p class="two-em">2 em based on 10px</p> 
    </div> 
   </div>

.div-one { 
  font-size: 15px; 
} 
.div-two { 
  font-size: 20px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
}

出力

em がテキストのサイズを拡大する方法と、親コンテナーから継承された現在のフォントサイズがどのように影響するかを確認できます。特に複雑な構造のページでは、em を使用することはお勧めできません。

適切に使用しないと、DOM ツリーのサイズの複雑な継承に基づいて要素のサイズが適切に設定されないというスケーリングの問題が発生する可能性があります。

3.レム（ルートエム）

Rem は em とほぼ同じように機能しますが、主な違いは、rem が親のフォントサイズではなく、ページのルート要素のフォントサイズのみを参照することです。ルートの font-size は、ユーザーがブラウザ設定で指定するか、開発者が指定するデフォルトの font-size です。

Web ブラウザのデフォルトのフォントサイズは通常 16px であるため、1rem は 16px、2rem は 32px になります。ただし、たとえばルートの font-size が 10px に変更された場合は、次のようになります。 1rem は 10px、2rem は 20px になります。

アンドロイドのための最高のオフラインナビゲーションアプリ

わかりやすくするための例を次に示します。

   <div class="div-one"> 
     <!-- EM --> 
     <p class="one-em">1 em based on container (40px)</p> 
     <p class="two-em">2 em based on container (40px)</p> 
     <!-- REM --> 
     <p class="one-rem">1 rem based on root (16px)</p> 
     <p class="two-rem">2 rem based on root (16px)</p> 
   </div>

.div-one { 
  font-size: 40px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
} 
.one-rem { 
  font-size: 1rem; 
} 
.two-rem { 
  font-size: 2rem; 
}

出力

ご覧のとおり、REM 単位で定義された段落は、コンテナーで宣言されたフォントサイズによって完全に妨げられず、厳密にレンダリングされます。 HTML 要素セレクターで定義されたルートフォントサイズ。

Px vs. Em vs. Rem: 最強のユニットは?

ネストされた要素の複雑な階層を持つ可能性があるため、Em はお勧めしません。 REM は通常、PX とは対照的に、ブラウザ設定で指定された新しいデフォルト/ベースフォントサイズで適切にスケーリングされます。これは、Web ページでテキストコンテンツを操作するときに REM を使用する必要がある理由を説明しています。 REMがレースに勝ちます。 REM を使用してコンテンツのスタイリングとスケーリングを改善すると、Web サイトの作成者にとって理想的であるため、サイトにセンスが加わります。コンテンツの適切な測定は、Web サイトのルックアンドフィールを決定しますが、クリエイティブになる必要があります。