要素のサイズについて

2025年12月3日

ページを構成する要素<main>や<div>などのサイズを指定し、レイアウトを見やすくする必要があります。

また、その中の子要素に対しても適切に指定しないと、はみ出したり余分な余白ができてしまいます。

サイズを指定する単位やコードをまとめました。

widthとheight

レイアウトを構成する要素に、width（横幅）とheight（縦幅）を指定する必要があります。

サイズの設定が曖昧だとレイアウトが崩れて見づらいサイトになってしまいます。

サイズを特に指定しない場合の初期値がautoになります。

この場合要素は横幅は画面いっぱいに広がりますが、縦幅は広がりません。

縦幅は自動的に中の要素の幅になるため、横幅とは考え方が異なります。

autoと似たようなものに100%があります。

この場合横が画面幅いっぱいになることは同じなのですが、

autoと異なりpaddingを含めずに100%となるため、

paddingの適用がある場合その分はみ出して表示されることになります。

その際はboxsizing-:border-boxを合わせて適用することでレイアウトを合わせることもできます。

要素の単位には絶対値と相対値の考え方があります。

絶対値・・・指定した数値が画面幅などで変化しないもの。pxやcmなど。
相対値・・・画面幅や要素に対しての割合などで変化するもの。%やrem、vhなど。

絶対値は数値が変化しないためpaddingなどレイアウトが崩れないような箇所に使いやすく、

相対値は画面幅でサイズが変化するレスポンシブに対応しやすいなど、場面に合わせて利用することが必要です。

画像にも同様にサイズの指定をすることができます。

画像はサイズがバラバラなことも多いため、object-fitを使用して整えることができます。

画像の縦横比を変えずに拡大縮小し、要素に余白が発生しない様にトリミングされます。

要素全体に余白が発生しないように拡大縮小し、それに合わせて縦横比が変化します。

拡大や縮小されずに元の画像のサイズで表示されますが、表示領域に収まらない部分はトリミングされます。

画像の縦横比を変えずに拡大縮小されます。縦横比が要素に合わない場合余白が発生します。

画像が要素より小さい場合はnone、大きい場合はcontainが適用されます。

要素のサイズをしっかり決めてレイアウト構成ができると、コーディングがすごくスムーズに進みます。

逆にうまく設定しておかないと、他要素に干渉してしまい修正に時間がかかってしまいます。

コーディング前のレイアウト構成時にしっかりバランスを整えていきましょう。

よかったらシェアしてね！