料金プランを有効化して学習を始めましょう。

Size

要素のサイズを定義し、最小および最大の幅と高さの値を設定し、要素の境界を超えるコンテンツを非表示にします。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。

引用元

レスポンシブなウェブデザインでは、幅と高さのプロパティは内部のコンテンツに基づいてサイズが調整されますが、ピクセル（px）、パーセンテージ（%）、em、rem、ビューポート幅（vw）、ビューポート高さ（vh）、ビューポートの最小と最大（vminとvmax）、分数単位（fr）、文字単位（ch）を使用してより具体的に定義することができます。

このレッスンでは、これらの単位、および最小と最大の値、オーバーフロー、オブジェクトフィットについて説明します。

自動サイズ設定

デフォルトでは、ウェブ要素は内部の内容に基づいて自動的にサイズが調整されます。

ピクセル

ピクセル値は、割り当てられたピクセル値を持つ画像や他の要素と比例してスケーリングされることがあります。

image

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

  1. 数値を入力します。
  2. Enter キーを押します。

Percentages

emsと同様、パーセンテージは親要素のフォントサイズを参照します。セクションにpaddingを設定し、幅を25%に設定した場合、要素内のスペースの25%を占めることになります。

em

テキストを含む要素に比例したパディングを設定する場合、emは実用的です。各ブラウザには通常16pxのデフォルトフォントサイズがあります。emは親要素を参照してフォントサイズを比例して拡大/縮小します。

フォントが16ピクセルの場合：

  • 1 em は 16 ピクセル
  • 2 em は 32 ピクセル
  • 1.5 em は 24 ピクセル

また、段落の親要素（例：Divブロック）でフォントサイズを設定することもできます：

  1. 親要素を選択します
  2. スタイルパネル の Typography でフォントサイズ（例：20ピクセル）を変更します。

親要素が20ピクセルの場合：

  • 1 em は 20 ピクセルになります
  • 2 em は 40 ピクセルになります
  • 3 em は 60 ピクセルになります

rem

remsはHTMLのフォントサイズに対して相対的です。

remは、remの値をHTMLのフォントサイズ（ブラウザのフォントサイズをコードで手動で変更しない限り、ブラウザのフォントサイズを尊重）で乗算して計算されます。これにより、ユーザーのブラウザ設定（カスタムテキストサイズが設定されている場合）を尊重するメリットがあります。

remsはルート（ルートems）を参照します。つまり、HTMLタグを参照し、ブラウザのデフォルトフォントサイズを尊重します（手動で変更しない限り）。 （remsは要素やその親の要素で設定されたフォントを無視し、ブラウザのフォントサイズに基づいてスケーリングされます。）

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

VWは、ブラウザのビューポートの幅の測定値であり、ビューポートの幅に比例してスケーリングされます。

分数単位（FR）

分数単位（fr）は、grid 表示プロパティが設定されたもの、Quick Stack 要素を含む任意の要素内で動作します。

4列のグリッドがある場合、各列はデフォルトで1frになります。つまり、1frはグリッドの1/4に相当します。列を追加すると、各frは1/5になります。これらの値を変更することができます（例：最初の列を2frに設定）。分数単位は自動的にスケーリングされ、列間のギャップを含むすべての計算が自動的に行われます。

文字単位（CH）

CHは、段落や見出しのような要素のサイズを調整して、1行あたりに読む必要のある文字数を制限するのに適しています。

例えば、段落の最大幅が60chの場合、選択したフォント（段落の書体）を使用して、段落の境界（ボックス）を60個のゼロの幅に設定します。

CHは、テキスト要素の幅を設定する際に使用できるもので、文字の数を制限しようとする際に便利です（フォントのゼロ文字の幅に基づいています）。

最小および最大の寸法

要素の幅を50%に設定すると、親要素（Section）内のスペースの50%を占めます。ビューポートのサイズを変更すると、要素はそれに応じてスケーリングされます。

要素に最小値（例：200px）と最大値（例：500px）の幅を設定すると、要素は50%の幅を保ち、最小（200ピクセル）および最大（500px）の幅に収まります。ビューポートが縮小または拡大すると、要素はその制約内で動きます。

一般的なデザインパターンは、フルハイトのセクションを設定することです（例：高さ100vh）。これは、ブラウザが短くなり、要素が下部でオーバーフローしたり切り取られる場合に問題となります（あまり良くない見た目です）。

ヒント：セクションから明示的な高さを削除し、代わりに最小の高さを100vhに設定すると、セクションの高さがビューポートの高さの100%より短くならなくなります。

セクションの高さを800ピクセルに設定したい場合、最小の高さを設定することで、内容の幅を尊重しながら800ピクセルの高さが確保されます（必要に応じてより高くなる可能性があります）。

例えば、段落が60文字を超えないようにしたい場合、任意の段落を選択し、すべての段落タグに入り、最大幅（例：60ch）を設定します。これにより、デフォルトでは（上書きしない限り）タイプフェイスに関係なく段落が60文字で制限されます。

オーバーフロー（Overflow）

要素に幅と高さが設定され、内容が収めるスペースが足りない場合、オーバーフローが自動的に発生します。デフォルトでは、オーバーフローするテキストは表示されます。要素を選択し、Style panel > Size > Overflow に移動すると、最初のアイコンであるvisible（目のアイコン）がデフォルトで選択されていることが分かります。これは、オーバーフローするテキストがデフォルトで表示されることを意味します。

オーバーフローの他のオプションは次のとおりです：

  • Hide は要素の境界外にあるコンテンツをクリップ（非表示）します。
  • Scroll は、使用しているオペレーティングシステムとブラウザによって異なりますが、Divブロックの内容をスクロールするためのスクロールバーを表示します。
  • Auto は、最初にオーバーフローするコンテンツが十分にある場合にのみ、ユーザーがスクロールできるようにします。

オブジェクトフィット（Object fit）

オブジェクトフィットを使用するには、スタイルパネル のSizeセクションに移動します：

  1. 親要素（例：Divブロック）に幅と高さを設定します。
  2. 子要素（例：Divブロック内の画像）に100%の幅と高さを設定します。
  3. フィットのプロパティをテストします：fill、contain、cover、none、およびscale down — プロジェクトに最適なオプションを選択します。
注意: オブジェクトフィットを使用する際は、親要素に幅と高さがあることを確認してください。これは、すべてのオブジェクトフィットのオプションが親要素内にコンテンツをフィットさせるためであり、オブジェクトフィットは親の子要素に設定されるからです。