スタイルシートでサイズと距離を定義するときは、emピクセルではなく を使用する必要があると聞きました。そこで質問ですが、 CSS でスタイルを定義するときemに ではなくを使用する必要があるのはなぜでしょうかpx。これを説明する良い例はありますか?
ベストアンサー1
どちらかが他方よりも良い選択であると言うのは間違いです (そうでなければ、仕様では両方に独自の目的が与えられなかったでしょう)。Stack Overflow が px 単位を多用していることも注目に値するかもしれません。質問で示唆されているように、これは悪い選択ではありません。
単位の定義
pxは絶対的な測定単位 ( in、pt、cmなど) であり、 in単位の 1/96 でもあります(理由は後述します)。絶対的な測定単位であるため、ブラウザー ウィンドウのサイズやフォント サイズなど、他のものに比例するのではなく、何かを特定のサイズに定義したいときにいつでも使用できます。
他のすべての絶対単位と同様に、px単位はブラウザ ウィンドウの幅に合わせて拡大縮小されません。したがって、ページ全体のデザインで%ではなくpxなどの絶対単位を使用すると、ブラウザの幅に適応しません。これは本質的に良いことも悪いことでもありません。デザイナーが、正確なサイズを遵守して柔軟性を失わせるか、伸縮するが正確なサイズを遵守しないかの選択をする必要があるだけです。サイトでは、固定サイズのオブジェクトと柔軟なサイズのオブジェクトが混在するのが一般的です。
広告バナー、ロゴ、アイコンなど、固定サイズの要素をページに組み込む必要があることがよくあります。これにより、デザインでは少なくとも px ベースの測定値がほぼ常に必要になります。たとえば、画像は (既定では) 各ピクセルが 1 pxになるように拡大縮小されるため、画像を中心にデザインする場合はpx単位が必要になります。また、正確なフォント サイズや境界線の幅にも非常に便利です。境界の幅は丸められるため、ほとんどの画面ではpx単位を使用するのが最も理にかなっています。
すべての絶対的な測定値は互いに厳密に関連しています。つまり、1in は常に 96pxであり、1in は常に 72ptです。(画面ベースのメディアについて話す場合、 1inが実際の物理インチになることはほとんどありません。) すべての絶対的な測定値は、96ppi の公称画面解像度とデスクトップ モニターの公称表示距離を想定しており、そのような画面では、1 px は画面上の1 つの物理ピクセルに等しく、1 in は96 の物理ピクセルに等しくなります。ピクセル密度または表示距離が大幅に異なる画面、またはユーザーがブラウザーのズーム機能を使用してページをズームした場合、px は必ずしも物理ピクセルに関連付けられなくなります。
em は絶対的な単位ではなく、現在選択されているフォント サイズに相対的な単位です。フォント サイズを絶対単位 ( pxやptなど) で設定してフォント スタイルを上書きしない限り、ユーザーのブラウザーまたは OS でフォントが選択されている場合はその影響を受けます。そのため、フォント サイズに合わせて em を具体的に拡大縮小したい場合を除き、一般的な長さの単位として em を使用するのは意味がありません。
何かのサイズを現在のフォント サイズに応じて変更したい場合は、em を使用します。
rem はemに似ていますが、現在の要素に指定されているフォント サイズではなく、ドキュメント (具体的にはルート要素) の基本フォント サイズを基準とします。
%も相対的な単位で、この場合は親要素の高さまたは幅を基準とします。デザインのサイズ設定に特定のピクセル サイズに依存していない場合、デザインの合計幅などを表す場合にpx単位の代わりに使用できます。
デザインで%単位を使用すると、デザインを画面/デバイスの幅に適応させることができますが、 pxなどの絶対単位を使用すると適応させることはできません。
vh、vw、vmin、vmaxは%のような相対単位ですが、親要素ではなくビューポートのサイズ(ウィンドウの表示可能領域のサイズ) を基準としています。それぞれ、ビューポートの高さ、幅、2 つのうち小さい方、2 つのうち大きい方を基準としています。