WEBVTT

1
00:00:00.000 --> 00:00:00.954
こんにちは。

2
00:00:00.954 --> 00:00:03.816
シーエスエス、リファレンス解説です。

3
00:00:03.816 --> 00:00:06.679
今回のテーマは、マックスハイトです。

4
00:00:06.679 --> 00:00:10.495
これは、要素の高さの上限を決めるプロパティです。

5
00:00:10.495 --> 00:00:19.400
内容が短いときはそのままの高さで収まり、内容が長くなっても、指定した高さより大きくならないように抑えてくれます。

6
00:00:19.400 --> 00:00:25.124
長い説明文がページをどこまでも押し広げてしまう場面で、とくに役立ちます。

7
00:00:25.124 --> 00:00:32.200
この動画では、基本の書き方、指定できる値、ハイトやミンハイトとの違い、はみ出した内容を読むためのオーバーフローとの組み合わせ、

8
00:00:32.200 --> 00:00:39.276
そして効かないときの確認方法まで順番に見ていきます。

9
00:00:39.276 --> 00:00:47.068
幅の上限を決めるマックスウィドスと対になる考え方なので、あわせてイメージすると覚えやすくなります。

10
00:00:47.068 --> 00:00:48.600
まず基本の書き方です。

11
00:00:48.600 --> 00:00:52.152
セレクターを書いたら、マックスハイトと書き、コロンのあとに上限の値を書き、

12
00:00:52.152 --> 00:00:55.704
最後にセミコロンを付けます。

13
00:00:55.704 --> 00:00:59.046
スライドの例では、上限を六レムに指定しています。

14
00:00:59.046 --> 00:01:03.086
レムは文字サイズを基準にした単位なので、文字を大きくする設定でも上限が一緒に広がり、

15
00:01:03.086 --> 00:01:07.125
読みやすさを保ちやすくなります。

16
00:01:07.125 --> 00:01:16.178
エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。

17
00:01:16.178 --> 00:01:20.217
まずはこの形をそのまま書いて、ブラウザーで確かめましょう。

18
00:01:20.217 --> 00:01:25.928
書き方はシンプルですが、この一行がレイアウト全体の安定感を左右する大切な指定です。

19
00:01:25.928 --> 00:01:28.397
次に、指定できる値を確認します。

20
00:01:28.397 --> 00:01:30.095
代表的なのは三つです。

21
00:01:30.095 --> 00:01:35.342
まず、ノーンは上限を付けないという指定で、これが初期値でもあります。

22
00:01:35.342 --> 00:01:40.589
次に、ピクセルやレムといった長さで、具体的な上限を決める書き方です。

23
00:01:40.589 --> 00:01:48.459
そしてパーセントなどの割合も書けますが、この場合は親要素の高さを基準に計算される点に注意してください。

24
00:01:48.459 --> 00:01:53.398
親の高さが決まっていないと、期待どおりに働かないことがあります。

25
00:01:53.398 --> 00:01:58.953
画面の高さを基準にしたいときは、ブイエイチといった単位も候補になります。

26
00:01:58.953 --> 00:02:01.114
目的に合わせて選びましょう。

27
00:02:01.114 --> 00:02:09.756
迷ったときは、まずレムで指定して表示を確認し、必要に応じて割合や画面基準の単位を検討すると失敗が少なくなります。

28
00:02:09.756 --> 00:02:12.212
初期値と継承について整理します。

29
00:02:12.212 --> 00:02:16.202
マックスハイトの初期値はノーン、つまり上限なしです。

30
00:02:16.202 --> 00:02:20.039
そして、このプロパティは親から通常は継承しません。

31
00:02:20.039 --> 00:02:28.020
親に上限を付けても、子要素に自動で伝わるわけではないので、抑えたい要素そのものに指定する必要があります。

32
00:02:28.020 --> 00:02:33.392
また、共通の値として、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、

33
00:02:33.392 --> 00:02:38.764
普段は長さやノーンを直接書くことがほとんどです。

34
00:02:38.764 --> 00:02:44.903
仕様上の初期値とブラウザーの既定の見え方が違う場合もある点も覚えておきましょう。

35
00:02:44.903 --> 00:02:53.344
つまり、必要な場所ごとに明示するのが基本で、知らないうちに効いていた、ということは起こりにくいプロパティです。

36
00:02:53.344 --> 00:02:56.331
似たプロパティとの違いを整理しましょう。

37
00:02:56.331 --> 00:03:01.483
ハイトは高さそのものを指定するもの、ミンハイトはこれより低くならないという下限、

38
00:03:01.483 --> 00:03:06.636
そしてマックスハイトはこれより高くならないという上限です。

39
00:03:06.636 --> 00:03:10.519
マックスハイトだけを指定した場合、実際の高さは内容に合わせて決まりますが、

40
00:03:10.519 --> 00:03:14.402
上限を超えることはありません。

41
00:03:14.402 --> 00:03:24.856
もしハイトで決めた高さと上限がぶつかった場合は、上限の方が優先され、さらに下限が上限より大きい場合は下限が優先されるという決まりもあります。

42
00:03:24.856 --> 00:03:29.038
役割を分けて考えると、指定の意図が伝わりやすくなります。

43
00:03:29.038 --> 00:03:36.356
上限と下限を両方使うと、その範囲の中でだけ高さが変化する、柔軟で崩れにくい箱を作ることもできます。

44
00:03:36.356 --> 00:03:40.904
マックスハイトで一番大切なのが、オーバーフローとの組み合わせです。

45
00:03:40.904 --> 00:03:46.693
上限を付けただけでは、上限を超えた内容が読みづらくなったり、見えなくなったりします。

