WEBVTT

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

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

3
00:00:03.720 --> 00:00:06.821
今回のテーマは、オーバーフローワイです。

4
00:00:06.821 --> 00:00:11.316
箱の高さが決まっているのに、中の文章が長くて入りきらない。

5
00:00:11.316 --> 00:00:17.362
そんなときに、はみ出した下の部分をどう扱うかを決めるのが、このプロパティです。

6
00:00:17.362 --> 00:00:25.268
はみ出したまま見せるのか、切り取って隠すのか、それとも箱の中で縦にスクロールして読めるようにするのか。

7
00:00:25.268 --> 00:00:27.749
この三つの違いが今回の中心です。

8
00:00:27.749 --> 00:00:33.174
横方向を担当するオーバーフローエックスの、縦方向版だと考えてください。

9
00:00:33.174 --> 00:00:39.220
この動画では、値ごとの違いを、同じ長文の実例で切り替えながら確認していきます。

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

11
00:00:41.014 --> 00:00:46.722
スライドのように、対象のクラスにオーバーフローワイと値を書くだけです。

12
00:00:46.722 --> 00:00:53.246
プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。

13
00:00:53.246 --> 00:00:57.975
仕様上の初期値はビジブルで、通常は親から子へ継承しません。

14
00:00:57.975 --> 00:01:00.259
ここで大切な前提があります。

15
00:01:00.259 --> 00:01:06.945
この指定の違いがはっきり見えるのは、高さや最大の高さで箱に制約があるときだけです。

16
00:01:06.945 --> 00:01:14.284
制約がなければ、箱は内容に合わせて下へ伸びていくので、そもそもはみ出し自体が発生しません。

17
00:01:14.284 --> 00:01:18.606
値の名前は英語の意味そのままなので、ビジブルは見える、ヒドゥンは隠れる、

18
00:01:18.606 --> 00:01:22.928
と読み替えると覚えやすくなります。

19
00:01:22.928 --> 00:01:25.601
最初の値は、初期値のビジブルです。

20
00:01:25.601 --> 00:01:28.116
意味は、そのまま見せることです。

21
00:01:28.116 --> 00:01:33.933
内容が箱の高さを超えても切り取られず、箱の外へあふれた状態で表示されます。

22
00:01:33.933 --> 00:01:39.199
一見すると親切なようですが、実際には、下にある別の要素と重なってしまったり、

23
00:01:39.199 --> 00:01:44.466
ページ全体のレイアウトが崩れて見えたりする原因になります。

24
00:01:44.466 --> 00:01:49.654
文章量が日によって変わる場所では、意図せずはみ出すこともあります。

25
00:01:49.654 --> 00:01:54.999
まずは、これが何も指定しないときの既定の動きだと覚えておきましょう。

26
00:01:54.999 --> 00:02:02.388
ただし、隣の要素と重なった部分は読みにくくなるため、本文のような大切な内容では注意が必要です。

27
00:02:02.388 --> 00:02:03.667
次はヒドゥンです。

28
00:02:03.667 --> 00:02:08.639
ヒドゥンは、はみ出した部分を箱の境界で切り取って、見えなくする値です。

29
00:02:08.639 --> 00:02:12.475
今回の実例でも、オートと並んで比較の中心になる値です。

30
00:02:12.475 --> 00:02:18.015
注意したいのは、切り取られた下の内容は、スクロールしても読めないという点です。

31
00:02:18.015 --> 00:02:21.638
見た目をそろえるために隠すのか、それとも読めなくても困らない内容なのかを、

32
00:02:21.638 --> 00:02:25.261
使う前に必ず考えてください。

33
00:02:25.261 --> 00:02:30.233
似た値にクリップがあり、ヒドゥンよりさらに厳密に切り取る指定ですが、まずはヒドゥンとの違いより、

34
00:02:30.233 --> 00:02:35.205
隠したら読めないという原則を押さえましょう。

35
00:02:35.205 --> 00:02:40.888
画像の見せたい範囲を決めるような、見た目を優先する場面では役立つこともあります。

36
00:02:40.888 --> 00:02:43.238
スクロールさせる値が二つあります。

37
00:02:43.238 --> 00:02:49.733
スクロールは、内容がはみ出しているかどうかに関係なく、常に縦のスクロールバーを表示する値です。

38
00:02:49.733 --> 00:02:56.782
バーがある場所がいつも確保されるので、表示のガタつきは防げますが、短い内容でもバーが見えてしまいます。

39
00:02:56.782 --> 00:03:00.375
もう一つのオートは、必要なときだけバーを出す値です。

40
00:03:00.375 --> 00:03:06.042
内容が収まればバーは出ず、長くなったときだけ自動でスクロールできるようになります。

41
00:03:06.042 --> 00:03:09.635
特別な理由がなければ、まずオートを選ぶのが無難です。

42
00:03:09.635 --> 00:03:15.716
使うブラウザーや端末によって、バーの太さや表示のされ方が少し違う点も知っておきましょう。

43
00:03:15.716 --> 00:03:17.244
ここからは実例です。

44
00:03:17.244 --> 00:03:23.812
土台として、ステージという親の中に、デモという箱を置き、その中に六つの段落を入れます。

45
00:03:23.812 --> 00:03:29.616
デモには余白と枠線と背景色を付けて、箱の範囲が目で分かるようにしておきます。

46
00:03:29.616 --> 00:03:32.671
そして最も重要な土台が、高さの上限です。

47
00:03:32.671 --> 00:03:37.712
マックスハイトで上限を決めないと、箱は六段落分の長さに合わせてどこまでも伸びてしまい、

48
00:03:37.712 --> 00:03:42.753
オーバーフローワイを変えても何も変わりません。

