メインコンテンツにスキップ
すべてのコレクションチュートリアルその他
サイズの単位と縦横比固定の方法
サイズの単位と縦横比固定の方法

%,px,vh,vw,fr,fit,auto

j.sakamoto avatar
対応者:j.sakamoto
2年以上前に更新

■ %(パーセント)

親に対する相対的な大きさを指定します。

■ px(ピクセル)

表示ディスプレイの 1 pxの大きさに依存します。

※ディスプレイによって 1 pxの実寸は変化します。

■ vh(Viewport Height)

ビューポートは、ウェブサイトの表示領域です。つまり、ブラウザウインドウの広さを表す単位です。vhを使用することで、ブラウザに対する相対的な高さを指定します。

1 vh は、ビューポートの高さの 1 %に相当します。

*フルスクリーンでブラウザの高さ一杯にデザインを広げたい場合の指示は、100vh です。

■ vw(Viewport Width)

高さを指定する vh に対して、ビューポートに対する相対的な横幅を指示するのが vw です。

1 vwは、ビューポート(ブラウザウインドウ)の幅の 1%に相当します。

■ fr(エフアール)

fr は、下図のように、整列版の中の余った部分を、指定された比率で子レイヤのサイズを割り当てる単位です。

(fr を指定した子レイヤが1つの場合、fr の値はなんでも構いません)

■ fit(フィット)

整列板の中の子レイヤの合計サイズを、整列版のサイズとします。
余白や隙間が指定されている場合、その分も合計されます。

■ auto(オート)

autoは、主に画像やテキスト等、横のサイズが決まれば、縦のサイズも自然と決まってしまうレイヤで使用されるサイズ指定方法です。(テキストの場合は、横幅も auto指示が可能です)

■縦横比固定の方法

<*1> をクリックすると縦横比を固定出来ます。

こちらの回答で解決しましたか?