widthとheight(幅・高さ)

CSSで幅の指定はwidth、高さの指定はheightになります。一見簡単そうに見えて、意外と複雑なので覚えておきましょう。

width、heightを学ぶ上で覚えておかないといけないのが親と子の関係になります。

親要素と子要素とは？

例えば下記コードを見てみましょう。

　　
田中
　　
佐藤
　　
鈴木

↑この場合、ulが親要素でliが子要素になります。

　　
日本一多い苗字は佐藤です。

↑この場合、divが親要素でpが子要素になります。

  


  
日本一多い苗字は鈴木では？

↑この場合htmlが全てのタグの親になります。headはtitleの親です。bodyはpの親です。

widthとheightとは？

width：横幅、height：高さです。
widthとheightを100pxに設定するとこうなります。

ブロック要素・インライン要素のおさらい

ブロック要素・インライン要素の特徴をおさらいしておきましょう。
HTMLのブロック要素・インライン要素

注目してほしいのが幅・高さの設定です。ブロック要素のhtmlタグは幅・高さが設定できます。何も設定していない状態では、幅はいっぱいに広がっています。

反対にインライン要素では幅・高さの設定ができません。a、spanなどがこれにあたります。幅・高さを設定したいときはCSSで「display」を使いましょう。display:block;とかけばブロック要素になります。

widthの値について

widthの値の書き方は3つあります。

width:auto;とは？

widthは何も設定しないとautoになっています。ブロック要素の場合、コンテンツの量に限らず幅いっぱいに設定されます。インライン要素の場合、コンテンツ量の幅に設定されます。

ブロック要素は幅いっぱいに設定されますが、親要素の幅を超えることはありません。親要素が800pxで子要素がautoの場合、子要素の幅は800pxになります。

width:◯◯px;とは？

widthをpx（ピクセル）で設定すると、設定した値の幅になります。親要素の大きさなどは関係ありません。

注意としては、子要素が親要素を超えてしまう恐れがあることです。親要素が600px、子要素が800pxの場合、子要素の幅がオーバーしてしまいます。

width:◯◯%；とは？

%での設定は親要素に依存します。親要素が800pxで子要素を50%に設定すると、子要素は400pxになります。その子要素の子要素に50%と設定すれば200pxになります。

heightの値について

heightの値の書き方は3つあります。

height:auto;とは？

widthがautoの場合は幅いっぱいに広がりますが、heightがautoの場合、コンテンツに合わせて高さが変わります。コンテンツが増えれば、高さも広がります。

height:◯◯px;とは？

heightのpx(ピクセル)指定はwidthと同じく、指定した値の大きさになります。コンテンツが増えても高さの変更はありません。ですので、使うには注意が必要です。これはあまり使いません。

height:◯◯%;とは？

widthの%は親要素を設定していなくてもbody(ブラウザ)の幅に合わせて変化しますが、heightの%はwidthと違い、親要素の設定をしていないと効きません。