こんにちは、Mochiです。
CSSで幅や高さってどうやって指定すればいいんだろう？幅や高さの指定がうまくいかないんだけど、そもそもどんな仕組みなんだっけ？🤔
この記事ではそのような方に向けて、CSSで幅や高さを指定する方法をわかりやすく解説します。
この記事を読むことにより、幅や高さの仕組みを深く理解し、幅や高さを指定する方法を使いこなせるようになります。
では、さっそく学んでいきましょう！まずは幅と高さを理解するために重要な前提知識、ボックスモデルを解説します。
🧐前提知識：ボックスモデルについて
ボックスモデルは、次の図のような要素の大きさを構成するモデルです。ただ単に幅（width）と高さ（height）があるわけではなく、様々なものが含まれています。
では、それぞれ理解していきましょう。
コンテンツ
まずコンテンツは、要素そのものが表示される領域で、1番基本となる幅と高さを持ちます。
今回学ぶ、幅（width）と高さ（height）の指定方法では、このコンテンツの幅と高さを指定します。よって、パディングやマージンを含めた幅や高さではないことを理解しておきましょう。
ボーダー
次にボーダーは、コンテンツの周りにあります。そして、このボーダー自体にも太さがあります。
ボーダーについて、詳しく知りたい方は記事「CSSで文字や要素に色を付ける・変更する方法をわかりやすく解説」を読んでいただくと、より知識が身につきます。
パディング
コンテンツとボーダーの間には、パディングがあります。パディングはコンテンツの周りに空白を作る役割があります。
フィルエリア
コンテンツからボーダーまでを合わせた領域をフィルエリアと呼びます。この範囲がbackground-colorプロパティやbackground-imageプロパティで塗られます。
コンテンツだけが塗られるわけではなく、パディングの領域も塗られることを理解しておきましょう。
マージン
ボーダーの外側にはマージンがあります。マージンは、ボーダーの外側に余白を作る役割があります。
そして、最終的な要素の幅や高さは、フィルエリアと同じになります。
つまり、幅は
- 左ボーダー + 左パディング + 幅 + 右パディング + 右ボーダー
となり、高さは
- 上ボーダー + 上パディング + 高さ + 下パディング + 下ボーダー
となります。
また、ボックスのサイズはフィルエリアにマージンを足したものになります。
つまり、幅は
- 左マージン + フィルエリアの幅 + 右マージン
となり、高さは
- 上マージン + フィルエリアの高さ + 下マージン
となります。
以上がボックスモデルについてです。では、基本を理解したところで、まずは幅を指定していきましょう。
✍️幅の指定方法
幅はwidthプロパティを使って指定します。様々な値で指定することができるのですが、1番シンプルな長さを単位pxで指定すると次のように書きます。
h1 {width: 200px;}
今回の場合200pxを指定することで、h1タグの幅が200pxとなりました。
指定できる値としては
- 長さ：幅の長さをpx、cm、vwなどの単位で与える
- auto: デフォルト。自動的に幅が決まる
- %: 幅が親要素の幅から決まる
があります。
では次にautoを使った、幅の指定方法を学んでいきましょう。
autoによる幅の指定
widthプロパティにautoを指定することで、関連するプロパティに従って自動的に要素の幅が決まります。
ブロック要素の場合は、基本的に横いっぱいまで幅が広がります。
p {width: auto;}
autoはwidthプロパティにおいて、デフォルトで指定されています。そのため、何も指定しない場合には、autoが適用されています。
次は%について、学んでいきましょう。
%による幅の指定
widthプロパティに%を使って指定することで、親要素の大きさに対する比率で幅が決まります。
例えば、幅400pxの親要素<div>タグに対して、半分の比率50%で<p>タグを指定すると次のように、親要素の半分である200pxの幅になります。
p {width: 50%;}
基本的な幅の指定方法は以上になります。次は、高さの指定方法を見ていきましょう！
🤫高さの指定方法
高さはheightプロパティを使って指定します。基本的には幅と似た仕組みです。そのため、長さをpxで指定すると次のようになります。
h1 {height: 100px;}
指定できる値も幅と同様に
- 長さ：高さをpx、cm、vhなどの単位で与える
- auto: デフォルト。自動的に高さが決まる
- %: 高さが親要素の高さから決まる
があります。
autoを見ていきましょう。
autoによる高さの指定
heightプロパティにautoを指定することで、関連するプロパティに従って自動的に要素の高さが決まります。
幅とは異なり、縦いっぱいになるのではなく、基本的には中身の要素の高さになります。
p {height: auto;}
autoはheightプロパティにおいて、デフォルトで指定されています。そのため、何も指定しない場合には、autoが適用されています。
%による高さの指定
heightプロパティに%を使って指定することで、幅と同様に、親要素の大きさに対する比率で高さが決まります。
例えば、高さ200pxの親要素<div>タグに対して、半分の比率50%で<p>タグを指定すると次のように、親要素の半分の高さ100pxになります。
div p {height: 50%;}
ここで注意点として、親要素の高さが指定されていない場合、%による高さの指定がうまく効かないので気をつけてください。
幅と高さを指定する時の注意
いくつか幅や高さを指定する際の注意点を説明します。頭の片隅に置いておきましょう。
インライン要素には幅や高さを指定できない
ブロック要素やインラインブロック要素ではこれまで説明した幅や高さの指定ができます。しかし、インライン要素では指定できないので注意しましょう。
ブロック要素とかインライン要素って何だっけ？🤔という方は記事「HTMLのブロック要素でグループ化する方法の解説と一覧」を読むことで、理解が深まるのでおすすめします。
“width: 100%”と”width: auto”は少し異なる
widthプロパティではボックスモデルで説明したように、コンテンツの幅(width)を指定します。そのため、”width: 100%”の指定ではコンテンツの幅が親要素いっぱいとなり、この時パディングやボーダーの幅は含まれていません。
よって、パディングやボーダーが親要素をはみ出してしまう場合があります。
一方で、”width: auto”の指定では、パディングやボーダーの幅も含めた、フィルエリアの幅が親要素（横）いっぱいになります。そのため、はみ出さずにうまく調整されます。
”width: 100%”ではみ出してしまう際には、この違いが原因である可能性を確かめてみましょう。
🎉まとめ
ボックスモデルについて理解し、幅と高さを指定する方法を学びました。
ボックスモデルのコンテンツの幅をwidthプロパティで指定することができ、高さをheightプロパティで指定することができます。
widthプロパティとheightプロパティでは、それぞれ「長さ」「auto」「%」を使って指定することができます。autoでは自動的に、%では親要素との比率で幅や高さが決まります。
また、注意点として、インライン要素には幅や高さを指定できません。また、”width: 100%”と”width: auto”は扱う幅が少し異なります。
この記事を読んだことにより、みなさんは幅や高さの仕組みを深く理解し、幅や高さを指定する方法を使いこなせるようになりました。スキルアップしていて素晴らしいです👏
幅や高さは見た目を作る際の基本になります。しかし、仕組みは意外にも複雑で、苦労する場面もあるかと思います。その際には、またこの記事を読んで参考にしてみてください。
