サイズと単位

docs.scrimba.com

フォントサイズをピクセルで設定してページを公開し、快適性のためにブラウザのテキストを大きくした読者がまったく変わらないことに気づきます。カードに固定の幅を指定するとモバイルでオーバーフローします。どちらも同じ質問に帰結します。CSSで数字を入力する場合、その数字は何に対して測定されるのですか？いくつかの単位は固定で、いくつかはフォントにスケールし、いくつかは親にスケールし、いくつかはスクリーンにスケールします。どれがどれかを知ったら、推測するのをやめて、仕事をする単位を選び始めます。

絶対単位と相対単位

CSS単位は2つのファミリーに分かれます。**絶対単位**は決して変わらない固定サイズです。px（ピクセル）はどこでも見かける唯一のものです。相対単位は、読者のフォントサイズやスクリーンの幅など、何か他のものにスケールするサイズです。

部屋を測定することを考えてください。センチメートルは絶対的です。背が高いか低いかに関係なく、壁は400cmです。「3歩分」は相対的です。歩く足によって異なります。絶対単位は正確な制御を提供します。相対単位は、それを見ている人に合わせてページが適応できるようにします。

その適応は重要です。読者の中には、目が楽なため、より大きなデフォルトのテキストサイズを設定する人もいます。相対単位でテキストをサイズ設定すると、その設定が通じて、ページが彼らに合わせて成長します。ピクセルでロックインすると、そのままで彼らを無視します。

CSSのすべての長さは絶対か相対かのどちらかであり、その違いはレイアウトが適応できるかどうかを決定します。**絶対単位**は文脈に関係なく固定サイズに解決されます。pxは実際に使用する唯一の絶対単位です。cm、pt、およびその他は印刷を対象としているためです。相対単位は参照に対して解決され、どの参照かは単位によって異なります。remとemはフォントサイズにスケールし、%は親にスケールし、vwとvhはビューポートにスケールします。

ほとんどのサイズ設定で相対単位を優先する理由は、アクセシビリティとレスポンシブネスです。読者がブラウザのデフォルトフォントサイズを上げると、remでサイズ設定されたものはすべて成長しますが、pxで固定されたものは固定されたままで、その周りのレイアウトを壊す可能性があります。同じことはスクリーンサイズについても成り立ちます。相対単位は1つのスタイルシートをモバイルとモニターに合わせることができます。これがレスポンシブデザインの基礎です。

選択する単位は、あなたの数字が何に固定されているかについての決定であり、その固定点は、レイアウトが読者に応答するか彼らを無視するかを決定するものです。**絶対単位**は、すべての文脈で同じ計算長に解決されます。スクリーンCSSでは事実上pxのみです。物理単位（cm、mm、in、pt、pc）はとにかくピクセルに対して定義されます（定義により1inは96px）、印刷スタイルシートに属しています。相対単位は変わる可能性がある参照に対して解決され、それが適応を可能にします。

参照はゲーム全体なので、各相対単位が何を指しているかを名付けする価値があります。remとemはフォント相対です。フォントサイズ（ルートのまたは要素の）に対して解決されます。%はほとんどのプロパティで親相対です。パーセンテージ幅は、包含ブロックの幅の一部です。vwとvhはビューポート相対です。ブラウザビューポート（ページの見える領域）の一部です。実用的なルールはこれから出てきます。タイプとレイアウトを相対単位で設定し、スケールすべきでないものにpxを保つ。読者が大きなデフォルトフォントサイズを設定したり、ページをズームしたりすると、相対単位が指す参照が移動するので、ページは彼らに合わせて成長します。px値には移動する参照がなく、そのままで、これはあなたが避けようとしているアクセシビリティの失敗です。

Juno絶対単位と相対単位pxのような絶対単位は、決して変わらない固定サイズです。相対単位は、読者のフォントサイズやスクリーンの幅など、何か他のものにスケールします。相対単位は、ページが見ている人に適応できるようにします。これは、より大きなテキストサイズを設定する読者にとって重要な理由です。

