8. widthとheightを理解しよう

目次

width(横幅)とheight(高さ)

CSSのwidthプロパティは要素の横幅を、heightプロパティは高さを指定します。

divは非常によく使うタグで、特定の要素を1まとまりにして、CSSのスタイルを当てるために使います。
background-colorは要素の背景の色(文字色はcolorプロパティ)を指定できるプロパティで、skyblueなどの色名のほか、#(シャープ)から始まるカラーコードで指定することもできます。ここでは分かりやすいようにdivに背景色を指定しています。

ブラウザで表示すると・・・

背景が水色の正方形の箱(200px × 200px)ができて、その中に「テキスト」が入っているのが分かります。

また、widthのみを指定して、heightを指定しなければ、heightは子要素(ここでは「テキスト」という文字)の高さに応じて自動で決まります。



値を%で指定する

widthやheightの値は%で指定することもできます。

%は親要素に対してどれくらいの割合かを示すので、上の例では、p(子要素)のwidthとheightはdiv(親要素)の50%で100pxとなります。

水色の正方形の中にサイズが1/2の黄色の正方形があり、その中に文字列が表示されました。

(注)インライン要素のwidth・height

後で解説しますが、aタグはインライン要素と呼ばれ、そのままではwidthやheightの指定をしても効かなくなっています。これを解決するには、displayプロパティの値をblockかinline-blockにする必要があります。