CSSで幅と高さを指定する方法（width, height）

CSSでの幅と高さ指定は基本中の基本です。幅と高さ指定は様々な要素においてサイズを決めるときに使いますので、しっかり抑えておきましょう。

使い方

幅と高さ指定にはwidth, heightプロパティを使います。

例）

widthが幅、heightが高さです。この場合、幅が320ピクセル、高さが240ピクセルの青い四角ができます。

大きさの指定の仕方は３通りあります。

autoで指定する

何も指定しない場合、この設定になります。要素の中の大きさによって変動します。

％で指定する

親要素の幅や高さを基準に何％かを指定します。

例えば、親要素が幅640ピクセルだった場合、その子要素にwidth:10%と指定すると幅は64ピクセルということになります。

pxで指定する

直接ピクセル数で指定します。

各指定の使い分け

％指定は親要素の指定にしたがって決まるので、例えばブラウザのウィンドウサイズを変更した際にもその影響を受けます。

したがって％指定は画面全体に対しての大きさ比率が決まっているもの、また大きさがある程度流動的になっても良い場合にして要します。逆にpx指定はブラウザのサイズを変えても要素のサイズを変えたくないものに使うと良いでしょう。