WEBVTT

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

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

3
00:00:03.921 --> 00:00:06.536
今回のテーマは、ミンハイトです。

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

5
00:00:10.457 --> 00:00:17.810
内容が少なくて箱がぺちゃんこになりそうなときでも、指定した高さだけは必ず確保してくれます。

6
00:00:17.810 --> 00:00:23.692
逆に、内容が増えたときは下限を超えて伸びることもできる、柔軟な指定です。

7
00:00:23.692 --> 00:00:29.901
この動画では、基本の書き方、指定できる値、ハイトやマックスハイトとの違い、

8
00:00:29.901 --> 00:00:36.110
内容に合わせて伸びる性質、そして効かないときの確認方法まで順番に見ていきます。

9
00:00:36.110 --> 00:00:44.116
高さの上限を決めるマックスハイトと対になる考え方なので、あわせてイメージすると覚えやすくなります。

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

11
00:00:45.650 --> 00:00:52.481
セレクターを書いたら、ミンハイトと書き、コロンのあとに下限の値を書き、最後にセミコロンを付けます。

12
00:00:52.481 --> 00:00:55.828
スライドの例では、下限を十レムに指定しています。

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

14
00:00:59.871 --> 00:01:03.914
読みやすさを保ちやすくなります。

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

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

17
00:01:17.020 --> 00:01:21.202
たった一行ですが、箱の見た目の安定感を支える大切な指定です。

18
00:01:21.202 --> 00:01:25.664
この基本形は、ほかのサイズ系のプロパティでも共通する書き方です。

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

20
00:01:27.926 --> 00:01:30.047
代表的なのは、長さと割合です。

21
00:01:30.047 --> 00:01:34.996
ピクセルやレムといった長さで書けば、その高さがそのまま下限になります。

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

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

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

25
00:01:51.397 --> 00:01:56.487
また、ゼロを指定すれば下限は実質的になくなり、内容なりの高さに戻ります。

26
00:01:56.487 --> 00:02:02.991
目的に合わせて、まずはレムで試してから割合や画面基準の単位を検討すると失敗が少なくなります。

27
00:02:02.991 --> 00:02:08.364
値の種類を知っておくと、デザインの意図に合った書き方を選べるようになります。

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

29
00:02:10.911 --> 00:02:13.458
ミンハイトの初期値はオートです。

30
00:02:13.458 --> 00:02:21.100
これは、内容やほかの条件に応じて下限が自動で決まる状態で、多くの場合はゼロに近い扱いになります。

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

32
00:02:25.080 --> 00:02:33.517
親に下限を付けても、子要素に自動で伝わるわけではないので、確保したい要素そのものに指定する必要があります。

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

34
00:02:38.771 --> 00:02:44.024
普段は長さを直接書くことがほとんどです。

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

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

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

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

39
00:03:04.601 --> 00:03:12.584
ミンハイトだけを指定した場合、実際の高さは内容に合わせて決まりますが、下限を下回ることはありません。

40
00:03:12.584 --> 00:03:18.171
もしハイトで決めた高さが下限より小さい場合は、下限の方が優先されます。

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

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

43
00:03:30.465 --> 00:03:36.212
下限だけ、あるいは上限だけ、と一つずつ使い分ける練習が理解への近道です。

44
00:03:36.212 --> 00:03:40.389
ミンハイトの大きな特徴は、ハイトとの違いにあります。

45
00:03:40.389 --> 00:03:46.493
ハイトで高さを固定すると、内容が増えたときにあふれてしまうことがありますが、

46
00:03:46.493 --> 00:03:52.597
ミンハイトはあくまで下限なので、内容が増えればその分だけ箱は伸びてくれます。

47
00:03:52.597 --> 00:03:59.183
記事でも紹介されているように、ボタンではパディングと組み合わせるのがおすすめです。

48
00:03:59.183 --> 00:04:04.243
下限で最低限の押しやすさを保ちながら、内側の余白で文字の周りにゆとりを作ると、

49
00:04:04.243 --> 00:04:09.303
文字を拡大したときでも窮屈になりにくくなります。