Juno絶対単位と相対単位pxは実際に使用する唯一の絶対単位です。それ以外はすべて参照にスケールします。remとemはフォントにスケールし、%は親にスケールし、vwとvhはビューポートにスケールします。読者が自分のデフォルトフォントサイズを上げたときにページが成長するので、相対単位を使用してください。そうしないと、彼らを無視します。

Juno絶対単位と相対単位 すべての単位は数字と固定点であり、その固定点がレイアウトが応答できるかどうかを決定します。pxには移動する固定点がないため、適応することはありません。remとemはフォントに固定され、%は親に固定され、vwとvhはビューポートに固定されます。タイプとレイアウトを相対単位で設定し、固定されたままにするべき部分にpxを保つ。

ピクセルとそれが大丈夫な場合

ピクセル（px）は、長さの小さな固定単位です。16pxは常に16pxなので、考え出すのが最も直接的です。これにより、何をしても同じサイズのままにするべき小さなものに適しています。枠線の厚さ、小さな丸い角、固定アイコン。

.card {
  border: 1px solid #ccc;      /* ヘアラインの枠線、常に1px */
  border-radius: 8px;          /* 固定の丸い角 */
}

問題は、ピクセルは読者を気にしないということです。誰かがブラウザをより大きなテキストで表示するように設定した場合、24pxにロックしたヘッディングは24pxで留まり、選択を無視します。これがpxが枠線と小さな詳細に適している理由ですが、テキストに望む単位ではない理由です。

pxは、長さが固定のままにしておきたいときに到達する単位です。枠線、ヘアライン分割線、小さな固定半径、スケールしない時々のアイコン。それらに対して、その固定性がポイントです。読者のフォントサイズとともに成長する1pxの枠線は間違っているように見えるので、それをピンして留めることは正しいです。

.card {
  border: 1px solid #ccc;      /* フォントサイズに関係なくヘアラインのままです */
  border-radius: 8px;
  padding: 1rem;               /* ただしインテリアスペーシングはタイプでスケールします */
}

欠点は、その中にテキストをサイズ設定しない理由です。読者は、快適性やアクセシビリティのために、ブラウザでより大きなデフォルトフォントサイズを設定できます。そして、pxはそれをオーバーライドします。font-size: 18pxのヘッディングは、デフォルトが16か24であるかに関わらず、18ピクセルでレンダリングされます。そのため、固定された詳細にpxを使用し、読者の設定を尊重するべき何かにフォント相対単位に切り替えてください。次のセクションで説明します。

CSS pxは物理デバイスピクセルではありません。それは参照ピクセル、角度単位です。ブラウザはスケールするため、1pxはスクリーン密度間で一定の見かけのサイズで読み取られます。高密度ディスプレイでは、1つのCSSピクセルは複数のデバイスピクセルにマップされます。これが1pxの枠線が消えるのではなく、ぱりっとしたヘアラインのままである理由です。その固定性により、pxは読者のフォントサイズを追跡すべきでないものに対する正しい呼び出しになります。枠線、1px分割線、小さな半径、box-shadowオフセット、およびヘアライン詳細。

.card {
  border: 1px solid #ccc;      /* 固定ヘアライン；スケーリングすると悪く見えます */
  border-radius: 8px;
  padding: 1rem;               /* インテリアスペーシングは代わりにタイプを追跡します */
}

失敗モードはpxでテキストをサイズ設定しています。ピクセルでfont-sizeを設定すると、読者のデフォルトフォントサイズ（ブラウザ設定で設定できるベースサイズ、多くの場合ロービジョン用）がオーバーライドされます。px値にはその設定に対するスケーリングの参照がないためです。ページズームとの区別に注意してください。最新のブラウザはフルページズームでpxをスケーリングするため、古い「pxはズームを無視する」という主張は古いです。ただし、pxフォントサイズは、デフォルトフォントサイズの設定を特に無視することに注意してください。そしてその設定は、多くの読者が依存するアクセシビリティパスです。支え続けるルール。pxは固定された詳細、読者が拡大できるべき何かに対するフォント相対単位。特に本文とテキストとテキポグラフィ。

