レスポンシブWebデザインでは、幅と高さのプロパティは、内部のコンテンツに基づいてサイズ調整されますが、より具体的には、ピクセル（px）、パーセント（%）、ems、rems、ビューポート幅（vw）、ビューポート高（vh）、ビューポート最小および最大（vminおよびvmax）、小数単位（fr）、文字単位（ch）で定義することが可能です。
このレッスンでは、これらの各単位と、最小値と最大値、オーバーフロー、オブジェクトフィットについて説明します。
- 自動サイズ調整
- 画素数
- パーセンテージ
- Ems
- レム
- ビューポート単位
- 分数単位
- 文字単位
- 最小・最大寸法
- オーバーフロー
- オブジェクトフィット
1.自動サイズ調整
デフォルトでは、ウェブ要素はその中にあるものに基づいて自動的にサイズ調整されます。
2.画素数
画素値は、画素値が割り当てられている画像などの要素に比例して拡大縮小することができます。
デフォルトのピクセル値を使用する場合。
- 数値を入力する
- Enterキーを押す
3.パーセンテージ
emsと同様、パーセンテージは親要素のフォントサイズを参照します。セクションにパディングを施し、幅を25%に設定した場合、要素内の25%のスペースを占有します。
4.Ems
Emsは、テキストを含む要素に比例したパディングを設定したい場合に実用的です。どのブラウザにもデフォルトのフォントサイズがあり、通常は16pxです。Emは親要素を参照し、フォントサイズを比例して拡大縮小します。
フォントが16ピクセルの場合
- 1つのemは16ピクセル
- 2 ems 32ピクセル
- 1.5emsは24ピクセル
Divブロックのような段落の親要素でフォントサイズを設定することもできます。
親要素を選択する
親要素を選択し、スタイルパネルの「タイポグラフィ」でフォントサイズを変更します（例：20ピクセル）。
親要素が20ピクセルの場合
- 1emが20ピクセルに
- 2つのemsが40ピクセル
- 3つのemsが60ピクセル
5.レム(rem)
レムは HTML のフォントサイズに対する相対値です。
remは、remの値にHTMLのフォントサイズ（コード内で手動で変更しない限り、ブラウザのフォントサイズを尊重します）を乗じて計算されます。これは、ユーザーのブラウザの設定を尊重するという利点があります (ブラウザでカスタムテキストサイズが設定されている場合)。
レムはルートを参照する（ルートエムズ） - HTMLタグを参照し、あなたがそれを変更しない限り、ブラウザのデフォルトのフォントサイズを尊重します。(レムは、要素や要素の親に設定されたフォントを無視し、ブラウザのフォントサイズに基づいて拡大縮小します)。
6.ビューポートベースの単位
VWは、ブラウザのビューポートの幅に比例して拡大縮小される測定値です。
7.分数単位
分数単位（fr）は、Gridに設定されているものであれば、どのようなものでも使用できます。
4列のグリッドの場合、各列のデフォルトは1frで、1frはグリッドの4分の1に相当する。列を追加した場合は、1frは1/5に相当します。これらの値は変更することができます（例えば、最初の列を2frに設定します）。分数単位は、物事を自動的に拡大縮小します。列の間隔も含めて、すべてが自動的に計算されます。
8.文字単位
CHは、段落や見出しなど、1行に読まなければならない文字数を制限するためにサイズを設定するのに適しています。
例えば、段落の最大幅が60CHの場合、選択されているフォント（段落の書体）を使って、段落の境界線（ボックス）が60個のゼロの幅に等しくなるように設定されます。
CHを使うと、文字数を制限したいときにテキスト要素に幅を設定することができます（フォントのゼロ文字の幅を基準にしています）。
9.最小・最大寸法
ある要素の幅を50%に設定すると、その要素は親要素（セクション）内の50%のスペースを占有します。ビューポートのサイズを変更すると、要素もそれに応じて拡大縮小されます。
要素の幅を最小（200pxなど）と最大（500pxなど）に設定すると、ビューポートが縮小・拡大しても、幅は50%のまま、最小（200px）と最大（500px）の幅にとどまります。
よくあるデザインパターンは、全高のセクションを設定することです（例：高さ100vh）。これは、ブラウザが短くなって要素がはみ出したり、下の方が切れたりする（見た目があまりよくない）までは問題ではありません。
プロからのアドバイス：最小値を使用して、セクションから明示的な高さを削除し、代わりに最小の高さを100vhに設定します。これで、セクションがビューポートの高さの100%より短くなることはありません。
セクションの高さを800ピクセルに設定したい場合、最小の高さに設定すると、コンテンツの幅を考慮しつつ、高さが800ピクセルになります（必要であれば、さらに高くすることができます）。
段落の幅を60文字以上にしたくない場合は、任意の段落を選択して「すべての段落」タグをクリックし、最大幅を設定します（例：60ch）。これで、上書きしない限り、デフォルトでは段落の幅が60文字（書体が何であれ、ゼロが60個）に自己制限されます。
10.オーバーフロー
オーバーフローは、要素に設定された幅と高さに、コンテンツが入りきらない場合に自動的に発生します。デフォルトでは、はみ出したテキストが表示されます。要素を選択し、スタイルパネル > サイズ > オーバーフローをクリックすると、最初のアイコン、可視（目）アイコンがデフォルトで選択されており、これはオーバーフローするテキストがデフォルトで可視であることを意味します。
オーバーフローに関するその他のオプションは以下の通りです。
- 隠す 要素の境界の外側にあるコンテンツをクリップ（隠す）します。
- Scroll：オペレーティングシステムやブラウザによっては、スクロールバーを表示し、Divブロックの内容をスクロールできるようにします。
- Auto（自動）：ユーザーがスクロールできるようにします（そもそもオーバーフローするほどのコンテンツがある場合のみ実行します）。
11.オブジェクトフィット
オブジェクトフィットを使用するには、スタイルパネルの「サイズ」セクションに移動します。
- 親要素（Divブロックなど）に幅と高さを設定します。
- 子要素（Divブロック内の画像など）に幅と高さを100%に設定します。
- フィットプロパティをテストする：フィル、コンテナ、カバー、なし、スケールダウンなど、プロジェクトに最適なオプションを選択します。
注：オブジェクトフィットを使うときは、親要素に幅と高さがあることを確認してください。これは、すべてのオブジ ェ ク ト は親要素の内側に内容をはめ込みますが、 オブジェクトは親の子要素に対して設定されるためです。