SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、ミンハイトです。
  4. 0:06これは、要素の高さの下限を決めるプロパティです。
  5. 0:10内容が少なくて箱がぺちゃんこになりそうなときでも、指定した高さだけは必ず確保してくれます。
  6. 0:17逆に、内容が増えたときは下限を超えて伸びることもできる、柔軟な指定です。
  7. 0:23この動画では、基本の書き方、指定できる値、ハイトやマックスハイトとの違い、
  8. 0:29内容に合わせて伸びる性質、そして効かないときの確認方法まで順番に見ていきます。
  9. 0:36高さの上限を決めるマックスハイトと対になる考え方なので、あわせてイメージすると覚えやすくなります。
  10. 0:44まず基本の書き方です。
  11. 0:45セレクターを書いたら、ミンハイトと書き、コロンのあとに下限の値を書き、最後にセミコロンを付けます。
  12. 0:52スライドの例では、下限を十レムに指定しています。
  13. 0:55レムは文字サイズを基準にした単位なので、文字を大きくする設定でも下限が一緒に広がり、
  14. 0:59読みやすさを保ちやすくなります。
  15. 1:03エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。
  16. 1:12まずはこの形をそのまま書いて、ブラウザーで確かめましょう。
  17. 1:17たった一行ですが、箱の見た目の安定感を支える大切な指定です。
  18. 1:21この基本形は、ほかのサイズ系のプロパティでも共通する書き方です。
  19. 1:25次に、指定できる値を確認します。
  20. 1:27代表的なのは、長さと割合です。
  21. 1:30ピクセルやレムといった長さで書けば、その高さがそのまま下限になります。
  22. 1:34パーセントなどの割合も書けますが、この場合は親要素の高さを基準に計算される点に注意してください。
  23. 1:41親の高さが決まっていないと、期待どおりに働かないことがあります。
  24. 1:46画面の高さを基準にしたいときは、ブイエイチといった単位も候補になります。
  25. 1:51また、ゼロを指定すれば下限は実質的になくなり、内容なりの高さに戻ります。
  26. 1:56目的に合わせて、まずはレムで試してから割合や画面基準の単位を検討すると失敗が少なくなります。
  27. 2:02値の種類を知っておくと、デザインの意図に合った書き方を選べるようになります。
  28. 2:08初期値と継承について整理します。
  29. 2:10ミンハイトの初期値はオートです。
  30. 2:13これは、内容やほかの条件に応じて下限が自動で決まる状態で、多くの場合はゼロに近い扱いになります。
  31. 2:21そして、このプロパティは親から通常は継承しません。
  32. 2:25親に下限を付けても、子要素に自動で伝わるわけではないので、確保したい要素そのものに指定する必要があります。
  33. 2:33また、共通の値として、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、
  34. 2:38普段は長さを直接書くことがほとんどです。
  35. 2:44仕様上の初期値とブラウザーの既定の見え方が違う場合もある点も覚えておきましょう。
  36. 2:50似たプロパティとの違いを整理しましょう。
  37. 2:53ハイトは高さそのものを指定するもの、ミンハイトはこれより低くならないという下限、
  38. 2:59そしてマックスハイトはこれより高くならないという上限です。
  39. 3:04ミンハイトだけを指定した場合、実際の高さは内容に合わせて決まりますが、下限を下回ることはありません。
  40. 3:12もしハイトで決めた高さが下限より小さい場合は、下限の方が優先されます。
  41. 3:18下限と上限を両方使うと、その範囲の中でだけ高さが変化する、柔軟で崩れにくい箱を作ることもできます。
  42. 3:25役割を分けて考えると、指定の意図が伝わりやすくなります。
  43. 3:30下限だけ、あるいは上限だけ、と一つずつ使い分ける練習が理解への近道です。
  44. 3:36ミンハイトの大きな特徴は、ハイトとの違いにあります。
  45. 3:40ハイトで高さを固定すると、内容が増えたときにあふれてしまうことがありますが、
  46. 3:46ミンハイトはあくまで下限なので、内容が増えればその分だけ箱は伸びてくれます。
  47. 3:52記事でも紹介されているように、ボタンではパディングと組み合わせるのがおすすめです。
  48. 3:59下限で最低限の押しやすさを保ちながら、内側の余白で文字の周りにゆとりを作ると、
  49. 4:04文字を拡大したときでも窮屈になりにくくなります。
  50. 4:09下限と余白の両方で支える、という考え方を覚えておきましょう。
  51. 4:14固定との違いを体で覚えると、ほかのサイズ指定でも迷いにくくなります。
  52. 4:19ここからは記事の実例です。
  53. 4:21エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を置きます。
  54. 4:27その中には、ハロー、シーエスエスから始まる短めの文章を入れています。
  55. 4:31文章が短いからこそ、下限の効果が見えやすい構成です。
  56. 4:35頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  57. 4:40今回比べたいのは下限の有無そのものなので、文章や余白といった土台を固定し、
  58. 4:44下限だけを差し替えて観察するのがポイントです。
  59. 4:48短い文章でも箱がしっかり高さを保つかどうかが、今回の確認どころです。
  60. 4:52親と子の入れ子構造も、後のシーエスエスと対応させて確認しておきましょう。
  61. 4:57土台のシーエスエスです。
  62. 4:59ステージには幅の上限と内側の余白、点線の枠を付けます。
  63. 5:03デモの箱には濃い緑の枠線と薄い緑の背景、文字色を用意します。
  64. 5:08最後の行でミンハイトを十レムにすると、文章が短くても箱は十レムの高さを確保し、
  65. 5:12ゆったりとした見た目になります。
  66. 5:17次に最後の行だけをゼロへ置き換えて再読み込みすると、下限が外れて、箱は文章の量に合わせた低い高さに縮みます。
  67. 5:25この一行の違いが、実例の比較ポイントです。
  68. 5:29保存してブラウザーを再読み込みするたびに、箱の高さがどう変わるかにも注目してください。
  69. 5:35違いが出た理由を、下限という言葉で説明できるかも試してみてください。
  70. 5:41活用場面を考えてみましょう。
  71. 5:43ページの先頭にある見出し領域では、下限を付けることで画面に映えたときの存在感を保てます。
  72. 5:50カードを並べる場面では、文章量が違っても高さがそろいやすく、レイアウトが整って見えます。
  73. 5:58また、ボタンや入力欄のように、押しやすさや触りやすさが大切な部品でも下限は役立ちます。
  74. 6:05ただし、下限を大きくし過ぎると、短い内容の周りに無駄な空白が広がってしまうので、
  75. 6:11実際の文章を流し込みながら調整するのがおすすめです。
  76. 6:16短い画面や文字を拡大した状態でも確認しましょう。
  77. 6:20迷ったら、まずは控えめな下限から始めて、少しずつ広げていくのが安全です。
  78. 6:26効かないと感じたときは、開発者ツールで順番に調べます。
  79. 6:31まずネットワークで、スタイルシートが正常に取得されているかを確認します。
  80. 6:36次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを見ます。
  81. 6:42続いてスタイルズで、宣言が無効になっていないか、別の宣言に上書きされていないかを確認し、
  82. 6:47コンピューテッドで最終的な値を見ます。
  83. 6:52内容自体がすでに下限より高い場合は、指定が効いていても見た目が変わらない点にも注意してください。
  84. 6:59最後に、三百二十ピクセル程度の画面幅やキーボード操作でも試しましょう。
  85. 7:05確認の順番をメモしておくと、次に詰まったときも落ち着いて調べられます。
  86. 7:10最後に互換性とまとめです。
  87. 7:12記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、
  88. 7:18ファイアフォックス三以降、サファリ一・三以降などで対応が示されていて、古くから安心して使えるプロパティです。
  89. 7:25まとめます。
  90. 7:25ミンハイトは高さの下限で、初期値はオート、継承はせず、内容が増えれば下限を超えて伸びるのが特徴でした。
  91. 7:33練習として、十レムとゼロの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。
  92. 7:39関連するマックスハイトやミンウィドスも学ぶと、サイズの制御が一通りできるようになります。
  93. 7:46お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

min-heightの役割と主な指定値を解説。短い内容でも箱が指定の高さを確保します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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