2016/09/17 2016/09/17

レスポンシブにも対応！CSSプロパティ「width」と「height」の使い方

やぁ、一度は巨大化したいユトピ(@yutopi60pa)だよ。

今回はCSSでは基本中の基本、幅を決める「width」と高さを決める「height」を解説していくぜ！
これは非常に使いまくるプロパティなので、しっかりと勉強していきましょう！

1 width・heightとは？
2 レスポンシブでの指定方法
3 まとめ

width・heightとは？

CSSプロパティの「width」と「height」とは指定した要素の幅と高さを決めるプロパティです。

指定は以下の方法です。

pxで指定・・・具体的な数値で指定します。
%で指定・・・相対的な数値で指定
vh、vwで指定・・・viewportに合わせて指定

vh・vwについては解説した記事をご覧ください。

・【CSS】まだpxと%で指定してるの？新時代のサイズ指定『vw・vh指定法』！！

それでは一つ一つ見ていきましょう！

width・heightを使ってみよう！

pxで指定！

コード

CSS
#wh {
 width:300px;
 height:400px;
 background: orange;
}

HTML
<div id="wh">幅300px、高さ400pxだよ！</div>

CSS

#wh {

width:300px;

height:400px;

background: orange;

}

HTML

結果

#wh 幅300px、高さ400pxだよ！

ここでは幅と高さをpxで指定しましたね。
これはそのままの意味で指定された要素は幅300px、高さ400pxで表示されます。

width・heightを使ってみよう！

%で指定！

CSS
#oya1 {
 width: 400px;
 height: 500px;
 background: aqua;
}
#whp {
 width: 50%;
 height: 80%;
 background: orange;
}

HTML
<div id="oya1">
 <div id="whp">幅50%、高さ80%だよ！</div>
</div>

CSS

#oya1 {

width: 400px;

height: 500px;

background: aqua;

}

#whp {

width: 50%;

height: 80%;

background: orange;

}

HTML

</div>

結果

#whp 幅50%、高さ80%だよ！

こちらは%指定です。
ここでは画面の幅や、指定した要素の親要素の幅と高さによってサイズが変動します。

今回の場合は親要素が幅400px、高さが500px、そして子要素は幅50%、高さ80%で指定しましたね。

ということは親要素の幅400pxの50%=200px、高さ500pxの80%=400pxということになります。

このように%で指定した場合は親要素の大きさによってサイズが変動していきます。

width・heightを使ってみよう！

width: 80vw、height: 100vhを指定

CSS
div {
	width: 80vw;
	height: 100vh;
}
#view1 { background: red; }
#view2 { background: blue; }
#view3 { background: green; }
#view4 { background: yellow; }

HTML
	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=600, height=500">
		</head>
		<body>
			<div id="view1"></div>
			<div id="view1"></div>
			<div id="view1"></div>
			<div id="view1"></div>
		</body>
	</html>