Junoピクセルとそれが大丈夫な場合 ピクセル（px）は固定サイズなので、16pxは常に16pxです。これにより、1pxの枠線や小さな丸い角など、そのままにするべき小さなものに適しています。トレードオフは、pxがより大きなテキストを設定した読者を無視することです。したがって、ページの単語に望む単位ではありません。

Junoピクセルとそれが大丈夫な場合 長さがスケールしないべきときにpxを使用してください。枠線、ヘアラインディバイダー、小さい半径。その固定性がそこの機能です。欠点はテキストで表示されます。ここで、pxフォントサイズは読者の大きなデフォルトをオーバーライドするため、固定された詳細にpxを保つし、フォント相対単位でテキストをサイズ設定します。

Junoピクセルとそれが大丈夫な場合 CSS pxは、ブラウザがスクリーン密度間で視覚的に一貫性を保つ参照ピクセルです。これが1pxの枠線がきれいなヘアラインのままである理由です。これにより、枠線やシャドウなどの固定された詳細に適しています。テキストには間違っています。pxフォントサイズは読者のデフォルトフォントサイズの設定を無視するため、代わりにremでタイプをサイズ設定してください。

emとrem

2つの相対単位がフォントサイズにスケールします。到達すべきものは**rem**です。これはページのルートフォントサイズに対して測定されます。これはドキュメント全体に設定されたベーステキストサイズです（デフォルトでは16px）。したがって、1remは16px、1.5remは24px、2remは32pxです。

h1 {
  font-size: 2rem;             /* 2 x 16px = 32px */
}
p {
  font-size: 1rem;             /* 16px、ベースサイズ */
  margin-bottom: 1.5rem;       /* 下部の24pxのスペース */
}

remはそのルートサイズに結びついているため、予測可能です。1.5remはページ上のどこでも同じ意味です。読者がデフォルトのテキストサイズを上げると、remでサイズ設定されたすべてが一緒に成長します。他の単位emは、代わりに要素自体のフォントサイズにスケールします。これは複雑になる可能性があるため、remで開始すると、ほとんど引っかかることはありません。

emとremはどちらもフォント相対であり、違いはどのフォントサイズに対して測定するかです。**rem**はルートフォントサイズに対して相対的です。<html>要素で設定されたサイズ（デフォルトでは16px）なので、1.5remはページ上のどこでも同じ長さに解決されます。emは要素自身のフォントサイズに対して相対的であり、使用する場所に応じて値が変わります。

h1 {
  font-size: 2rem;             /* 常にルート = 32pxの2倍 */
}
.card {
  font-size: 1.125rem;         /* 18px */
  padding: 1em;                /* 1 x この要素の18px = 18px */
}

推奨事項は、remでサイズ設定し、ローカルフォントサイズに結びついたスケーリングにのみemを使用することです。emは、ボタン内のパディングなど、独自のテキストを追跡するべき事柄に適しており、ボタンのフォントサイズとともに成長します。しかし、emはネストされた要素を通じて複合し、人々を驚かせるため、それらのローカルケースに保つし、remに一般的なサイズ設定とテキポグラフィを実行させます。

emとremはどちらもフォント相対であり、固定長ではなくフォントサイズに対して解決され、区別は参照です。rem（ルートem）はルートフォントサイズ（<html>要素で計算されたfont-size）に対して解決されるため、単一のグローバル参照です。1.25remは、見出し、フッター、または6つのレベル深い見出しで同じ計算長です。emは現在の要素の font-sizeに対して解決されるため、その意味はローカルであり、文脈で移動します。

そのローカル参照は、emが複合する場所です。子のemは独自のfont-sizeに対して測定され、font-size自体は継承されるため、ネストされた要素でfont-sizeをemで設定すると、各レベルで乗算されます。

/* 各リストレベルはemでfont-sizeを設定するため、サイズは乗算的にスタックします */
ul { font-size: 0.9em; }       /* 親の0.9倍 */

