VIDEO LESSON

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

再生時間 7:38動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、マックスハイトです。
0:06これは、要素の高さの上限を決めるプロパティです。
0:10内容が短いときはそのままの高さで収まり、内容が長くなっても、指定した高さより大きくならないように抑えてくれます。
0:19長い説明文がページをどこまでも押し広げてしまう場面で、とくに役立ちます。
0:25この動画では、基本の書き方、指定できる値、ハイトやミンハイトとの違い、はみ出した内容を読むためのオーバーフローとの組み合わせ、
0:32そして効かないときの確認方法まで順番に見ていきます。
0:39幅の上限を決めるマックスウィドスと対になる考え方なので、あわせてイメージすると覚えやすくなります。
0:47まず基本の書き方です。
0:48セレクターを書いたら、マックスハイトと書き、コロンのあとに上限の値を書き、
0:52最後にセミコロンを付けます。
0:55スライドの例では、上限を六レムに指定しています。
0:59レムは文字サイズを基準にした単位なので、文字を大きくする設定でも上限が一緒に広がり、
1:03読みやすさを保ちやすくなります。
1:07エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。
1:16まずはこの形をそのまま書いて、ブラウザーで確かめましょう。
1:20書き方はシンプルですが、この一行がレイアウト全体の安定感を左右する大切な指定です。
1:25次に、指定できる値を確認します。
1:28代表的なのは三つです。
1:30まず、ノーンは上限を付けないという指定で、これが初期値でもあります。
1:35次に、ピクセルやレムといった長さで、具体的な上限を決める書き方です。
1:40そしてパーセントなどの割合も書けますが、この場合は親要素の高さを基準に計算される点に注意してください。
1:48親の高さが決まっていないと、期待どおりに働かないことがあります。
1:53画面の高さを基準にしたいときは、ブイエイチといった単位も候補になります。
1:58目的に合わせて選びましょう。
2:01迷ったときは、まずレムで指定して表示を確認し、必要に応じて割合や画面基準の単位を検討すると失敗が少なくなります。
2:09初期値と継承について整理します。
2:12マックスハイトの初期値はノーン、つまり上限なしです。
2:16そして、このプロパティは親から通常は継承しません。
2:20親に上限を付けても、子要素に自動で伝わるわけではないので、抑えたい要素そのものに指定する必要があります。
2:28また、共通の値として、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、
2:33普段は長さやノーンを直接書くことがほとんどです。
2:38仕様上の初期値とブラウザーの既定の見え方が違う場合もある点も覚えておきましょう。
2:44つまり、必要な場所ごとに明示するのが基本で、知らないうちに効いていた、ということは起こりにくいプロパティです。
2:53似たプロパティとの違いを整理しましょう。
2:56ハイトは高さそのものを指定するもの、ミンハイトはこれより低くならないという下限、
3:01そしてマックスハイトはこれより高くならないという上限です。
3:06マックスハイトだけを指定した場合、実際の高さは内容に合わせて決まりますが、
3:10上限を超えることはありません。
3:14もしハイトで決めた高さと上限がぶつかった場合は、上限の方が優先され、さらに下限が上限より大きい場合は下限が優先されるという決まりもあります。
3:24役割を分けて考えると、指定の意図が伝わりやすくなります。
3:29上限と下限を両方使うと、その範囲の中でだけ高さが変化する、柔軟で崩れにくい箱を作ることもできます。
3:36マックスハイトで一番大切なのが、オーバーフローとの組み合わせです。
3:40上限を付けただけでは、上限を超えた内容が読みづらくなったり、見えなくなったりします。
3:46そこで、オーバーフローにオートを指定すると、必要なときだけスクロールバーが現れ、
3:50上限の中で全体を読めるようになります。
3:54記事でも強調されているポイントで、内容を切るだけでなく、読める経路を必ず用意することが大切です。
4:01さらに、重要なボタンなどが隠れてしまわないか、キーボード操作でも内容にたどり着けるかまで確認しましょう。
4:08逆に、オーバーフローをヒドゥンで切り取ってしまうと、隠れた内容を二度と読めなくなるおそれがあるので注意が必要です。
4:16ここからは記事の実例です。
4:18エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を置きます。
4:25その中には、第一段落から第六段落まで、長めの文章を入れています。
4:30高さの上限が効いたときに、内容がどう収まるかが見えやすい構成です。
4:35頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
4:40今回比べたいのは上限の有無そのものなので、文章や余白といった土台を固定し、
4:45上限だけを差し替えて観察するのがポイントです。
4:50段落を六つも入れるのは、上限の効果をはっきり見せるためで、短い文章では違いが分かりにくいからです。
4:57土台のシーエスエスです。
4:59ステージには幅の上限と内側の余白、点線の枠を付けます。
5:03デモの箱には濃い緑の枠線と薄い緑の背景を用意し、あらかじめオーバーフロー、
5:07オートを合わせて指定しておきます。
5:11最後の行でマックスハイトを六レムにすると、長い説明が上限の中に収まり、続きはスクロールして読める状態になります。
5:19次に最後の行だけをノーンへ置き換えて再読み込みすると、上限が外れて、箱は内容全体の高さまで広がります。
5:26この一行の違いが、実例の比較ポイントです。
5:29保存してブラウザーを再読み込みするたびに、箱の高さとスクロールバーの有無がどう変わるかにも注目してください。
5:37活用場面を考えてみましょう。
5:39長い説明文や利用規約のような補足パネル、コメントの一覧など、内容量が読み手によって変わる場所では、
5:44上限を付けることでページ全体のバランスを保てます。
5:49ただし、上限を小さくし過ぎると、読むために何度もスクロールが必要になり、
5:53かえって不便になります。
5:56上限は文字サイズや行の高さも考えて、実際に文章を流し込みながら調整するのがおすすめです。
6:02短い画面や文字を拡大した状態でも、内容を問題なく利用できるかも合わせて確かめましょう。
6:08スマートフォンのような細い画面では文章が折り返して高さが増えるので、上限の感じ方も変わる点も意識しておきましょう。
6:16効かないと感じたときは、開発者ツールで順番に調べます。
6:20まずネットワークで、スタイルシートが正常に取得されているかを確認します。
6:26次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを見ます。
6:32続いてスタイルズで、宣言が無効になっていないか、別の宣言に上書きされていないかを確認し、
6:37コンピューテッドで最終的な値を見ます。
6:42割合で指定した場合は、親の高さが決まっているかも重要な確認点です。
6:47最後に、三百二十ピクセル程度の画面幅やキーボード操作でも試してください。
6:52一つずつ原因を切り分ける習慣は、ほかのプロパティで困ったときにもそのまま応用できます。
6:59最後に互換性とまとめです。
7:00記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、
7:07ファイアフォックス一以降、サファリ一・三以降などで対応が示されていて、古くから安心して使えるプロパティです。
7:13まとめます。
7:14マックスハイトは高さの上限で、初期値はノーン、継承はせず、はみ出した内容のためにオーバーフローと組み合わせるのが大切でした。
7:23練習として、六レムとノーンの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。
7:30関連するミンハイトやマックスウィドスも学ぶと、サイズの制御が一通りできるようになります。
7:36お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

max-heightの役割と主な指定値を解説。長い説明が上限内に収まり、必要ならスクロールできます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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