widthとheightを使えば、要素の横幅と縦幅を指定することができます。
width:指定する値; ← 横幅
height:指定する値; ← 縦幅
}
widthは横幅を指定し、heightは縦幅を指定することができます。
指定できる値はpx、%、autoなどがあります。
初期値はautoに設定されています。
よく使われるケースとして、画像と組合せて幅を指定したり、後に説明する「表の幅」を指定したり、boxの作成などに用います。
widthとheightの使用例
例えば、以下のような画像があるとします。
この画像をこのままページに表示させると縦横300pxのまま表示されてしまうのですが、widthとheightを使えば幅を調整して表示することが可能です。
[CSSの記述例]width:150px;
height:150px;
}
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>幅の指定</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<img src="300px_img.jpg" class="haba">
</body>
</html>
縦横300pxの画像が、縦横150pxで表示されました。
ただし、実際には300pxの画像が読み込まれCSSによって縮小されているだけなので、ファイルサイズなどはそのままです。
覚えておきたいポイント
変更できるのは見た目のサイズのみ
widthやheightで画像サイズを変更した場合、見た目のみ拡大縮小可能です。
画像ファイル自体の容量サイズは変更されません。
例えば、画像容量サイズが500kbの縦横300pxの画像をwidthとheightを使って縦横100pxにしても、画像容量サイズは500kbのままです。
大きい画像や重たい画像をホームページに掲載する場合はCSSで調整するのではなく、画像編集ソフトなどで目的のサイズまで調整するようにしましょう。
