widthとheightとは？幅、高さに関係する難解プロパティ（html,css）

＜数値＞

width: 300px;
height: 500px;

＜パーセント＞

width: 50%;
height: 100%;

＜auto＞

width: auto;
height: auto;

「width、height」とは？

width、heightとは「幅」「高さ」を決めるプロパティです。

しかし

width、heightは、入れた数値が直接「幅」「高さ」になるわけではありません。

box-sizingと連携して「幅」「高さ」が決まります。（auto除く）

＜box-sizing「content-box」＞

＜box-sizing「border-box」＞

「box-sizing」についての説明は、下の記事をご覧ください。

【関連記事】box-sizingとは？幅、高さに関係する重要プロパティ（html,css）

width、heightは、微妙に違う

width、heightは、よく似ていますが微妙に違ったりもします。

特に「width: auto」「height: auto」は、機能が違うので注意してください。

それでは「widthから説明」していきます。

widthとは

widthとは「幅」を決めるプロパティです。

しかし

widthへ入れた数値が直接「幅」になるわけではありません。

box-sizingと連携して「幅」は決まります。（auto除く）

＜box-sizing「content-box」＞

＜box-sizing「border-box」＞

width３つの値

widthは、大きく分けると３つの値があります。

１：実数
２：パーセント
３：auto

詳しくみていきましょう。

1：実数（width）

実数は、直接数値を指定するやり方です。

width: 100px;
width: 300px;
width: 5em;
など

そして

幅は「widthへ入れた数値」「box-sizing」が連携して決まります。

それでは、例を見ていきましょう。

実数の例（width）

今から、例を挙げます。

例は、子要素を親要素へ置く例です。

widthの例なので、heightは省いています。

１：子要素、親要素ともに「同じ大きさ」（content-box）

「子要素」「親要素」どちらも同じ大きさの例です。

同じ大きさなので普通に置かれます。

２：子要素、親要素ともに「同じ大きさ」（border-box）

「子要素」「親要素」どちらも同じ大きさの例です。

同じ大きさなので普通に置かれます。

３：子要素の方が「かなり大きい」（content-box）

「子要素」をわざと大きくして、無理やりはみ出させました。

「子要素の方が大きかったらどうなる？」これを見てください。

４：子要素の方が「かなり大きい」（border-box）

「子要素」をわざと大きくして、無理やりはみ出させました。

「子要素の方が大きかったらどうなる？」これを見てください。

2：パーセント（width）

パーセントは、百分率（パーセント）で指定するやり方です。

width: 100%
width: 50%

など

そして

幅は「widthへ入れたパーセント」「box-sizing」が連携して決まります。

それでは、

「widthへ入れたパーセント」は、何に対してのパーセントなのでしょうか？

それは「親要素content幅」に対してのパーセントになります。

親要素content幅　＝　子要素width100%

例を見ていきましょう。

パーセントの例（width）

今から、例を挙げます。

例は、子要素を親要素へ置く例です。

widthの例なので、heightは省いています。

１：子要素100%パーセントを置いた（content-box）

子要素の100％は「親要素content幅」が基準になっています。

２：子要素100%パーセントを置いた（border-box）

「子要素」の100％は、親要素content幅が基準になっています。

３：auto（width）

width: autoは、デフォルト指定です。

デフォルトなのに他とは違う動きをします。

どのような動きをするのでしょうか？

それは、

子要素へwidth: autoを指定すると「子要素の全てのボックスモデル（横方向だけ）」を親要素へ入れます。

そして

子要素のbox-sizing設定は、無視されます（横方向だけ）。

autoの例（width）

今から、例を挙げます。

例は、子要素を親要素へ置く例です。

widthの例なので、heightは省いています。

１：子要素をwidth: autoにして置いた

子要素をwidth: autoにすると、子要素のbox-sizing設定は無視されます（横方向だけ）。

さらに

子要素のwidth: autoは、親要素content幅が基準になっています。

子要素のwidth: auto　＝　親要素contentの幅

widthの説明は以上です。

次はheightを説明します。

heightとは

heightとは「高さ」を決めるプロパティです。

しかし

入れた数値が直接「高さ」になるわけではありません。

box-sizingと連携して「高さ」は決まります。（auto除く）

＜box-sizing「content-box」＞

＜box-sizing「border-box」＞

height３つの値

heightには、大きく分けると３つの値があります。

１：実数
２：パーセント
３：auto

詳しくみていきましょう。

１：実数（height）

実数は、直接数値を指定するやり方です。

height: 100px;
height: 300px;
height: 5em;

など

そして

高さは「heightへ入れた数値」「box-sizing」が連携して決まります。

それでは、例を見ていきましょう。

実数の例（height）

今から、例を挙げます。

例は、子要素を親要素へ置く例です。

heightの例なので、widthは省いています。

１：子、親要素ともに「同じ大きさ」（content-box）

「子要素」「親要素」どちらも同じ大きさです。

同じ大きさなので普通に置かれます。

