CSS 幅と高さを指定するサンプル(widthとheight)

CSSの幅と高さを指定するサンプルです。
幅はwidthプロパティ、高さはheightプロパティを使用します。

width / height プロパティ

width : 値
height : 値
説明
数値 + 単位   指定した単位で設定します。 
数値 + % 包括ブロックに対する割合で設定します。
auto ブラウザが自動的に調整します。(初期値)
値を継承しない

サンプル

widthとheightのサンプルです。

外側の点線のブロックのwidthは300pxでheightは200pxです。
box1は、widthは300pxでheightは50pxを指定しています。
box2は、widthは50%、heightは40%を指定しています。
→%をpxになおす場合、包括ブロックに対する割合になるので
widthは300px/0.5 = 150px、heightは200px / 0.4 = 80pxになります。
box3は、autoを指定しています。

コード

上記サンプルのコードです。

<style>
#box1{
	width:300px;
	height:50px;
}
#box2{
	width:50%;
	height:40%;
}
#box3{
	width:auto;
	height:auto;
}
#box{width:300px;height:200px;border:1px dotted #000;}
#box div{border:1px solid #000;box-sizing:content-box;
background:LightCyan;}
</style>

<div id="box">
	<div id="box1">box1:<br /> width:300px,height:50px</div>
	<div id="box2">box2:<br /> width:50%,height:40%</div>
	<div id="box3">box3:width:auto,height:auto</div>
</div>

関連の記事

CSS 最大の幅を指定するサンプル(max-width)
CSS 最小の幅を指定するサンプル(min-width)
CSS paddingとborderの表示方法を指定する(box-sizing)
CSS 要素の枠内の余白を指定するサンプル(padding)
CSS 要素の枠外の余白を指定するサンプル(margin)
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)
CSS ボーダーの表示方法を指定するサンプル(border)

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る