pxに死を、chに栄光を

ピクセルは嘘です。たとえ「ピクセルパーフェクト」な精度で何かを描画していると思っていても、モニターはあなたに嘘をついています。プラトニックな完璧な正方形のグリッドは存在しません。 CSSでは、ピクセルは二重の嘘です。 1pxが必ずしも1つの物理デバイスピクセルに等しいわけではないことに注意してください。HDディスプレイでは、複数の物理ピクセルにまたがる場合があります。同様に、CSSの1cmは、SIメーターの100分の1に相当しないことがよくあります。大きなテレビ画面では、通常それよりも長くなります。長さは知覚的なものです：電話、ラップトップ、またはテレビ画面で、典型的な視聴距離で16pxはほぼ同じように見えます。 このブログは主にテキストベースです。テキストの幅が平均的な人間にとって読みやすいものにしたいと考えています。そのため、メインの幅を画面のパーセンテージで設定するのではなく、文字幅を使用するch単位を設定しました – これは正確には文字ではありませんが、私の目的には十分です。 ```css --width-content: min(75ch, 100%); main { max-width: var(--width-content); } ``` パディングやマージンに関しても同じことが言えます。要素の周りに隙間が欲しい場合、その隙間は内部のテキストに比例して欲しいと思います。幅については、ch単位を再利用するのが理にかなっています。テキストに比例した隙間が欲しいのです。しかし、高さについては、文字幅で垂直距離を表現するのは意味がないかもしれません。その場合、ex単位を使用できます。これは典型的な小文字のサイズです。 CSSクラスをHTMLから排除するという私の考えのように、これでも行き過ぎる可能性があります。すべての参照をpxからchに変更したわけではありません。これが機能するかどうかを実験しているだけです。 pxや他の任意の単位を使用することに、間違っていること、非倫理的なこと、または邪悪なことは何もありません。chとexを使用することは、私の特定の嗜好に合っています。 この投稿を共有する… Jeff Sonstein 私の経験では、相対的なCSS測定値は、pxのような絶対的な測定値よりもほぼ常に役立ちます。良い記事です。返信 2026-08-23 13:01 Shiv J.M. @Edent 私のように、`padding: 0.75em` が効果がない理由を常に混乱して考えてしまうようなことだけはしないでください… 返信 | mastodon.social で元のコメントに返信する 2026-08-23 13:05 Mastodon でさらにコメントを見る。