49
00:03:42.753 --> 00:03:47.336
値の比較の前に、まず上限があるかを確認する癖を付けましょう。

50
00:03:47.336 --> 00:03:53.904
段落を六つにしているのは、短い文章でははみ出しが起きず、違いが分からなくなるためです。

51
00:03:53.904 --> 00:03:57.249
土台ができたら、今回変更する一行を加えます。

52
00:03:57.249 --> 00:04:03.939
デモにマックスハイト、十レムで高さの上限を与え、オーバーフローワイ、オートを指定します。

53
00:04:03.939 --> 00:04:09.489
すると六段落は十レムの箱には入りきらないので、箱の右側に縦のスクロールバーが現れ、

54
00:04:09.489 --> 00:04:15.038
箱の中だけを上下に動かして、最後の段落まで読めるようになります。

55
00:04:15.038 --> 00:04:18.840
ページ全体は伸びず、箱の高さも固定されたままです。

56
00:04:18.840 --> 00:04:26.594
コメント欄やお知らせ一覧のように、高さを保ちながら長い内容を全部読ませたい場所に向いた組み合わせです。

57
00:04:26.594 --> 00:04:33.436
マウスホイールでも、箱に触れたまま上下に動かすタッチ操作でも、同じように読み進められます。

58
00:04:33.436 --> 00:04:37.515
では、最後の一行の値だけをヒドゥンに変えてみましょう。

59
00:04:37.515 --> 00:04:39.479
他の指定はすべて同じです。

60
00:04:39.479 --> 00:04:43.332
今度はスクロールバーが消え、箱の下のほうの段落は境界でぱつんと切り取られて、

61
00:04:43.332 --> 00:04:47.184
まったく見えなくなります。

62
00:04:47.184 --> 00:04:51.717
スクロールもできないので、残りの文章を読む手段はありません。

63
00:04:51.717 --> 00:04:57.911
オートとヒドゥンの違いは、まさにこの一点、はみ出した分を読めるか、読めないかです。

64
00:04:57.911 --> 00:05:06.371
値を切り替えるときは、見た目のすっきり感だけでなく、隠れた内容への行き方が残っているかも一緒に確認してください。

65
00:05:06.371 --> 00:05:13.472
もし下に続きがあること自体に気付けない見た目なら、利用者は内容が終わったと誤解してしまいます。

66
00:05:13.472 --> 00:05:15.026
使い分けを整理します。

67
00:05:15.026 --> 00:05:22.091
長い文章や一覧を最後まで読ませたいならオート、バーが要らない短い内容なら初期値のままでも構いません。

68
00:05:22.091 --> 00:05:29.155
高さをそろえるためだけにヒドゥンで切るのは、内容が読めなくなるリスクがあるので慎重に使ってください。

69
00:05:29.155 --> 00:05:31.840
もう一つ大切なのがキーボード操作です。

70
00:05:31.840 --> 00:05:38.339
スクロールできる箱は、タブキーで中へ入って、矢印キーなどで操作位置を動かせる場合があります。

71
00:05:38.339 --> 00:05:41.942
実際にキーボードだけで最後まで読めるか、操作している場所が見えているかも、

72
00:05:41.942 --> 00:05:45.545
公開前に試しておきましょう。

73
00:05:45.545 --> 00:05:52.044
逆に、装飾だけを切り取るような場所では、ヒドゥンがレイアウトを守る味方になることもあります。

74
00:05:52.044 --> 00:05:54.383
効かないと感じたときの確認です。

75
00:05:54.383 --> 00:05:57.892
一番多い原因は、やはり高さの上限がないことです。

76
00:05:57.892 --> 00:06:03.300
上限がなければ箱が内容に合わせて伸びるため、スクロール自体が発生しません。

77
00:06:03.300 --> 00:06:05.932
次に、開発者ツールで順番に調べます。

78
00:06:05.932 --> 00:06:13.314
ネットワークでスタイルシートが読み込めているか、エレメンツでクラスとセレクターが一致しているか、

79
00:06:13.314 --> 00:06:20.697
スタイルズで宣言が打ち消されていないか、そしてコンピューテッドで最終的な値がどうなっているかを確認します。

80
00:06:20.697 --> 00:06:26.544
あわせて、幅の狭い画面や文字を拡大した状態でも内容を読めるかも見ておきましょう。

81
00:06:26.544 --> 00:06:34.000
親要素の高さや、別のクラスによる上書きが原因のこともあるので、対象の箱だけで判断しないことも大切です。

82
00:06:34.000 --> 00:06:35.981
最後に互換性とまとめです。

83
00:06:35.981 --> 00:06:41.541
オーバーフローワイは、クローム一以降、エッジ十二以降、ファイアフォックス三点五以降、

84
00:06:41.541 --> 00:06:47.102
サファリ三以降と、古くから主要ブラウザーで広く対応しています。

85
00:06:47.102 --> 00:06:50.911
今回比べたオートとヒドゥンも、同じく広く使えます。

86
00:06:50.911 --> 00:06:51.825
まとめます。

87
00:06:51.825 --> 00:06:56.396
このプロパティは縦のはみ出しを、見せる、切り取る、スクロールさせるのどれにするかを決めるもので、

88
00:06:56.396 --> 00:07:00.966
前提は高さの上限でした。

89
00:07:00.966 --> 00:07:07.822
練習として、実例の値をオートとヒドゥンで切り替え、違いを自分の言葉で説明してみてください。

90
00:07:07.822 --> 00:07:09.193
お疲れさまでした。

91
00:07:09.193 --> 00:07:13.307
横方向のオーバーフローエックスと組み合わせると、縦と横を別々に制御できることも、

92
00:07:13.307 --> 00:07:17.420
あわせて覚えておきましょう。