1.横幅を指定する「width」と高さを指定する「height」
「width」と「height」は、HTML要素に対して大きさを指定することができるCSSプロパティです。
「width」は横幅、「height」は高さを指定します。
試しに横幅を320px、高さを240pxの<p>タグを設置してみましょう。
サンプルHTML：
<html>
<head>
<link rel="stylesheet" href="style/index.css" />
</head>
<body>
<p>横幅と高さを指定する</p>
</body>
</html>
サンプルCSS：
p{
background : #FFF0F5;
width: 320px;
height: 240px;
}
プレビュー：
わかりやすく背景に色を付けてサイズを指定してみました。
2.widthとheightの値の単位について
さきほどは大きさをピクセルで指定しましたが、他にも以下のような単位で指定することができます。
- auto（デフォルト）
- px
- %
- vw・vh
%で指定する
%で指定した場合は、指定する要素の親要素に対して○%の大きさが出力されます。
たとえば横幅・高さが200pxの<div>に対して50%の大きさをの<div>を設置したとします。
サンプルCSS：
/* 外側 */
.wrapper{
width: 200px;
height: 200px;
background: red;
}
/* 内側 */
.inner{
width: 50%;
height: 50%;
background: yellow;
}
プレビュー：
黄色い部分は横幅・高さ100pxになりました。
vw・vhで指定する
vw・vhのvとは「Viewport」、wはwidth、hはheightの略です。Viewportというのは「表示領域」という意味で、vw・vhは開いているブラウザの表示の大きさに対しての割合を示す単位です。PCやMacで見ているブラウザは可変しますが、スマホの場合は画面のサイズというふうにイメージしてみてください。
%は親要素に領域が左右されますが、vw・vhはブラウザサイズに委ねられるので、レスポンシブデザイン（横幅が可変し、スマホにもPCにも対応できるデザインのこと）を実装する際に活用されます。
vwとvhは0〜100で指定することができ、100vw・100vhは表示中のブラウザのサイズいっぱいの大きさになります。例えば10vwとすると、ブラウザの横幅の10%分のサイズを指定することができます。
3.widthとheightが指定できない要素について
width・heightが指定できるのは、ブロックレベル要素というふうに分類されるHTMLタグだけです。
例えばh1〜h6・p・div・header・footer・main・aside・nav・ul・liなどはブロックレベル要素に分類されます。
逆にインラインというふうに分類されるHTMLタグはサイズを指定することができません。
例えばa・span・strong・img・inputなどはインライン要素に分類されます。
インライン要素をブロックレベル要素に変換するCSSプロパティ「display」については以下のレッスンをご参照ください。
3-8. 要素の表示形式を変更する（display）