50
00:04:09.303 --> 00:04:14.122
下限と余白の両方で支える、という考え方を覚えておきましょう。

51
00:04:14.122 --> 00:04:19.584
固定との違いを体で覚えると、ほかのサイズ指定でも迷いにくくなります。

52
00:04:19.584 --> 00:04:21.333
ここからは記事の実例です。

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

54
00:04:27.254 --> 00:04:31.830
その中には、ハロー、シーエスエスから始まる短めの文章を入れています。

55
00:04:31.830 --> 00:04:35.328
文章が短いからこそ、下限の効果が見えやすい構成です。

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

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

58
00:04:44.075 --> 00:04:48.112
下限だけを差し替えて観察するのがポイントです。

59
00:04:48.112 --> 00:04:52.688
短い文章でも箱がしっかり高さを保つかどうかが、今回の確認どころです。

60
00:04:52.688 --> 00:04:57.532
親と子の入れ子構造も、後のシーエスエスと対応させて確認しておきましょう。

61
00:04:57.532 --> 00:04:59.430
土台のシーエスエスです。

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

63
00:05:03.701 --> 00:05:08.447
デモの箱には濃い緑の枠線と薄い緑の背景、文字色を用意します。

64
00:05:08.447 --> 00:05:12.797
最後の行でミンハイトを十レムにすると、文章が短くても箱は十レムの高さを確保し、

65
00:05:12.797 --> 00:05:17.147
ゆったりとした見た目になります。

66
00:05:17.147 --> 00:05:25.690
次に最後の行だけをゼロへ置き換えて再読み込みすると、下限が外れて、箱は文章の量に合わせた低い高さに縮みます。

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

68
00:05:29.011 --> 00:05:35.814
保存してブラウザーを再読み込みするたびに、箱の高さがどう変わるかにも注目してください。

69
00:05:35.814 --> 00:05:41.192
違いが出た理由を、下限という言葉で説明できるかも試してみてください。

70
00:05:41.192 --> 00:05:43.557
活用場面を考えてみましょう。

71
00:05:43.557 --> 00:05:50.988
ページの先頭にある見出し領域では、下限を付けることで画面に映えたときの存在感を保てます。

72
00:05:50.988 --> 00:05:58.420
カードを並べる場面では、文章量が違っても高さがそろいやすく、レイアウトが整って見えます。

73
00:05:58.420 --> 00:06:05.683
また、ボタンや入力欄のように、押しやすさや触りやすさが大切な部品でも下限は役立ちます。

74
00:06:05.683 --> 00:06:11.256
ただし、下限を大きくし過ぎると、短い内容の周りに無駄な空白が広がってしまうので、

75
00:06:11.256 --> 00:06:16.830
実際の文章を流し込みながら調整するのがおすすめです。

76
00:06:16.830 --> 00:06:20.884
短い画面や文字を拡大した状態でも確認しましょう。

77
00:06:20.884 --> 00:06:26.964
迷ったら、まずは控えめな下限から始めて、少しずつ広げていくのが安全です。

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

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

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

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

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

83
00:06:52.435 --> 00:06:59.756
内容自体がすでに下限より高い場合は、指定が効いていても見た目が変わらない点にも注意してください。

84
00:06:59.756 --> 00:07:05.094
最後に、三百二十ピクセル程度の画面幅やキーボード操作でも試しましょう。

85
00:07:05.094 --> 00:07:10.432
確認の順番をメモしておくと、次に詰まったときも落ち着いて調べられます。

86
00:07:10.432 --> 00:07:12.279
最後に互換性とまとめです。

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

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

89
00:07:25.066 --> 00:07:25.918
まとめます。

90
00:07:25.918 --> 00:07:33.164
ミンハイトは高さの下限で、初期値はオート、継承はせず、内容が増えれば下限を超えて伸びるのが特徴でした。

91
00:07:33.164 --> 00:07:39.842
練習として、十レムとゼロの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。

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

93
00:07:46.093 --> 00:07:47.372
お疲れさまでした。