幅と高さによる CSS サイズ設定

レスポンシブな Web デザインを開発する場合、幅や高さなどの寸法は、その中のコンテンツに基づいて決定されます。ただし、これらのプロパティは、ピクセル (px)、パーセンテージ (%)、em、rems、ビューポートの幅 (vw)、ビューポートの高さ (vh)、ビューポートの最小値と最大値 (vmin と vmax)、小数単位 (fr)、文字単位 (ch) などのさまざまな単位を使用して、より正確に定義できます。

ここでは、これらの測定単位のそれぞれについて詳しく説明し、最小値と最大値、オーバーフロー管理、オブジェクト適合プロパティなどの概念についても説明します。

具体的には、このレッスンでは次の内容を取り上げます。

1. 自動サイズ調整
2. ピクセル
3. パーセンテージ値
4. エムス
5. レムス
6. ビューポートベースの単位
7. 分数単位
8. 文字単位
9. 最小サイズと最大サイズ
10. アスペクト比
11. オーバーフロー処理
12. オブジェクトフィットの使用

自動サイズ調整

デフォルトでは、Web 要素はコンテンツに基づいてサイズを自動的に調整します。

ピクセル

特に特定のピクセル値が設定された画像や要素を扱う場合、ピクセル値は比例して拡大縮小できます。

デフォルトのピクセル値を利用するには:

1. 数値を入力してください
2. ヒット 入力 鍵

パーセンテージ値

em と同様に、パーセンテージは親要素のフォント サイズを基準とします。たとえば、パディングされたセクション内で幅を 25% に設定すると、要素内のスペースの 4 分の 1 が割り当てられます。

エムス

Em は、テキスト要素のパディングを比例的に調整するときに便利です。各ブラウザのデフォルトのフォント サイズは通常 16 ピクセルです。Ems は親要素に基づいてフォント サイズを計算し、それに応じてテキスト サイズを拡大縮小します。

フォントサイズが 16 ピクセルの場合:

• 1 em は 16 ピクセルに相当します
• 2 emは32ピクセルに相当します
• 1.5 emsは24ピクセルに相当します

段落の親要素のフォントサイズを変更することもできます。 divブロック:

1. 親要素を選択
2. フォントサイズを調整します（例：20ピクセル）。 スタイルパネル 下 タイポグラフィ

親要素を 20 ピクセルに設定した場合:

• 1 emは20ピクセルに相当します
• 2 emは40ピクセルに変換されます
• 3 emは60ピクセルに相当します

レムス

Rem は HTML フォント サイズに応じて計算されます。

各 rem 値は、ユーザーのブラウザ設定を尊重しながら (コードで上書きされない限り)、HTML フォント サイズを乗算して決定されます。このアプローチにより、個々のテキスト サイズ設定との一貫性が確保されます。

rem はルート em 単位 (ルート ems) を参照し、変更されない限り HTML レベルで指定されたデフォルトのフォント サイズと一致します。em とは異なり、rem は個々の要素またはその親からフォント プロパティを継承せず、代わりにブラウザーのフォント サイズに基づいて拡大縮小します。

ビューポートベースの単位

ビューポート幅 (VW) は、ブラウザ ウィンドウの幅を測定し、ビューポートの幅に比例して調整します。

分数単位

小数単位 (fr) は、クイック スタック要素などのグリッド レイアウト プロパティ内で有効です。

4 列のグリッドで作業する場合、各列のデフォルトは 1fr で、グリッド スペースの 4 分の 1 が割り当てられます。列を追加すると、各 fr が 1/5 に調整されます。これらの単位の柔軟性により、列のギャップなどの計算が自動的に処理されます。

分数単位についてさらに詳しく調べます。

文字単位

文字単位 (CH) は、段落や見出しなどの要素の幅を設定して、1 行あたりの文字数を制御するのに最適です。

たとえば、段落の最大幅を 60ch に制限すると、選択したフォント (文字幅 0) に基づいて 60 文字を収容できるようにボックス サイズが調整されます。このユニットを使用すると、特に文字ベースの制約に対して、テキスト幅を正確に制御できます。

最小および最大サイズの制約

要素の幅を50%と指定すると、親要素内のスペースの半分を占めます（ セクションビューポートのサイズが変更されると、要素もそれに応じて拡大縮小されます。

最小 (例: 200 ピクセル) と最大 (例: 500 ピクセル) の幅制限を導入すると、要素の幅が 200 ～ 500 ピクセルの範囲に維持され、さまざまなビューポート サイズに適応できるようになります。

一般的な方法としては、フルハイトのセクション (例: 100vh) を設定することです。ただし、この方法では、要素がオーバーフローしたり、ビューポートの下部でクリップされたりして、視覚的な問題が発生する可能性があります。 

ヒント： 最小高さプロパティを使用して、固定セクションの高さを排除し、代わりに最小高さ 100vh を適用します。これにより、セクションは常に少なくともビューポート全体の高さに広がります。

たとえば、セクションの高さを最小の高さとして 800 ピクセルに設定すると、コンテンツの幅の調整に対応しながら 800 ピクセルの高さが保証されます (必要に応じて垂直方向の拡張が可能)。

段落の幅を約 60 文字に制限する必要がある場合は、個々の段落を最大幅 (例: 60ch) を強制するように構成できます。これにより、段落の幅の制限が約 60 文字に標準化されます。

アスペクト比設定

アスペクト比設定では、サイト全体の要素のサイズを設定するための事前定義されたカスタマイズ可能な比率が提供され、特定の比率が必要な画像、ビデオ、グリッド レイアウトに特に役立ちます。

5つあります 比率 利用可能なプリセット:

• オート — 必要に応じて寸法を調整し、柔軟なレイアウトに適しています
• アナモルフィック（2.39:1） — 幅広い次元を必要とする映画体験に最適
• ユニビジウム/Netflix (2:1) — 現代のテレビやストリーミングコンテンツに適しています
• ワイドスクリーン（16:9） — 幅の広いレイアウト要素に最適
• 横長（3:2） — 少し高さのあるウェブ要素に適しています
• ポートレート（2:3） — 背の高いレイアウト要素に最適
• 正方形（1:1） — バランスのとれたレイアウトアイテムに最適
• カスタム — カスタマイズされた比率を設定する柔軟性を提供

幅や高さなどの既存のサイズ設定プロパティと一緒にアスペクト比を組み込むと、一貫性が確保されます。たとえば、定義済みの寸法を持つ要素に特定の比率を適用すると、反対の寸法がそれに応じて調整されます。比率を適用する前に幅と高さの両方の値が設定されている場合、指定された寸法が指定された比率よりも優先されます。

内部の内容に関係なく要素の比率を維持するには、 オーバーフロー 財産に 隠れた 有益である可能性があります。