CSSでheight:autoの使い方を現役エンジニアが解説【初心者向け】

CSSでheight:autoの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

heightとは

heightとは、「要素の高さ」を示すプロパティです。

対して、widthは「要素の幅」を示すプロパティです。

heightはwidthと一緒に使うことも多く、凡庸性の高いプロパティです。

今回は、自動で高さを合わせる「height:auto」について詳しく解説していきます。

 

height:autoを設定することにより得られる効果

height:autoは自動的に中身の要素にピッタリの高さにするプロパティです。

htmlには様々なタグがある中で、高さをcssで設定しない場合の初期値はautoと設定されています。

 

例えば、タグ内に文字がたくさん詰まっていた場合、文字数に応じて、縦の高さを自動的に合わせることができます。

また、画像や子要素が詰まっている場合も同様に合わせることが可能です。

よく使用されるコードとして、画像タグにcssでwidth:100%; height:auto; と指定すると、横幅の%（または準じた単位）と同じ比率で高さも自動的に変更されます。

例えば、width:80%; height:auto;の場合、heightはwidthに合わせた80%になります。

コードでは以下のように記述しましょう。

img {
width: 100%;
height: auto;
}

 

注意したいこと：

タグのもつ要素によってはheight:auto;は反映されません。

heightを設定することができるのは、「ブロックレベル要素」「inline-block要素」「table要素」のみです。

そのため、heightを設定したのに何かうまくいかない場合は、html、cssそれぞれの構文エラーチェック、タグの要素チェックをしてみましょう。

 

[PR] Webデザインで副業する学習方法を動画で公開中

ここまでのまとめ

heightとは、「要素の高さ」を示すプロパティです。

そして、要素をはみ出さずに表示してほしい場合は、height:auto; を活用しましょう。

 

実際に書いてみよう

以下、height:auto; を活用したコード例となります。

HTML

<div class="heightauto">
  <p><span>高さ指定が「auto」の場合。（ブラウザ幅を変えても、背景色のある親要素から文字ははみ出しません）</span><br>
ここにはheight:auto「ぼくはもう、すっかり天の野原に来た。」ジョバンニは云いました。
「それにこの汽車石炭をたいていないねえ。」ジョバンニが左手をつき出して窓から前の方を見ながら云いました。
「アルコールか電気だろう。」カムパネルラが云いました。
　ごとごとごとごと、その小さなきれいな汽車は、そらのすすきの風にひるがえる中を、天の川の水や、三角点の青じろい微光びこうの中を、どこまでもどこまでもと、走って行くのでした。
  </p>
 
</div>

<div class="height200px">
  <p><span>高さ指定のある場合。ここにはheight:20px（高さ20pxが設定されています。）<br></span>「ぼくはもう、すっかり天の野原に来た。」ジョバンニは云いました。
「それにこの汽車石炭をたいていないねえ。」ジョバンニが左手をつき出して窓から前の方を見ながら云いました。
「アルコールか電気だろう。」カムパネルラが云いました。
　ごとごとごとごと、その小さなきれいな汽車は、そらのすすきの風にひるがえる中を、天の川の水や、三角点の青じろい微光びこうの中を、どこまでもどこまでもと、走って行くのでした。
  </p>

</div>

<p>宮沢賢治　銀河鉄道の夜より抜粋</p>

CSS

/*高さ指定のcss記述*/
.height200px{
  background:lightblue;
  height:200px; /*ブラウザ幅を狭くすると、文字が背景色から飛び出してしまいます。*/
}

.heightauto{
  background:turquoise;
  height:auto;
}


div{
  width:60%;
}

span{
  font-weight:bold;
}

実行結果（CodePen）

今回は、CSSでのheightの役割とheight:autoの使い方について紹介しました。

 

執筆してくれたメンター

ゆかちん先生 フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。 TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。

 

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。