より大きなブレークポイント用の CSS を作成するときは、要素を拡張するのに十分な画面領域があると想定します。これは、ユーザーが非常に大きなフォント サイズを設定した場合には当てはまらない可能性があります。メディア クエリを px ではなく rem に設定すると、この想定を回避し、ユーザーの好みに対応することができます。
Josh Collinsworth のブログ投稿 "Never use px as a font size" で、著者は Web ページのフォント サイズの単位としてピクセル (px) を使用すべきでない理由について説明しています [1]。作者は、px 値はコンテナー、ブラウザー、またはユーザーのフォント サイズに対して静的であると指摘しています。ユーザーのフォント設定に関係なく、静的ピクセルで値を設定すると、ユーザーの選択が上書きされ、指定した正確な値に置き換えられます。これは、スタイルシートがピクセル単位を使用している場合、サイトへの訪問者が読みにくくなる可能性があることを意味します。
したがって、著者は、ピクセルではなく、em、rem、またはパーセンテージなどの相対単位を使用することをお勧めします。これらの単位は、ユーザーのフォント サイズ設定に基づいてスケーリングされ、アクセシビリティと読みやすさが向上します。特にレスポンシブ Web サイトを設計する場合、相対単位はデバイス間の互換性を向上させることができます。相対単位を使用することで、デザイナーは Web サイトがデバイスやブラウザー全体で適切なフォント サイズで表示されるようにすることができます [1]。
ここにテキストがあります：
Web 開発の世界では、何度も反駁されてきたにもかかわらず、多くの誤解が広まっています。「外部リンクは常に新しいタブで開く」が良い例です。CSS Tricks は、ほぼ 10 年前にこれを詳細に説明しました (要するに、ほとんどが間違っています) が、いまだにいくつかのコーナーに出回っているようです。
適切な例: CSS の px 、 em または rem 単位の間に機能上の違いがないという考えは、私が何度も耳にする誤解であるため、ここに投稿して対処しようと思いました.
はっきりさせておきますが、CSS で使用する単位は絶対に重要です。また、font-size px を設定するときは、できるだけ避ける必要があります。
私たちが話しているのはどのユニットで、何をするのですか?
font-size として px を避けるべき理由を議論する前に、どの単位について話しているのか、それらが一般的にどのように動作するのかを明確にしましょう。
ピクセル
px はピクセルの略ですが、最近ではほとんどの場合、実際にはピクセルではなくなりました。モニターが通常、1024×768 などの比較的予測可能な低解像度のピクセル比率であった時代には、1px は通常、画面上の実際の 1 ピクセルに相当していました。
画面は、ピクセルと呼ばれる色付きの光のドットを使用して画像を表示します。ピクセルは、ディスプレイ上の色付きの光の単一点であり、ハードウェアが表現できる最小の「点」です。これが、このセクションで「文字通り」、「実際の」、または「デバイス」ピクセルとして意味するものであり、物理的な世界のピクセルです。
しかし、高解像度 (「レティーナ」とも呼ばれる) 画面が登場し、デバイスがより多くのピクセルをより小さなスペースに詰め込み始めると、それらの物理デバイスのピクセルは小さくなりました。高解像度画面で Web を閲覧している場合、CSS の 1 ピクセルが文字通りのデバイス ピクセルに相当する場合、ピクセル自体が急速に縮小しているため、何かを読み取ることさえ非常に困難になります。結局のところ、最新のスマートフォンは HDTV よりもさらに高い解像度を備えています。
したがって、1px は通常、実際のハードウェア上の文字通りのピクセルではなく、拡大された「スケーリングされた」ピクセルのサイズに対応します。私たちの CSS では、1 ピクセルのものが複数の物理ハードウェア ピクセルを占有する可能性があり、リテラル デバイス ピクセルを指定する純粋な CSS の方法はありません。しかし、それらは通常小さすぎて対処したくないので問題ありません。
例: iPhone 14 Pro のピクセルは非常に小さいため、16px は文字通りデバイス ピクセルのサイズであり、フォント サイズが 2pt のタイポグラフィ フォントのサイズです。ブラウザがそれらをスケーリングしてくれるのは良いことです!
ほとんどの場合、これらはこの議論の文脈ではあまり重要ではありませんが、知っておくとよいと思います。重要な部分は次のとおりです。1px は、ブラウザーが単一のピクセルとして認識するものと同じです (実際にはハードウェア画面上のピクセルではない場合でも)。
エムとレム
これにより、お互いに似ている em と rem にたどり着きます。厳密には関連していませんが、それでも楽しいちょっとした話に移ります。「em」は、実際にはコンピューターよりも何十年も前からある印刷上の用語です。タイポグラフィ上、1 em は現在のフォント サイズと同じです。
フォント サイズを 32pt に設定した場合 (「pt」は、今でも時々使用される古いタイポグラフィ用語です)、1em は 32pt です。現在のフォント サイズが 20px の場合、1em = 20px です。
Web ページでは、デフォルトのフォント サイズは 16px です。デフォルトを変更しないユーザーもいますが、多くのユーザーは変更します。ただし、デフォルトでは、1em と 1rem の両方が 16px に等しくなります。
「Em」はもともと「M」文字の幅を指しており、これが名前の由来です。ただし、特定のグリフの寸法ではなく、現在のフォント サイズを参照するようになりました。
EMとREMの違い
2 つを区別するには: 1rem は常にブラウザーのフォント サイズ、またはより正確には html 要素のフォント サイズと等しくなります。rem は「root em」の略で、Web ページのルートは <html> タグです。したがって、1rem = ドキュメント のフォントサイズ。(デフォルトでは、これは 16px ですが、ユーザーがオーバーライドできます。)
一方、em は現在の要素のフォント サイズです。以下の CSS を見てください。
.container {
font-size: 200%;
}
p {
font-size: 1em;
}上記の CSS を考慮して、.container 要素内の段落はサイズが 2 倍になります。これは、1em が「現在のフォント サイズ」を意味し、.container 内では 200% であるためです。1em × 200% = 2em (デフォルトでは 32px)。
ただし、.container 要素の外側の段落のフォント サイズは通常の 1em (既定では 16px) のままです。
上記の CSS で em を rem に変更すると、すべての段落タグのフォント サイズは、それらがどこにあるかに関係なく、常にブラウザのデフォルト サイズになります。
font-size: 1em は font-size: 100% と同等です。em と % の単位は、他のコンテキストでは常に同等であるとは限りません。たとえば、 width: 1em と width: 100% は、パーセントがフォント サイズではなく親コンテナーの幅に基づいているため、非常に異なる可能性があります。ただし、font-size プロパティに関する限り、% と em は同じです。
結論は：
- 1em は、現在の要素のフォント サイズです。
- 1rem (ルート em) は、ドキュメントのフォント サイズ (つまり、ブラウザーのフォント サイズ) です。
わかりました、それでユニットとは何か、そしてそれらがどこから来たのかです。では、どのユニットを使用するかが重要な理由を考えてみましょう。
なぜすべてが重要なのか
繰り返しますが、1em と 16px は等しいので、どちらの単位を選択しても問題ないという誤解があります。これは合理的に思えます; 16px = 1rem の場合、どちらのタイプを選択しても問題ないようです。
em と rem は相対的であることを覚えておいてください; デフォルトでは、どちらも (最終的には) ブラウザのフォント サイズに基づいています。
2rem はブラウザのフォント サイズの 2 倍、0.5rem はその半分などです。そのため、ユーザーが好みのフォント サイズを変更すると、em と rem を使用している場合は、サイト上のすべてのテキストがそれに応じて変更されます。2rem は依然としてそのフォント サイズの 2 倍であり、0.5rem は依然としてその半分です。
対照的に、px 値は静的です。20px は、コンテナ、ブラウザ、またはユーザーのフォント サイズに関係なく、ちょうど 20px です。静的ピクセル値を設定すると、ユーザーのフォント設定サイズに関係なく、その選択が上書きされ、指定された正確な値が使用されます。
批判的に言えば、これは、スタイルシートが px を使用して font-size を任意の場所に設定する場合、その値に基づくテキストはユーザーが変更できないことを意味します。
それはとても悪いことです。アクセスできず、誰かがサイトをまったく使用できなくなる可能性さえあります.
したがって、この動作には有効な使用例があるかもしれませんが、それがデフォルトの動作ではないことは間違いありません。
これは、vw や vh などのビューポート単位を使用してフォント サイズを設定することを避けるための非常に良い理由でもあります。また、これらは静的であり、ユーザーがオーバーライドすることはできません。せいぜい calc(1rem + 1vw) のような値が許容される可能性があります。これは、ベースとして rem が含まれているためです。それでも、clamp() またはメディア クエリを使用して最小値と最大値を設定することをお勧めします。画面サイズは、多くの場合、期待またはテストしたサイズをはるかに超えているためです。
フォントサイズ以上の違い
それでは、font-size プロパティを特別に扱わない場合に px と em / rem がどのように変化するかについて話しましょう。
開発者は通常、ページをズームしてテストしますが、これがこの記事の中心にある誤解の原因だと思います。ズームすると、すべてが (インまたはアウト) スケーリングされます。この場合、通常、CSS 単位として px または em / rem のどちらを選択しても問題ありません。スケーリングに関する限り、どちらも同じように動作します。そして、視力の良いほとんどの開発者は、おそらくそれ以上のものがあることに気がつかないでしょう。ただし、トリッキーな質問は次のとおりです。
font-size を超えても、 px は em や rem とは異なる動作をします。
px 単位は、画面上のピクセルのスケーリングされた値に関連付けられています。em と rem は、ページのズームやスケールではなく、ドキュメントのフォント サイズに関連付けられています。
デモンストレーションについては、この CodePen を見てください。
https://codepen.io/collinsworth/pen/WNyvvqY
HTML CSSResult Skip Results Iframe
EDIT ON
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam eum aliquam eveniet.</p>
<p>Sapiente delectus in ab excepturi, commodi placeat quaerat saepe voluptas sunt numquam.</p>
<p>Rerum veniam, quidem voluptatibus deleniti nihil consequatur blanditiis explicabo eum quos. Nam.</p>
<p>Natus necessitatibus delectus neque tenetur sint illum obcaecati similique sequi doloribus eligendi?</p>
<p>Eos quidem iure debitis dolorum repellendus ab incidunt ipsam suscipit, autem consequuntur?</p>p {
border-bottom: 2px solid black;
margin-top: 0;
margin-bottom: 20px;
}いくつかの段落があり、それぞれの下部に 2px の境界線があり、それらの間に 20px の余白があります。両方に px 単位を使用していることに注意してください。
拡大または縮小しても、要素のサイズと距離は比較的変化しません。つまり、拡大すればするほど線が太くなり、段落間のスペースが増えます。
参考までに、同じペンを 400% ズームしたスクリーンショットを次に示します。テキスト、行、および間隔はすべて 4 倍大きくなっていますが、相互に相対的なサイズは同じままです。
スケーリングに関しては、 px 、 em 、または rem の間に実際の違いはありません。しかし、ユーザーがサイトを使いやすくする方法はズームだけではありません。
前述のように、ユーザーはデフォルトまたは最小のフォント サイズを指定することもできます。そうなると、機能が分岐し始めます。
以下のスクリーンショットでは、Firefox のデフォルトのフォント サイズを 64px に設定しています。見てください：
スクリーンショットのテキストとその上のテキストを比較します。今回は、線が太くならず、段落間の余白が比例して増加していないことに注意してください。文字だけが大きくなります。境界線の幅とマージンの両方が px で設定されるため、同じままでスケーリングされません。
ただし、CSS の px を対応する rem 値に変更すると、行と間隔が大きくなることに注意してください。(zh-ハンス)
したがって、ここでの要約は次のとおりです。
- ユーザーがフォント サイズを変更しても、px 値はスケーリングされません。
- em と rem の値は、フォント サイズに比例してスケーリングされます。
これらすべてを結び付けるインタラクティブなデモが必要な場合は、結果の CodePen をチェックしてください。上部のスライダーを調整して、使用する CSS 単位に基づいて、ドキュメントのフォント サイズの変更がさまざまな要素にどのように影響するかを確認してください。https://codepen.io/collinsworth/pen/KKepeMQ
どちらを選ぶか
では、em と rem はフォント サイズに合わせてスケーリングしますが、px の値はスケーリングしないことを知っているので、どうすればよいでしょうか? px は絶対に使用しないでください。
この道を選べば多分大丈夫だと思いますが、それでもpxには目的があると思います。
ユーザーがフォントのサイズを変更しても px 値は変わらないことがわかっています。これは、特定の美的要素にはピクセル単位が実際に適していることを意味します。たぶん、フォントサイズが大きくなったときに大きくしたくないスペースがあるかもしれません。(デフォルトで負のスペースの大きなチャンクである場合、より大きなサイズにスケーリングできるようにすることは意味がないかもしれません。)
変更したくない境界線のサイズや、CSS で作成されたページの装飾要素が大きいフォント サイズでは適切に表示されない場合があります。おそらく、フォント サイズが大きくなるにつれてパディングが肥大化することを望まないでしょう。これらすべての場合において、px は依然として適切な選択です。
個人的には、rem を使用してすべてのサイズを設定することをお勧めします。em は、現在のフォント サイズに比例させたい場合にのみ追加します (たとえば、アイコンの横に文字の高さがちょうどあり、片側に半分の文字があるテキストなど)。明示的にフォント サイズに合わせて拡大縮小したくないデザイン要素を除いて、px はどこにも使用しません。
あなたが何をしているのか、どのように動作するのか、そしてあなたがそうするときにまだアクセスできるかどうかがよくわからない限り、font-sizeを px単位で設定しないでください。
メディア クエリに関する重要な注意事項
上記のすべてと同じ理由で、@media クエリで px を使用しないことが重要です。ユーザーがズームするときは問題なく機能しますが、px を使用するメディア クエリは、ユーザー自身のサイズに大きなフォント サイズを設定して失敗します。
@media (min-width: 800px) {
/* Changing font size does NOT affect this breakpoint */
}
@media (min-width: 50rem) {
/* Changing font size DOES affect this breakpoint */
}これは、フォント サイズが大きくなると、50rem はユーザーの好みに基づいて別の値に変更されますが、800px は変更されないためです。
より大きなブレークポイント用に CSS を記述する場合、要素を拡張するのに十分な画面領域があると考える可能性があります。これは、ユーザーが非常に大きなフォント サイズを設定した場合には当てはまらない可能性があります。メディア クエリを px ではなく rem に設定すると、この想定を回避し、ユーザーの好みに対応することができます。
このサイトでこの問題に遭遇し、すべてのブレークポイントを px に設定しました。ただし、デフォルトのフォント サイズを大きくすると、メディア クエリは応答しなくなります。これは、依然として画面のピクセル幅しか見ていないためです。そのため、ユーザーの好みを考慮していないため、読みにくい巨大なテキストが詰め込まれた小さなサイドバーがまだあります。その直後にremに変えたら問題は解決しました。
要するに: メディア クエリでは、ブラウザーで独自のフォント サイズを設定するとユーザーにどのような影響があるかを確実に理解していない限り、 px は絶対に避けてください。