２：子、親要素ともに「同じ大きさ」（border-box）

「子要素」「親要素」どちらも同じ大きさです。

同じ大きさなので普通に置かれます。

３：子要素の方が「かなり大きい」（content-box）

「子要素」をわざと大きくして、無理やりはみ出させました。

「子要素の方が大きかったらどうなる？」これを見てください。

４：子要素の方が「かなり大きい」（border-box）

「子要素」をわざと大きくして、無理やりはみ出させました。

「子要素の方が大きかったらどうなる？」これを見てください。

２：パーセント（height）

パーセントは、百分率（パーセント）で指定するやり方です。

height: 100%
height: 50%

など

そして

高さは「heightへ入れたパーセント」「box-sizing」が連携して決まります。

「heightへ入れたパーセント」は、何に対してのパーセントなのでしょうか？

それは「親要素content高さ」に対してのパーセントになります。

親要素content高さ　＝　子要素height100%

さらに

親要素がheight: autoだった場合、子要素ではパーセント設定が使えません。
（％は、自動でautoに置き換わります）

つまり

heightでパーセントを使う場合は、親要素方向のどこかで実数が必要になります。
（height: 300pxなど親要素より上へ実数を入れる必要がある）

それでは、例を見ていきましょう。

パーセントの例（height）

今から、例を挙げます。

例は、子要素を親要素へ置く例です。

heightの例なので、widthは省いています。

１：子要素「20%」「30%」「50%」置いた（content-box）

子要素を３個用意しました。

３個つらねて置くとどうなるか、を見ていってください。

子要素の100％は、親要素content高さが基準になっています。

２：子要素「50%」「50%」置いた（border-box）

子要素を２個用意しました。

２個つらねて置くとどうなるか、を見ていってください。

「子要素の100％」は、親要素content高さになります。

３：auto（height）

「height: auto」は、親要素で使う時と、子要素で使う時があります。

親要素で使う時　＝　親要素が子要素に合わせて伸び縮み
子要素で使う時　＝　子要素が中の文字量に合わせて伸び縮み

このようになります。

なので

「height: auto」は、何かに合わせて伸び縮みする指定方法とも言えます。

さらに

height: autoは「子要素のボックスモデルを全て入れる」性質も持っています。

そして

「height: auto」は、親要素で使っていると、子要素ではパーセント指定が使えません。

なぜ使えないのでしょうか？

それは、

「height: auto」＝子要素へ合わせる
「height: 100%」＝親要素へ合わせる

お互いがお互いを参照するため、これでは何も決めることができません。なので使えません。

それでは

親＝「height: auto」
子＝「height: 100%」

このように指定したときは、どうなるのでしょうか？

それは、下のようになります。

親＝「height: auto」
子＝「height: auto」

子要素の「height: 100%」は「height: auto」へ自動で置き変わります。

autoの例（height）

今から、例を挙げます。

子要素を親要素へ置く例です。

例は、２種類を用意しました。

普通に置いた場合（content-box）

親要素height: autoの例です。

＜解説＞

子要素をよく見てください。

ボックスモデルの入れ込み方が、おかしなことになっています。

高さ　＝　box-sizingの設定無視
幅　　＝　box-sizingの設定通り

このように高さ、幅でbox-sizingの設定がチグハグになっています。

なぜなのでしょうか？

それは、親要素「height: auto」のせいです。

「height: auto」は「子要素の高さのbox-sizing設定を無効」にして、子要素の高さのボックスモデルを全て親要素へ収めます。

しかし

「height: auto」は「子要素の高さのbox-sizing設定を無効」にするだけで、

幅には関係ありません。

結果として

高さ、幅でbox-sizing設定がチグハグになっています。

普通に置いた場合（border-box）

ぼぼ「普通に置いた場合（content-box）」と同じです。

子要素のheightへautoを入れた

子要素単体の例です。

親要素は省きました。

文字量に合わせて高さが伸び縮みします。

親要素「height auto」子要素「width auto」

最後の例です。

今までの復習として用意しました。

非常に難しい内容です。

この例では何がしたいのかというと

「子要素の全てのボックスモデルを親要素へ入れる」

この様子を伝えたいため作りました。

つまり

下のような設定です。

「親要素　height auto」
「子要素　width auto」

この設定にすると「子要素の全てのボックスモデルを親要素へ入れる」ことになります。

まとめ

width、heightとは「幅」「高さ」を決めるプロパティです。

width、heightは、box-sizingと連携して「幅」「高さ」が決まります。（auto除く）

＜content-box＞

＜border-box＞

width、heightは、３つの値があります。

１：数値（px,emなど）
２：パーセント
３：auto

特に「width: auto」「height: auto」は、機能が違うので注意してください。

「width: auto」は、子要素の全てのボックスモデルを親要素へ入れます。

「height: auto」は、中身に対して高さが伸び縮みします。

＜親要素で「height: auto」を使っている様子＞

＜子要素で「height: auto」を使っている様子＞