WEBVTT

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

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

3
00:00:03.335 --> 00:00:05.281
今回のテーマは、ハイトです。

4
00:00:05.281 --> 00:00:09.172
これは要素の高さを決める、とても基本的なプロパティです。

5
00:00:09.172 --> 00:00:16.260
箱をどれくらいの高さで表示するかを指定でき、指定しなければ、中身の量に合わせて高さが自然に決まります。

6
00:00:16.260 --> 00:00:25.155
この動画では、基本の書き方、指定できる値、パーセントが効く条件、そして固定したときに内容がはみ出す注意点まで順番に見ていきます。

7
00:00:25.155 --> 00:00:30.575
幅を決めるウィドスと対になるプロパティとして、イメージしながら聞いてください。

8
00:00:30.575 --> 00:00:36.134
まずは高さを変えると見た目がどう変わるのか、感覚をつかむところから始めましょう。

9
00:00:36.134 --> 00:00:37.813
まず基本の書き方です。

10
00:00:37.813 --> 00:00:44.987
セレクターを書いたら、ハイトと書き、コロンのあとに高さの値を書き、最後にセミコロンを付けます。

11
00:00:44.987 --> 00:00:48.651
スライドの例では、高さを八レムに指定しています。

12
00:00:48.651 --> 00:00:53.840
レムは文字サイズを基準にした単位なので、利用者が文字を大きくする設定にしても、

13
00:00:53.840 --> 00:00:59.030
高さが一緒に広がりやすく、読みやすさを保ちやすくなります。

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

15
00:01:08.952 --> 00:01:13.684
まずはこの一行を書いて、箱の高さがどう変わるか確かめましょう。

16
00:01:13.684 --> 00:01:19.026
書き方に慣れれば、ほかのサイズ系のプロパティにもそのまま応用できます。

17
00:01:19.026 --> 00:01:21.723
次に、指定できる値を確認します。

18
00:01:21.723 --> 00:01:25.431
代表的なのは、長さ、割合、そしてオートです。

19
00:01:25.431 --> 00:01:30.994
ピクセルやレムといった長さで書けば、その高さがそのまま使われます。

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

21
00:01:39.085 --> 00:01:43.636
たとえば五十パーセントなら、親の高さの半分になります。

22
00:01:43.636 --> 00:01:50.884
オートは、要素の内容や種類に応じて高さが自動で決まる指定で、初期状態の値でもあります。

23
00:01:50.884 --> 00:01:57.458
普段はレムやピクセルで試し、必要な場面で割合を使うのが分かりやすい進め方です。

24
00:01:57.458 --> 00:02:03.526
値の意味を一つずつ言葉で説明できると、指定ミスにも気付きやすくなります。

25
00:02:03.526 --> 00:02:05.810
初期値と継承について整理します。

26
00:02:05.810 --> 00:02:07.808
ハイトの初期値はオートです。

27
00:02:07.808 --> 00:02:14.088
オートのときは、箱の高さは中身の量に合わせて決まるので、文章が増えれば箱も縦に伸びます。

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

29
00:02:17.656 --> 00:02:26.219
親に高さを付けても、子要素に自動で同じ高さが伝わるわけではないので、高さを決めたい要素そのものに指定する必要があります。

30
00:02:26.219 --> 00:02:30.643
また、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、

31
00:02:30.643 --> 00:02:35.068
普段は長さやオートを直接書くことがほとんどです。

32
00:02:35.068 --> 00:02:40.634
この決まりを知っておくと、親と子で高さがそろわない理由も説明しやすくなります。

33
00:02:40.634 --> 00:02:44.054
割合で指定するときの大切な条件を押さえます。

34
00:02:44.054 --> 00:02:49.649
たとえば子要素にハイト、五十パーセントと書いても、親要素の高さが決まっていないと、

35
00:02:49.649 --> 00:02:55.245
基準になる数値がないため、思った高さにならないことがあります。

36
00:02:55.245 --> 00:03:00.685
割合は親の高さが確定しているかどうかなど、条件に依存するのが特徴です。

37
00:03:00.685 --> 00:03:07.680
使いたいときは、まず親にレムなどで明確な高さを付け、そのうえで子に割合を指定してください。

38
00:03:07.680 --> 00:03:17.006
逆に、親も子もオートのままなら、どちらも内容に合わせて伸びるので、割合に頼らない書き方のほうが素直な場合も多くあります。

39
00:03:17.006 --> 00:03:22.446
迷ったら、まず親の高さを開発者ツールで数値として確認してみてください。

40
00:03:22.446 --> 00:03:25.655
固定した高さと、オートの違いを比べます。

41
00:03:25.655 --> 00:03:32.232
八レムのように長さで決めると、内容が少なくても多くても、箱の高さは同じになります。

