CSSでheight:autoの使い方を現役エンジニアが解説【初心者向け】
初心者向けにCSSでheight:autoの使い方について解説しています。これは高さを自動的に調整します。height:autoの使い方と画面上での見え方、反映できる要素の種類について知っておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSでheight:autoの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
height:autoの使い方について詳しく説明していくね！
お願いします！
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それぞれの構文エラーチェック、タグの要素チェックをしてみましょう。
ここまでのまとめ
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の使い方について紹介しました。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
執筆してくれたメンター
| ゆかちん先生
フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。 TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。 |
CSSでheight:autoの使い方がよく分かったので良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
