SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのheightの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:29動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、ハイトです。
  4. 0:05これは要素の高さを決める、とても基本的なプロパティです。
  5. 0:09箱をどれくらいの高さで表示するかを指定でき、指定しなければ、中身の量に合わせて高さが自然に決まります。
  6. 0:16この動画では、基本の書き方、指定できる値、パーセントが効く条件、そして固定したときに内容がはみ出す注意点まで順番に見ていきます。
  7. 0:25幅を決めるウィドスと対になるプロパティとして、イメージしながら聞いてください。
  8. 0:30まずは高さを変えると見た目がどう変わるのか、感覚をつかむところから始めましょう。
  9. 0:36まず基本の書き方です。
  10. 0:37セレクターを書いたら、ハイトと書き、コロンのあとに高さの値を書き、最後にセミコロンを付けます。
  11. 0:44スライドの例では、高さを八レムに指定しています。
  12. 0:48レムは文字サイズを基準にした単位なので、利用者が文字を大きくする設定にしても、
  13. 0:53高さが一緒に広がりやすく、読みやすさを保ちやすくなります。
  14. 0:59エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。
  15. 1:08まずはこの一行を書いて、箱の高さがどう変わるか確かめましょう。
  16. 1:13書き方に慣れれば、ほかのサイズ系のプロパティにもそのまま応用できます。
  17. 1:19次に、指定できる値を確認します。
  18. 1:21代表的なのは、長さ、割合、そしてオートです。
  19. 1:25ピクセルやレムといった長さで書けば、その高さがそのまま使われます。
  20. 1:30パーセントなどの割合も書けますが、この場合は親要素の高さを基準に計算される点に注意してください。
  21. 1:39たとえば五十パーセントなら、親の高さの半分になります。
  22. 1:43オートは、要素の内容や種類に応じて高さが自動で決まる指定で、初期状態の値でもあります。
  23. 1:50普段はレムやピクセルで試し、必要な場面で割合を使うのが分かりやすい進め方です。
  24. 1:57値の意味を一つずつ言葉で説明できると、指定ミスにも気付きやすくなります。
  25. 2:03初期値と継承について整理します。
  26. 2:05ハイトの初期値はオートです。
  27. 2:07オートのときは、箱の高さは中身の量に合わせて決まるので、文章が増えれば箱も縦に伸びます。
  28. 2:14そして、このプロパティは親から通常は継承しません。
  29. 2:17親に高さを付けても、子要素に自動で同じ高さが伝わるわけではないので、高さを決めたい要素そのものに指定する必要があります。
  30. 2:26また、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、
  31. 2:30普段は長さやオートを直接書くことがほとんどです。
  32. 2:35この決まりを知っておくと、親と子で高さがそろわない理由も説明しやすくなります。
  33. 2:40割合で指定するときの大切な条件を押さえます。
  34. 2:44たとえば子要素にハイト、五十パーセントと書いても、親要素の高さが決まっていないと、
  35. 2:49基準になる数値がないため、思った高さにならないことがあります。
  36. 2:55割合は親の高さが確定しているかどうかなど、条件に依存するのが特徴です。
  37. 3:00使いたいときは、まず親にレムなどで明確な高さを付け、そのうえで子に割合を指定してください。
  38. 3:07逆に、親も子もオートのままなら、どちらも内容に合わせて伸びるので、割合に頼らない書き方のほうが素直な場合も多くあります。
  39. 3:17迷ったら、まず親の高さを開発者ツールで数値として確認してみてください。
  40. 3:22固定した高さと、オートの違いを比べます。
  41. 3:25八レムのように長さで決めると、内容が少なくても多くても、箱の高さは同じになります。
  42. 3:32見た目をそろえたいときには便利ですが、文章量が増える箱を固定すると、文字を拡大したときに内容が入り切らず、
  43. 3:37はみ出しやすくなるのが弱点です。
  44. 3:43一方オートなら、内容に合わせて箱が伸びるので、はみ出しは起きにくくなります。
  45. 3:49高さを最低限だけ確保したいなら、固定ではなくミンハイトを使うのがおすすめです。
  46. 3:55目的に合わせて使い分けましょう。
  47. 3:58どちらが正解というより、内容の性質に合わせた選択が何より大切です。
  48. 4:03ここからは記事の実例です。
  49. 4:05エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を置きます。
  50. 4:11その中には、ハロー、シーエスエスから始まる文章を入れ、文章を増やして折り返しも確認できるようにしています。
  51. 4:19頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  52. 4:24親と子の入れ子構造が、そのまま後のシーエスエスの対象になります。
  53. 4:28比べたいのは高さだけなので、文章などの土台は固定したままにします。
  54. 4:33構造をシーエスエスと対応させて見ておきましょう。
  55. 4:37この土台は、値を変えて比べるためだけに用意されたシンプルな構成です。
  56. 4:41土台のシーエスエスです。
  57. 4:43ステージは最大幅を三十レムにし、デモの箱には濃い緑の枠線と薄い緑の背景を用意して、
  58. 4:48違いが見えるようにします。
  59. 4:52最後の行でハイトを八レムにすると、内容の量に関係なく、箱は八レムの高さで固定されます。
  60. 4:59文章が多いと、箱の中で窮屈に見えるかもしれません。
  61. 5:03次に最後の行だけをオートへ置き換えると、高さは内容に合わせて決まり、文章が増えれば箱も伸びます。
  62. 5:10この一行の違いが実例の比較ポイントです。
  63. 5:14保存して再読み込みし、箱の縦の大きさに注目してください。
  64. 5:18ブラウザーで実際の高さを見比べると、言葉だけの説明よりずっと理解が深まります。
  65. 5:24活用場面を考えてみましょう。
  66. 5:26ページの先頭にある大きな見出し領域や、バナーのような装飾が中心の箱では、
  67. 5:31高さを固定すると画面の印象をそろえやすくなります。
  68. 5:35読み込み中の画像の場所を先に確保したいときにも役立ちます。
  69. 5:40一方で、説明文やお知らせのように、文章量が変わる箱では、オートのままにして内容に合わせて伸ばすほうが安全です。
  70. 5:48固定するか自動にするかは、見た目のそろいやすさと、内容のはみ出しにくさのバランスで決めましょう。
  71. 5:55実際の文章を入れて確かめるのが大切です。
  72. 5:58迷う場面では、内容が増えたときの姿を想像してから決めると失敗が減ります。
  73. 6:04効かないと感じたときは、開発者ツールで順番に調べます。
  74. 6:08まずネットワークで、スタイルシートが正常に取得されているかを確認します。
  75. 6:14次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを見ます。
  76. 6:20続いてスタイルズで、宣言が無効になっていないか、別の宣言に上書きされていないかを確認し、
  77. 6:25コンピューテッドで最終的な値を見ます。
  78. 6:30割合で指定している場合は、親の高さが決まっているかもあわせて調べてください。
  79. 6:37最後に、三百二十ピクセル程度の画面幅や文字の拡大でも内容が読めるかを試しましょう。
  80. 6:43一つずつ順番に確認すれば、原因はほとんどの場合どこかに見つかります。
  81. 6:49最後に互換性とまとめです。
  82. 6:50記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、
  83. 6:57ファイアフォックス一以降、サファリ一以降などで対応が示されていて、古くから安心して使えるプロパティです。
  84. 7:03まとめます。
  85. 7:04ハイトは要素の高さで、初期値はオート、継承はせず、割合は親の高さに依存するのが特徴でした。
  86. 7:10練習として、八レムとオートの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。
  87. 7:17関連するウィドスやミンハイトも学ぶと、サイズの制御が一通りできるようになります。
  88. 7:23高さの考え方は、このあと学ぶ幅や余白の理解にもつながっていきます。
  89. 7:27お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

heightの役割と主な指定値を解説。固定した高さと内容に応じた高さを比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのheightの使い方：指定値・実例・効かない原因とブラウザー互換性 →