ウェブサイト検索

Px 対 Em 対 Rem: どの CSS ユニットを使用する必要がありますか?


Web サイトのデザインを開発している場合は、CSS ユニットとの一貫性を保つことが重要です。しかし、px、em、または rem を使用する必要がありますか?

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

先に進む前に、 単位の長さには絶対相対の 2 種類があることに注意してください。

絶対長さ

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

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

cm

センチメートル

mm

ミリメートル

in

インチ (1in=96px=2.54cm)

px *

ピクセル (1px=1 インチの 1/96)

pt

ポイント (1pt=1/72 の 1 インチ)

pc

ピカ (1 個=12 ポイント)

相対的な長さ

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

Unit

Relative to

em*

Relative to the font-size of the element (2em means 2 times the size of the current font)

ex

Relative to the x-height of the current font (rarely used)

ch

Relative to the width of the "0" (zero)

rem*

Relative to font-size of the root element

vw

Relative to 1% of the width of the viewport*

vh

Relative to 1% of the height of the viewport*

vmin

Relative to 1% of viewport's* smaller dimension

vmax

Relative to 1% of viewport's* larger dimension

%

Relative to the parent element

1.Px(ピクセル)

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

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

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

ここでデバイスのピクセル比が役に立ちます。これは基本的に、CSS ピクセル (1px) がデバイスの画面上でどれだけのスペースを占めるかを計算する方法にすぎません。これにより、別のデバイスと比較したときに同じサイズに見えるようになります。

以下は例です:-

<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 コンテンツ (テキストだけでなく) がどのデバイスでも同じサイズで表示されるようになります。

2.エム(エム)

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

フォントサイズが 16 ピクセルの親 div があるとします。その div に段落要素を作成し、それに 1em のフォント サイズを指定すると、段落のフォント サイズは 16 ピクセルになります。

ただし、別の段落に 2em のフォント サイズを指定すると、32 ピクセルに変換されます。以下の例を考えてみましょう。

   <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 は親のフォント サイズではなく、ページ上のルート要素のフォント サイズのみを参照することです。ルート フォント サイズは、ユーザーのブラウザ設定または開発者によって指定されたデフォルトのフォント サイズです。

Web ブラウザのデフォルトのフォント サイズは通常 16 ピクセルであるため、1rem は 16 ピクセル、2rem は 32 ピクセルになります。ただし、例えばルートの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. レム、どのユニットが最強?

Em は、ネストされた要素の複雑な階層が存在する可能性があるため、推奨されません。 REM は通常、PX とは対照的に、ブラウザ設定で指定された新しいデフォルト/ベース フォント サイズで適切に拡大縮小されます。これは、Web ページ上のテキスト コンテンツを操作するときに REM を使用する必要がある理由を説明しています。レムがレースに勝ちます。 REM を使用してコンテンツのスタイルとスケーリングを改善すると、サイトに魅力が加わり、Web サイト作成者にとって理想的です。コンテンツのオンポイント測定によって Web サイトの外観が決まりますが、創造性を発揮する必要があります。

関連記事: