CSSで幅や高さを調整する方法を説明していきます。
サイズ（幅・高さ）の調整方法
幅は「width」プロパティ、高さは「height」プロパティを使って指定します。
- 数値で指定：pxやrem、%などの単位指定
- auto：関連するプロパティの値によって自動調整
box{
width:300px;
height:200px;
}
この場合は、横幅300px、高さ200pxの箱が作られるイメージです。
auto / 単位紹介
auto
要素の幅に自動調整されます。親要素が500pxであれば、500pxになります。
%
親要素が500pxの場合に、50％としてすれば250pxになります。
親要素のフォントサイズが16pxの場合は、16px=100%となります。
em
親要素のフォントサイズが16pxの場合は、16px=1emとなります。
rem
ルート要素のフォントサイズが16pxの場合は、16px=1emとなります。
vw
viewport widthの略称です。
ビューポート（WEBサイトの表示領域）の幅が1200pxの場合に50vwの場合は、600vwとなります。
vh
viewport heightの略称です。
ビューポート（WEBサイトの表示領域）の高さが1200pxの場合に50vhの場合は、600vhとなります。
px
ここまで紹介した単位は「相対単位」でしたが、pxに関しては「絶対単位」となります。
他の要素から影響を受けることなく指定出来ます。
10pxの場合は必ず10pxで指定されます。
max / minでセットで使用する方法
「画面が広くても800px以上にはしたくない」など、コンテンツ幅の制御などに便利なセット使いが出来ます。単体ではなく、必ず他の指定方法とセットで使う必要があります。
- max-width：指定する値まで
- min-width：指定する値以上
- max-height：指定する値まで
- min-heght：指定する値以上
box{
width:100%;
max-width:800px;
}
コメント