レム、エム、ピクセル。 違いは何ですか？
公開: 2015-12-30Webサイトのスタイルシートを開くと、レム、エム、ピクセル、またはそれらの任意の組み合わせに出くわします。 CSSスタイリングでは、これらが使用される測定の主要な単位です。 サイトを最初からデザインする場合でも、以前にデザインしたサイトを「継承」して維持する必要がある場合でも、これらはビジュアルデザインのタイポグラフィ、間隔、その他のサイズ設定にとって重要です。
ある測定単位が別の測定単位よりも優れている理由は何ですか？ 明確な答えはありません。状況によっては、一方が他方よりも優先される場合があります。 ユースケースと何が最も効果的かを知ることは、スタイリングに最適な測定値を決定するのに役立ちます。
ピクセル
Webの黎明期から、ピクセルはあらゆる場所のスタイルシートに見られるオプションでした。 それらは信頼性が高く、正確であり、それらの一貫性を一致させることはできません。 ピクセルはすべてのブラウザでサポートされているため、操作が簡単です。
ピクセルは素晴らしいですが、いくつかの制限があります。 これらはそのような設定された測定値であるため、ユーザーはブラウザ設定でデフォルトのブラウザテキストのサイズを変更することはできません。 emsやremsのようにスケールアップしないため、ユーザーのアクセシビリティの観点からサイズを変更することは困難です。 ユーザーはブラウザの設定に入るのではなく、ズームインするだけでよいと主張することができます。 正しい答えも間違った答えもありません。それは覚えておくべきことです。
彼らは何ですか？
ピクセルは、設定されたサイズに基づく測定単位です。 画面上の寸法を測定するための単位であり、正確な設計が必要な場合に使用されます。 「ピクセル解像度」などと言っているので、この測定に慣れています。
例は次のようになります。
.main-header p {
font-size: 14px;
}
ピクセルはWebデザインで使用されますが、デバイスにとらわれないWebデザインの時代では、画面の測定は主な焦点ではありません。 コンテンツを無数のデバイスに最適に適合させる方法がすべてなので、それを支援できるemsとremsがあります。
Ems
この測定単位には長い歴史があります。 それは1996年にさかのぼり、CSSの初期から存在しています。 ピクセルはベストプラクティスであると考えられていたため、初期の頃はemはそれほど人気がありませんでした。 それらの目的は、特定のコンテンツのフォントサイズに相対的な単位として機能することであり、一貫性を保つのに役立つため、人気を博しています。
彼らは何ですか？
古典的なタイポグラフィに興味があるなら、おそらく「em」を認識しているでしょう。なぜなら、それは印刷されたタイプの世界に由来する測定単位だからです。 これをタイポグラフィの単位として使用すると、この測定値は現在指定されているポイントサイズと等しくなります。 たとえば、16ポイントの書体の1つのemは16ポイントです。 この単位は、特定のポイントサイズのすべての書体で同じです。
ここでは印刷について話していませんが、emsはどのようにWebデザインに組み込まれるのでしょうか。 相対的なサイズ設定は、要素が他の要素に関連するときに要素のサイズ設定を制御するのに役立つため、emsにとって大きなセールスポイントです。 emは複合値を評価するため、Webサイト要素の優れた構成要素として機能できます。 ただし、この複利計算がどのように機能するかを実際に理解することは重要です。
emsを理解する
ほとんどの場合、ブラウザのデフォルトが他の設定に設定されていない限り、emは16ピクセルです。 1.5 emを見ると、24ピクセルになります。 しかし、それは必ずしもそれほど単純ではありません。 ネスティングが含まれるとどうなりますか？ それは便利で混乱を招く可能性があります。 emsを操作するときに物事がどのように機能するかを知ることは、謎を解くのに確かに役立ちます。 以下の「ネストされている」段落のサイズはどれくらいですか？
<div class="one"> <div class="two"> <div class="three"> <p>I’m nested</p> </div> </div> </div>
.one, .two {
font-size: 0.5em;
}
.three {
font-size: 2em;
}
ここには3つのdivがあり、段落はかなりネストされています。 DOMのカスケードにより、いくつかの探偵作業を行う必要がある場合があります。 16pxのemを使用しているとしましょう。これは、最も一般的なためです。
.oneクラスは、1emに0.5を掛けています。これは、0.5emまたは8ピクセルです。 .twoクラスでは、これは再び0.5を掛けます。これは.25emまたは4pxです。 物事はかなり小さくなっているので、 .threeのクラスが役立ちます。 .25 emを取り、これに2を掛けます。結果は0.5emまたは8pxになります。
役立つかもしれない1つのことは、HTML要素にサイズを設定することです。 このようなものは、ブラウザによって設定されたemに依存するのではなく、設定されたemサイズを指定します。 1emを20pxに設定しましょう。 これが上記の例で使用された場合、ネストと同じ原則が適用されます。 ただし、ピクセルサイズを指定しているため、ブラウザの設定オプションを使用してテキストを拡大縮小する機能に影響することに注意してください。
html {
font-size: 20px;
}
ピクセルに加えて、フォントサイズもパーセンテージで設定できます。 重要なのは、emsは他の測定単位と一緒に機能できるということです。 ベースラインの設定に役立つように本文のフォントをパーセンテージに設定することは非常に一般的であるため、これは確実に発生します。 フォントサイズがemサイズの62.5％から始まるとしましょう。 emサイズが16pxの場合、フォントサイズは10pxになります。
body {
font-size:62.5%;
}
理解できたら、emsはプロジェクトにとって良い資産になります。 サブ要素のテキストを親要素に合わせてサイズ設定すると、確かに便利です。 また、emsを使用すると、単語の間隔よりも大きなパディングをテキストコンテナに簡単に指定できるため、視覚的な近接規則に従うことができます。 関連するアイテムは視覚的にグループ化され、整理されたレイアウトを提供します。
emsのもう1つの優れた機能は、アクセシビリティの利点です。 これはDOMのルートに関連しているため、emsを使用すると、ユーザーの好みに基づいてデザイン全体のサイズを変更するのに最適です。 ブラウザの設定では、デフォルトのフォントサイズを簡単に変更できます。これにより、計算がemsでWebサイト全体に変更されます。
レムス
彼らは何ですか？
Remsは、CSSタイムラインにかなり最近追加されたものです。 この測定単位はCSS3で導入され、ピクセルとemの問題のいくつかを解決します。 「ems」に似た名前で、「r」が何を表しているのか疑問に思われるかもしれません。 これは「ルートEM」という用語に由来します。
ルートはHTML要素です。 HTML要素で指定されたサイズは、この測定の基礎になります。 HTML要素でemサイズ設定を使用したことがわかります。 2つの測定タイプを組み合わせてもかまいません。
html {
font-size: 1em;
}
.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}
最新のブラウザはレムをサポートしていますが、レムを使用する前に、サポートする必要のある古いブラウザをBrowserStackで確認してください。 ただし、古いブラウザに邪魔されないようにしてください。 IE9より前のピクセルフォールバックはいつでも指定できます。 最近のブラウザは、レムを好むため、ピクセルを無視します。 次のようになります。
.my-text {
font-size: 24px;
font-size: 1.5rem;
}
レムを理解する
emsのネストされた要素に対して実行しなければならなかった計算を覚えていますか？ これは、レムでは必要ありません。 それはすべてそのルート要素に基づいています。 親要素について心配する必要はありません。常にルートに基づいています。
<div class="one"> <div class="two"> <div class="three"> <p>I’m nested</p> </div> </div> </div>
html {
font-size: 1em;
}
.one, .two {
font-size: 0.52em;
}
.three {
font-size: 2rem;
}
ここには3つのdivがあり、emの例で見たように、段落はかなりネストされています。 繰り返しになりますが、16pxのemサイズで作業しているとしましょう。
.oneクラスと.twoクラスにはサイズが割り当てられていますが、ネストはemsの場合のようにレムの影響を受けないため、ここでは実際には重要ではありません。 本当に重要なのは、2emである.threeのスタイリングです。 段落は1emのHTML要素に基づいています。 この測定値は2倍になり、2レムまたは32ピクセルになります。
すべてを均等にスケールアップしたいですか？ ルート要素のサイズを調整するだけです。 これは、ブラウザのデフォルトサイズを調整するときにも役立ちます。 emsがそれをどのように許可したかを見ることができますが、remsもそうします。
レムでの予測できないネスト動作について心配する必要はほとんどありません。 ルート要素が機能する場所と、それがレムを使用するときのスタイリングにどのように影響するかを理解するのは簡単です。
さまざまな測定値を比較すると、長所と短所があることがわかります。 測定単位がどのように機能するか、およびそれらがブラウザ設定でどのように機能するかを実際に理解すると、状況またはプロジェクトに最適な単位を選択するのに役立ちます。