この記事では、ウェブページのレイアウトを構築する上で非常に重要な「width」と「height」プロパティについて詳しく解説します。
このプロパティを理解すると、ウェブページの要素のサイズを思い通りに設定できるようになります。
それでは早速、幅と高さを指定する方法や注意点について見ていきましょう。
widthとheightとは？
CSSにおけるwidthプロパティとheightプロパティは、要素の幅と高さを指定するために使用されます。
これらのプロパティを使うことで、画像、テキストボックス、ボタンなど、さまざまな要素のサイズを自由に設定できます。
widthプロパティ
widthプロパティは、要素の幅（横方向のサイズ）を指定します。
例えば、特定の要素の横幅を固定したい場合や、ボックスの幅を画面全体の50%にしたい時など、このプロパティを使用することができます。
heightプロパティ
heightプロパティは、要素の高さ（縦方向のサイズ）を指定します。
ボタンの高さを調整したり、画像の縦横比を維持しつつ高さを変更したりするのに役立ちます。
widthとheightの指定方法
widthとheightの値は、さまざまな単位で指定することができます。
それぞれの単位には特徴があり、用途によって使い分ける必要があります。
ピクセル（px）
絶対的な長さを指定します。
例えば、100pxと設定すると、幅や高さは100ピクセルに固定されます。
div {
width: 100px;
height: 100px;
}パーセンテージ（%）
親要素に対する割合で指定します。
例えば、親要素が幅1000pxの場合、width: 50%;と指定すると500pxになります。
div {
width: 50%;
height: 75%;
}ビュー幅（vw）とビュー高さ（vh）
ビューポートの幅や高さの割合で指定します。vwはビューポート幅の1%を、vhはビューポート高さの1%を意味します。
div {
width: 50vw;
height: 50vh;
}相対単位（em、rem）
フォントサイズに基づいて指定します。
emは親要素のフォントサイズに対する相対値で、remはルート要素（通常はhtml）のフォントサイズに対する相対値です。
div {
width: 20em;
height: 10rem;
}自動（auto）
自動的にサイズを決定します。
通常、コンテンツのサイズに基づいて計算されます。
また、autoはwidth,とheightプロパティの初期値でもあります。
div {
width: auto;
height: auto;
}【注意】インライン要素にはwidthとheightは適用されない
htmlの要素にはインライン要素とブロック要素があり、インライン要素に対しては、widthとheightの指定が効かなくなってしまいます。
主なインライン要素：<span>、<a>、<img>、<input>
主なブロック要素：<h1>~<h6>、<p>、<div>、<li>
実際にインライン要素のspanタグとブロック要素のdivで試してみましょう。
<!-- ブロック要素のdivの場合 -->
<div style="width: 200px; height: 100px; background-color: pink;">
ブロック要素のdivです
</div>
<!-- インライン要素のspanの場合 -->
<span style="width: 200px; height: 100px; background-color: skyblue;">
インライン要素のspanです
</span>上記のコードをブラウザで確認してみるとこのようになります。
この結果からわかる通り、
ブロック要素のdivは、指定したwidthとheightが効いています。
それに対してインライン要素のspanは、指定したwidthとheightが効いていおらず、spanタグのコンテンツの幅と高さが要素の幅と高さとなっています。
もしwidthやheightプロパティを指定しても効かない時は、その要素がインライン要素であるかブロック要素であるか確認してみると良いかもしれません。
また、インライン要素にもwidthやheightプロパティを指定したい時は、CSSの「display」プロパティの値を「block」（display: block;）とすることで、ブロック要素のようにwidthとheightを指定することができます。
displayプロパティに関する説明は別の記事で紹介していく予定ですので、お楽しみにしていてください。
まとめ
widthとheightプロパティは、ウェブデザインにおいて非常に重要な役割を果たします。
Web制作の現場では、毎日のように使用するプロパティの一つです。
さまざまな単位で設定できるため、どの単位を使用したらどのような挙動になるのか、ぜひ一度試してみてください。
コメント