/* 16pxのルートは以下になります：
   深さ1 -> 14.4px
   深さ2 -> 12.96px  (0.9 x 0.9)
   深さ3 -> 11.66px  (0.9 x 0.9 x 0.9)  */

誰も深くネストされたテキストが縮小されることを要求していません。それはem複合であり、デフォルトでremに到達する主な議論です。トレードオフはコンポーネントローカルスケーリングで実行されます。1つの要素自身のタイプを追跡する値が必要です。0.75emのパディングと0.5emのborder-radiusを持つボタンは、remができないことをfont-sizeにバンプすると単位として再スケールされます。ローカルサイズを無視するため。したがって、働く分割は、ルートに対して安定したままでいるべき何か、独自の要素のフォントサイズでスケールするべき間隔と半径に対してemに対してremです。

流動的なサイズ設定の場合、min()、max()、およびclamp()により、長さは境界間でフレックスします。min(a, b)は現在のビューポートでどちらか小さい方を選び、max(a, b)は大きい方を選び、clamp(min, preferred, max)は優先される値を下限と上限の間に保ちます。見出しの一般的なパターンは、font-size: clamp(1.75rem, 4vw, 3rem)です。ビューポート（4vw）でスケールしますが、1.75remを下回ったり、3remを超えたりすることはなく、多くのブレークポイントのスタックなしでタイプが流動的に保たれます。rem（またはrem境界clamp()）でタイプをサイズ設定することは、ユーザーズームと読者のデフォルトフォントサイズも尊重します。なぜなら、それらはremが解決されるルートを調整するからです。一方、生のvw値はビューポートのみを追跡し、読者のフォント設定を無視します。これがclamp()のremフロアとシーリングが重要な理由です。彼らは表現でアクセス可能な参照を保つ。

Junoemとremremとemはどちらもフォントサイズにスケールし、開始するのはremです。ページのルートサイズに対して測定されます。これはデフォルトでは16pxなので、1.5remは24pxで、どこでも同じ意味です。emは代わりに要素自身のフォントサイズにスケールし、複雑になる可能性があるため、まずremに到達してください。

Junoemとrem どちらもフォント相対です。remはルートフォントサイズに対して測定されるため、どこでも安定していますが、emは要素自身のフォントサイズに対して測定されるため、文脈にシフトし、ネストされたときに複合します。デフォルトでremでサイズ設定し、ボタン内のパディングなど、独自の要素のタイプを追跡するべき間隔にのみemを保つ。

Junoemとremremはルートフォントサイズに固定されているため、1つの安定した参照です。emは要素自身のサイズに固定されており、ネストされている深さを倍増しているため、深くネストされたemフォントサイズが漂います。一般的なサイズ設定にremを使用し、独自のタイプに従うべきコンポーネントローカルスケーリングにemを使用してください。流動的なタイプについては、clamp(1.75rem, 4vw, 3rem)がビューポートでフレックスしながらremフロアと天井はユーザーズームとフォント設定を尊重させます。

パーセンテージ

パーセンテージ（%）は、親に対して要素をサイズ設定します。幅の場合、width: 50%は、要素が座るボックスの幅の半分を意味します。その幅がどうなるかは関係ありません。

.sidebar {
  width: 25%;                  /* 親の幅の4分の1 */
}
.content {
  width: 75%;                  /* 残りの4分の3 */
}

これはレイアウトを流動的にするものです。幅は親の分数であるため、親がするときにそれらは縮小して成長します。ウィンドウのサイズを変更し、50%の列は、固定の500pxの列のようにエッジをこぼすのではなく、幅の半分のままです。その柔軟性が、パーセンテージがレスポンシブデザインに非常に頻繁に表示される理由です。

**パーセンテージ**は親の参照に対して解決されます。widthの場合、参照は親のコンテンツ幅です。width: 50%は、含むボックスの現在のサイズの半分を与えます。これは、パーセンテージベースの列を流動的にするものです。親がサイズを変更するときに、親を追跡します。