46
00:03:46.693 --> 00:03:50.759
そこで、オーバーフローにオートを指定すると、必要なときだけスクロールバーが現れ、

47
00:03:50.759 --> 00:03:54.825
上限の中で全体を読めるようになります。

48
00:03:54.825 --> 00:04:01.441
記事でも強調されているポイントで、内容を切るだけでなく、読める経路を必ず用意することが大切です。

49
00:04:01.441 --> 00:04:08.608
さらに、重要なボタンなどが隠れてしまわないか、キーボード操作でも内容にたどり着けるかまで確認しましょう。

50
00:04:08.608 --> 00:04:16.464
逆に、オーバーフローをヒドゥンで切り取ってしまうと、隠れた内容を二度と読めなくなるおそれがあるので注意が必要です。

51
00:04:16.464 --> 00:04:18.477
ここからは記事の実例です。

52
00:04:18.477 --> 00:04:25.290
エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を置きます。

53
00:04:25.290 --> 00:04:30.245
その中には、第一段落から第六段落まで、長めの文章を入れています。

54
00:04:30.245 --> 00:04:35.355
高さの上限が効いたときに、内容がどう収まるかが見えやすい構成です。

55
00:04:35.355 --> 00:04:40.774
頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。

56
00:04:40.774 --> 00:04:45.419
今回比べたいのは上限の有無そのものなので、文章や余白といった土台を固定し、

57
00:04:45.419 --> 00:04:50.065
上限だけを差し替えて観察するのがポイントです。

58
00:04:50.065 --> 00:04:57.652
段落を六つも入れるのは、上限の効果をはっきり見せるためで、短い文章では違いが分かりにくいからです。

59
00:04:57.652 --> 00:04:59.402
土台のシーエスエスです。

60
00:04:59.402 --> 00:05:03.340
ステージには幅の上限と内側の余白、点線の枠を付けます。

61
00:05:03.340 --> 00:05:07.278
デモの箱には濃い緑の枠線と薄い緑の背景を用意し、あらかじめオーバーフロー、

62
00:05:07.278 --> 00:05:11.216
オートを合わせて指定しておきます。

63
00:05:11.216 --> 00:05:19.383
最後の行でマックスハイトを六レムにすると、長い説明が上限の中に収まり、続きはスクロールして読める状態になります。

64
00:05:19.383 --> 00:05:26.821
次に最後の行だけをノーンへ置き換えて再読み込みすると、上限が外れて、箱は内容全体の高さまで広がります。

65
00:05:26.821 --> 00:05:29.884
この一行の違いが、実例の比較ポイントです。

66
00:05:29.884 --> 00:05:37.760
保存してブラウザーを再読み込みするたびに、箱の高さとスクロールバーの有無がどう変わるかにも注目してください。

67
00:05:37.760 --> 00:05:39.703
活用場面を考えてみましょう。

68
00:05:39.703 --> 00:05:44.838
長い説明文や利用規約のような補足パネル、コメントの一覧など、内容量が読み手によって変わる場所では、

69
00:05:44.838 --> 00:05:49.973
上限を付けることでページ全体のバランスを保てます。

70
00:05:49.973 --> 00:05:53.304
ただし、上限を小さくし過ぎると、読むために何度もスクロールが必要になり、

71
00:05:53.304 --> 00:05:56.635
かえって不便になります。

72
00:05:56.635 --> 00:06:02.741
上限は文字サイズや行の高さも考えて、実際に文章を流し込みながら調整するのがおすすめです。

73
00:06:02.741 --> 00:06:08.709
短い画面や文字を拡大した状態でも、内容を問題なく利用できるかも合わせて確かめましょう。

74
00:06:08.709 --> 00:06:16.620
スマートフォンのような細い画面では文章が折り返して高さが増えるので、上限の感じ方も変わる点も意識しておきましょう。

75
00:06:16.620 --> 00:06:20.736
効かないと感じたときは、開発者ツールで順番に調べます。

76
00:06:20.736 --> 00:06:26.224
まずネットワークで、スタイルシートが正常に取得されているかを確認します。

77
00:06:26.224 --> 00:06:32.474
次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを見ます。

78
00:06:32.474 --> 00:06:37.276
続いてスタイルズで、宣言が無効になっていないか、別の宣言に上書きされていないかを確認し、

79
00:06:37.276 --> 00:06:42.078
コンピューテッドで最終的な値を見ます。

80
00:06:42.078 --> 00:06:47.109
割合で指定した場合は、親の高さが決まっているかも重要な確認点です。

81
00:06:47.109 --> 00:06:52.597
最後に、三百二十ピクセル程度の画面幅やキーボード操作でも試してください。

82
00:06:52.597 --> 00:06:59.152
一つずつ原因を切り分ける習慣は、ほかのプロパティで困ったときにもそのまま応用できます。

83
00:06:59.152 --> 00:07:00.998
最後に互換性とまとめです。

84
00:07:00.998 --> 00:07:07.387
記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、

85
00:07:07.387 --> 00:07:13.776
ファイアフォックス一以降、サファリ一・三以降などで対応が示されていて、古くから安心して使えるプロパティです。

86
00:07:13.776 --> 00:07:14.628
まとめます。

87
00:07:14.628 --> 00:07:23.431
マックスハイトは高さの上限で、初期値はノーン、継承はせず、はみ出した内容のためにオーバーフローと組み合わせるのが大切でした。

88
00:07:23.431 --> 00:07:30.247
練習として、六レムとノーンの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。

89
00:07:30.247 --> 00:07:36.494
関連するミンハイトやマックスウィドスも学ぶと、サイズの制御が一通りできるようになります。

90
00:07:36.494 --> 00:07:37.772
お疲れさまでした。