CSS width height【要素の幅と高さを指定】

widthとheight

CSSで最もよく使うプロパティの一つ「width」と「height」についてです。

widthは横幅、

heightは高さを指定します。

widthとheightの値

widthもheightも指定できる値は同じです。

初期値

width:auto

autoが指定されているとき、paddingを含めて横幅が100%になります。

width:100%;だとpadding分はみ出ますが、width:autoだとはみ出ません。

指定可能な値

width:数字+単位

例

• width:50%;
• width:100px;
• width:33vw;
• width:calc(100% / 3);

html属性のwidthが単位不要ですが、CSSのwidthは単位必須です。

単位について詳しくはこちら↓

heightと%の注意

heightに%を指定すると親要素の高さに対する割合を指定できます。

ただし、親要素にheight:auto以外が指定されている場合に限ります。

heightに%を指定しようとするとはまるので注意してください。

heightは基本的に指定しない

webサイトは横幅は制限がありますが、高さには制限がありません。印刷物とは違うメリットの一つです。

これによりheightを指定する機会は少ないです。

正方形にしたい、装飾として利用するなどのとき以外はほぼ使わないでしょう。

max-width（最大幅）,min-width（最小幅）の指定

widthを使うときに合わせて覚えたいCSSにmax-widthとmin-widthがあります。

max-widthは最大幅を指定できます。

min-widthは最小幅を指定できます。

レスポンシブデザインのときに便利です。

基本的にレスポンシブデザイン、つまりブラウザの幅に合わせて横幅を伸び縮みさせたいとします。

しかしあまり横長になるとデザインと可読性を保つのが難しい場合があります。

そんなときmax-widthを指定すると指定した幅以上になったときはその幅より広がらなくなります。

min-widthはその逆で指定した幅以下になったときその幅より狭くなりません。

以下のように指定することができます。

.aaa{
max-width:1280px;
width:100%;
min-width:800px;
}

上記の場合、
ブラウザ幅が1280px以上のとき、.aaaの幅は1280pxになります。

ブラウザ幅が1280px～800pxのとき、.aaaの幅はブラウザ幅と同じになります。

ブラウザ幅が800px以下のとき、.aaaの幅は800pxになります。横スクロールも発生します。

　

max-heightとmin-heightも存在しますが、heightを使わない理由と同じでこちらもあまり使うことはありません。

widthとheightはブロック要素にだけ指定可能

widthとheightはブロック要素にだけ指定可能です。インライン要素に指定しても横幅・高さは変わりません。

どうしてもspanなどのインライン要素に指定したい場合はdisplay:inline-block;を合わせて指定しましょう。