.container {
  width: 90%;                  /* その親の90％、下の上限まで */
  max-width: 60rem;            /* 広いスクリーンで60remを超えて成長するのをやめる */
  margin: 0 auto;              /* 中央 */
}

参照は常に幅ではなく、それは人々を突き刺します。パーセンテージのpaddingまたはmargin、垂直なものでさえ、親の幅に対して解決されます。高さではなく。パーセンテージのheightは親の高さに対して解決されますが、測定する必定の高さが親にある場合のみ。解決するものがなく、無視されます。パーセンテージ幅をremでのmax-widthと組み合わせることは、一般的な動きです。ポイントまで流動的で、その後、行が読みやすくなるほど伸びないように上限が決められます。

**パーセンテージ**は相対的ですが、remとemとは異なり、参照はフォントサイズではなく、含むブロック（位置付けられた要素またはインフロー要素の参照を確立するボックス、通常は親のコンテンツボックス）の寸法です。かむキャッチは、参照寸法がプロパティ固有であり、予想する場所ではない場合があるということです。

.hero {
  width: 80%;                  /* 含むブロックの幅の80％ */
  padding-top: 25%;            /* 高さではなく、幅の25％も */
  margin-bottom: 10%;          /* 垂直的であっても再び幅 */
}

width、padding、およびmarginパーセンテージはすべて、垂直パディングとマージンを含む、含むブロックの幅に対して解決されます。その幅ベースの垂直パディングは、回避すべき癖ではありません。これは、aspect-ratioが配信される前に、固定のアスペクト比のボックスの古典的なトリックです。padding-top: 56.25%は、幅でスケールする16:9のエリアを提供するため。heightパーセンテージは、含むブロックの高さに対して解決されますが、その高さが決定的（明示的に設定または別の方法で解決可能）の場合のみ。オートの高さに対して、autoを計算し、何もしないように見え、パーセンテージの高さがサイレントに失敗するという通常の理由です。最新のレイアウトでは、flex-basisとグリッドトラックパーセンテージはより予測可能に動作するため、パーセンテージは流動的な幅のために有用なままで、fr単位とmin()/max()/clamp()はパーセンテージが厄介に処理するケースをカバーしています。

Junoパーセンテージ パーセンテージは親に対してサイズ設定されるため、width: 50%は要素が配置されるボックスの幅の半分です。これにより、列が流動的になります。ウィンドウのサイズを変更し、それらはエッジをこぼすのではなく、成長して縮小します。これは、任意のスクリーンに適合するレイアウトの背後にある主なツールの1つです。

Junoパーセンテージ パーセンテージ幅は親の一部であり、コンテナがサイズを変更するときに列を流動的に保つことです。参照を見てください。パーセンテージのパディングとマージンは親の幅に対して解決されます。垂直なものでさえ、パーセンテージの高さは、親が確定した高さを持つ必要があります。パーセンテージ幅をremでのmax-widthと組み合わせることで、流動的に保ちながら上限が決められます。

Junoパーセンテージ パーセンテージは含むブロックに対して解決されます。参照はプロパティ固有です。width、padding、およびmarginはすべてその幅を使用し、垂直値を含めて、これは幅ベースのアスペクト比ボックスの背後にあるトリックです。パーセンテージの高さには、決定的な親の高さが必要です。そうしないと、autoを計算し、何もしません。流動的な幅のためにパーセンテージを保つし、fr単位とclamp()が厄介なケースを処理させます。

ビューポート単位

ビューポート単位は、ブラウザウィンドウ自体に対してサイズを設定します。**vw**はビューポート幅のパーセンテージであり、vhはビューポート高さのパーセンテージです。ビューポートはページの見える領域です。したがって、100vwはウィンドウの全幅で、100vhはその全高さです。

.hero {
  height: 100vh;               /* スクリーン高さ全体を埋めます */
}