42
00:03:32.232 --> 00:03:37.767
見た目をそろえたいときには便利ですが、文章量が増える箱を固定すると、文字を拡大したときに内容が入り切らず、

43
00:03:37.767 --> 00:03:43.302
はみ出しやすくなるのが弱点です。

44
00:03:43.302 --> 00:03:49.398
一方オートなら、内容に合わせて箱が伸びるので、はみ出しは起きにくくなります。

45
00:03:49.398 --> 00:03:55.655
高さを最低限だけ確保したいなら、固定ではなくミンハイトを使うのがおすすめです。

46
00:03:55.655 --> 00:03:58.222
目的に合わせて使い分けましょう。

47
00:03:58.222 --> 00:04:03.516
どちらが正解というより、内容の性質に合わせた選択が何より大切です。

48
00:04:03.516 --> 00:04:05.378
ここからは記事の実例です。

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

50
00:04:11.679 --> 00:04:19.269
その中には、ハロー、シーエスエスから始まる文章を入れ、文章を増やして折り返しも確認できるようにしています。

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

52
00:04:24.281 --> 00:04:28.864
親と子の入れ子構造が、そのまま後のシーエスエスの対象になります。

53
00:04:28.864 --> 00:04:33.590
比べたいのは高さだけなので、文章などの土台は固定したままにします。

54
00:04:33.590 --> 00:04:37.027
構造をシーエスエスと対応させて見ておきましょう。

55
00:04:37.027 --> 00:04:41.896
この土台は、値を変えて比べるためだけに用意されたシンプルな構成です。

56
00:04:41.896 --> 00:04:43.806
土台のシーエスエスです。

57
00:04:43.806 --> 00:04:48.104
ステージは最大幅を三十レムにし、デモの箱には濃い緑の枠線と薄い緑の背景を用意して、

58
00:04:48.104 --> 00:04:52.402
違いが見えるようにします。

59
00:04:52.402 --> 00:04:59.247
最後の行でハイトを八レムにすると、内容の量に関係なく、箱は八レムの高さで固定されます。

60
00:04:59.247 --> 00:05:03.226
文章が多いと、箱の中で窮屈に見えるかもしれません。

61
00:05:03.226 --> 00:05:10.867
次に最後の行だけをオートへ置き換えると、高さは内容に合わせて決まり、文章が増えれば箱も伸びます。

62
00:05:10.867 --> 00:05:14.051
この一行の違いが実例の比較ポイントです。

63
00:05:14.051 --> 00:05:18.508
保存して再読み込みし、箱の縦の大きさに注目してください。

64
00:05:18.508 --> 00:05:24.716
ブラウザーで実際の高さを見比べると、言葉だけの説明よりずっと理解が深まります。

65
00:05:24.716 --> 00:05:26.810
活用場面を考えてみましょう。

66
00:05:26.810 --> 00:05:31.372
ページの先頭にある大きな見出し領域や、バナーのような装飾が中心の箱では、

67
00:05:31.372 --> 00:05:35.935
高さを固定すると画面の印象をそろえやすくなります。

68
00:05:35.935 --> 00:05:40.272
読み込み中の画像の場所を先に確保したいときにも役立ちます。

69
00:05:40.272 --> 00:05:48.499
一方で、説明文やお知らせのように、文章量が変わる箱では、オートのままにして内容に合わせて伸ばすほうが安全です。

70
00:05:48.499 --> 00:05:55.679
固定するか自動にするかは、見た目のそろいやすさと、内容のはみ出しにくさのバランスで決めましょう。

71
00:05:55.679 --> 00:05:58.671
実際の文章を入れて確かめるのが大切です。

72
00:05:58.671 --> 00:06:04.056
迷う場面では、内容が増えたときの姿を想像してから決めると失敗が減ります。

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

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

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

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

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

78
00:06:30.926 --> 00:06:37.040
割合で指定している場合は、親の高さが決まっているかもあわせて調べてください。

79
00:06:37.040 --> 00:06:43.637
最後に、三百二十ピクセル程度の画面幅や文字の拡大でも内容が読めるかを試しましょう。

80
00:06:43.637 --> 00:06:49.108
一つずつ順番に確認すれば、原因はほとんどの場合どこかに見つかります。

81
00:06:49.108 --> 00:06:50.946
最後に互換性とまとめです。

82
00:06:50.946 --> 00:06:57.165
記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、

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

84
00:07:03.385 --> 00:07:04.233
まとめます。

85
00:07:04.233 --> 00:07:10.594
ハイトは要素の高さで、初期値はオート、継承はせず、割合は親の高さに依存するのが特徴でした。

86
00:07:10.594 --> 00:07:17.379
練習として、八レムとオートの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。

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

88
00:07:23.033 --> 00:07:27.698
高さの考え方は、このあと学ぶ幅や余白の理解にもつながっていきます。

89
00:07:27.698 --> 00:07:28.970
お疲れさまでした。