今回はCSSのwidth（幅）とheight（高さ）の使い方を解説します。
width（幅）とheight（高さ）とは？
・widthは要素の【幅】
・heightは要素の【高さ】
それぞれ要素の幅と高さを設定するために使用されます。
値はpx、%、emなどで指定できます。
width（幅）とheight（高さ）の使い方
使い方をを解説します。
例えば、要素の幅を300px、要素の高さを200pxに設定する場合、以下のように記述します。
div {
width: 300px;
height: 200px;
}上記のように記述することで、HTMLのdivタグに対して、幅300px、高さ200pxを指定することができました。
width（幅）とheight（高さ）の単位について
width、heightには様々な単位あります。
px（ピクセル）
pxはピクセルといいます。
一番使用されることが多い単位になります。
一般的に、画面上の要素の大きさを指定する場合に使用されます。
上記でも説明しましたが、例えばwidth: 200px;と指定すると、要素の幅が200ピクセルになります。
％（パーセント）
％は親要素の幅や高さに対して何パーセントの大きさにするかを指定することができます。
例えば、width: 50%;と指定すると、要素の幅が親要素の幅の50%になります。
em（エム）
emはエムといいます。
要素のフォントサイズに対する倍率で指定することができます。
例えば、font-sizeが16pxの要素に対して、width: 2em;と指定すると、要素の幅が32pxになります。
rem（レム、ルートエム）
remはレムもしくがルートエムといいます。
ルート要素（通常はHTML要素）のフォントサイズに対する倍率で指定することができます。
例えば、ルート要素のfont-sizeが16pxの場合、width: 2rem;と指定すると、要素の幅が32pxになります。
vw（ビューポート幅）
ビューポートの幅に対する割合で指定することができます。
例えば、width: 50vw;と指定すると、要素の幅がビューポート幅の50%になります。
vh（ビューポート高さ）
ビューポートの高さに対する割合で指定することができます。
例えば、height: 50vh;と指定すると、要素の高さがビューポート高さの50%になります。
これらの単位は、それぞれの特徴を持っています。 ピクセルは具体的な値を指定することができるため、要素のサイズを正確に設定するのに適しています。 パーセントやビューポートの単位は、画面サイズに合わせて柔軟にレイアウトを調整するのに適しています。 emやremは、フォントサイズに基づいて要素のサイズを指定するのに適しています。 適切な単位を使うことで、より柔軟でレスポンシブなデザインを実現することができます。
まとめ
以上が、CSSのwidth（幅）とheight（高さ）の使い方の解説になります。