これは、ランディングバナーのような全画面セクションに進むべき対象です。ウィンドウの全画面に埋める必要があります。ユニットがウィンドウを追跡するため、セクションは誰かがサイズを変更したり、デバイスを回転させたりするときに全画面のままで、1つのスクリーンで正しかったであろう固定ピクセル高さを設定することなく。

ビューポート単位は、ビューポット（ブラウザウィンドウの見える領域）に対して測定されます。**vw**はビューポート幅の1％であり、vhはその高さの1％です。100vhは全ウィンドウの高さであり、50vwはその幅の半分です。彼らは、任意のサイズでウィンドウを埋める必要がある全画面セクションとヒーロバナーの自然なフィットです。

.hero {
  min-height: 100vh;           /* 少なくとも全画面の高さ */
  padding: 2rem;
}

モバイルで知っておくべきことが1つあります。100vhは歴史的にブラウザのアドレスバーの背後にあるスペースを含めていたため、全高さセクションは見える領域より背が高く、下部で切り落とされる可能性があります。修正はdvh（動的ビューポート高さ）です。これにより、ブラウザクロムが表示および非表示になるときに実際の表示高さが追跡されます。モバイルの全画面セクションでmin-height: 100dvhに到達してください。生のvwはフォントサイズで読者のフォント設定を無視するため、ビューポート単位をレイアウトではなくタイプに保つことに注意してください。

ビューポット単位は、ビューポット（ブラウザウィンドウの見える描画領域）に対して解決されます。**vw**とvhはその幅と高さの1％です。vminとvmaxは、2つのうち小さい方と大きい方の1％であり、方向に応答するべき値に便利です。それらの参照はウィンドウであり、親ではないため、レイアウトの周りに依存しない全ビューポートセクションのための正しいツールです。

.hero {
  min-height: 100dvh;          /* モバイルセーフな全高さの表示 */
  padding: 2rem;
}

鋭いエッジはモバイルです。ビューポート高さは1つの数字ではありません。ブラウザのアドレスバーとツールバーは、ユーザーがスクロールするときに展開および折りたたまれるため、100vhは最大の可能なビューポートに固定されており、全高のセクションはクロムの背後にオーバーフローします。CSSは現在3つを公開しています。svh（小さなビューポート高さ、クロム展開）、lvh（大規模、クロム折りたたまれた）、およびdvh（動的、現在の状態をライブで跟踪します）。見える領域に適合する必要があります。全画面セクションにdvhを使用して、バーが移動するときに再流すことを受け入れます。もう1つのトラップは、生のvwでののfont-sizeです。ビューポートユニットの参照はルートフォントサイズではなくウィンドウであるため、font-size: 4vwは読者のデフォルトフォントサイズとビューポートを変更しないページズームの両方を無視し、pxフォントサイズと同じアクセシビリティテストに失敗します。修正は、それをバウンドすることです。clamp(1rem, 4vw + 0.5rem, 2rem)は流動的な動作を保ちながら、rem項は読者の設定が移動できる参照を復元します。

Junoビューポット単位vwとvhはブラウザウィンドウに対してサイズを設定します。100vwはその全幅であり、100vhはその全高さです。ランディングバナーなどの全画面セクションに進むべき対象です。ウィンドウのサイズを変更するときに全画面のままで、1つのピクセル高さにロックされるのではなく。

Junoビューポット単位vwとvhはウィンドウの幅と高さの1％であり、任意のサイズでスクリーンを埋める必要があるヒーロセクションに適しています。モバイルでは、100vhはアドレスバーの背後にある見える領域よりも高い場合があるため、そこでdvhに到達します。ビューポット単位をレイアウトに保つ。生のvwのタイプではなく、読者の設定を無視します。

Junoビューポット単位 ビューポット単位は親ではなくウィンドウに固定されるため、全ビューポートセクションに適しています。vminとvmaxは方向に応答します。モバイルの高さは1つの値ではないため、dvhを使用してブラウザクロムが移動すると見える領域をフォローしてください。フォント設定を無視する生のvwでタイプをサイズ設定することはありません。clamp()にrem項でバウンドして、アクセス可能な参照が表現に留まるようにします。