WEBVTT

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

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

3
00:00:03.024 --> 00:00:05.292
今回のテーマは、オーバーフローです。

4
00:00:05.292 --> 00:00:10.457
箱の高さや幅が決まっているのに、中の文章や画像が入りきらず、外へはみ出してしまう。

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

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

7
00:00:21.671 --> 00:00:23.309
この違いが今回の中心です。

8
00:00:23.309 --> 00:00:30.112
縦だけのオーバーフローワイ、横だけのオーバーフローエックスを、まとめて指定できる一括指定だと考えてください。

9
00:00:30.112 --> 00:00:34.900
この動画では、オートとヒドゥンを比べながら、値ごとの違いを確認していきます。

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

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

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

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

14
00:00:54.700 --> 00:00:57.153
ここで大切な前提があります。

15
00:00:57.153 --> 00:01:01.534
この指定の違いがはっきり見えるのは、高さや幅、あるいは最大の高さなどで、

16
00:01:01.534 --> 00:01:05.915
箱に制約があるときだけです。

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

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

19
00:01:18.093 --> 00:01:22.736
と読み替えると覚えやすくなります。

20
00:01:22.736 --> 00:01:25.529
最初の値は、初期値のビジブルです。

21
00:01:25.529 --> 00:01:28.158
意味は、そのまま見せることです。

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

23
00:01:33.743 --> 00:01:38.754
長い文章が下の要素へはみ出したり、長い一行が右へ突き抜けたりすると、隣の要素と重なって、

24
00:01:38.754 --> 00:01:43.765
レイアウトが崩れる原因になります。

25
00:01:43.765 --> 00:01:52.801
スマートフォンで画面が左右にぶれる、といった不具合の裏側にも、このはみ出しが隠れていることも少なくありません。

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

27
00:01:58.386 --> 00:02:06.108
内容が短く、はみ出す心配がない場所では問題になりませんが、長さが変わる内容では注意が必要です。

28
00:02:06.108 --> 00:02:07.473
次はヒドゥンです。

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

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

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

32
00:02:22.493 --> 00:02:27.500
大事な文章の下の部分が見えなければ、その情報は利用者へ届きません。

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

34
00:02:31.369 --> 00:02:35.238
使う前に必ず考えてください。

35
00:02:35.238 --> 00:02:39.941
似た値にクリップがあり、ヒドゥンよりさらに厳密に切り取ります。

36
00:02:39.941 --> 00:02:46.920
大きな違いの一つは、ヒドゥンはスクロールコンテナーになるのに対し、クリップはならない点です。

37
00:02:46.920 --> 00:02:51.016
まずは、隠したら読めない、という原則を押さえましょう。

38
00:02:51.016 --> 00:02:53.285
スクロールさせる値が二つあります。

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

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

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

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

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

44
00:03:18.514 --> 00:03:24.788
長い文章や、横に広い表など、折り返せない内容を全部読ませたい場所では、特にオートが活躍します。

45
00:03:24.788 --> 00:03:28.363
オーバーフローには、書き方の工夫もあります。

46
00:03:28.363 --> 00:03:33.076
値を一つだけ書くと、その指定が縦と横の両方に適用されます。

47
00:03:33.076 --> 00:03:35.838
値を二つ書くと、順番は横、縦です。

48
00:03:35.838 --> 00:03:42.988
一つ目は横方向のオーバーフローエックス、二つ目は縦方向のオーバーフローワイに当たります。

49
00:03:42.988 --> 00:03:50.951
例えば、横はヒドゥンで切り取り、縦はオートでスクロールさせる、といった組み合わせが一行で書けます。

50
00:03:50.951 --> 00:03:58.101
もちろん、オーバーフローエックスとオーバーフローワイを別々に書いても同じ結果になります。

51
00:03:58.101 --> 00:04:05.901
なお、片方にビジブル以外を指定すると、もう片方のビジブルがオートとして計算される場合があります。

52
00:04:05.901 --> 00:04:10.776
意図せずバーが増えたときは、この仕組みを思い出してください。

53
00:04:10.776 --> 00:04:12.494
ここからは実例です。

54
00:04:12.494 --> 00:04:20.569
土台として、ステージという親の中に、デモという箱を置き、その中に同じ内容の段落を六つ入れます。

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

56
00:04:27.097 --> 00:04:29.674
重要な土台は、高さの上限です。

57
00:04:29.674 --> 00:04:34.484
デモにマックスハイト、十レムを指定して、高さを抑えます。

58
00:04:34.484 --> 00:04:40.841
六つの段落はこの高さには入りきらないので、縦方向へのはみ出しが発生します。

59
00:04:40.841 --> 00:04:46.854
この状態を作って初めて、オートとヒドゥンの違いが見えるようになります。

60
00:04:46.854 --> 00:04:55.444
文章量が少ない場合や、上限を付けていない場合は、値に変えても見た目が変わらないので注意してください。

61
00:04:55.444 --> 00:04:59.163
土台ができたら、今回変更する一行を加えます。

62
00:04:59.163 --> 00:05:02.712
デモにオーバーフロー、オートを指定します。

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

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

65
00:05:15.390 --> 00:05:19.616
ページ全体は伸びず、箱の高さも固定されたままです。

66
00:05:19.616 --> 00:05:29.082
お知らせ一覧や、決まった高さで収めたいパネルなど、場所を取りすぎずに全文を読ませたい場面に向いた組み合わせです。

67
00:05:29.082 --> 00:05:35.336
マウスホイールやタッチ操作で、箱の中だけが動く感覚を確認してみてください。

68
00:05:35.336 --> 00:05:39.295
では、最後の一行の値だけをヒドゥンに変えてみましょう。

69
00:05:39.295 --> 00:05:41.201
他の指定はすべて同じです。

70
00:05:41.201 --> 00:05:44.794
今度はスクロールバーが消え、箱の下側の段落は境界でぱつんと切り取られて、

71
00:05:44.794 --> 00:05:48.386
まったく見えなくなります。

72
00:05:48.386 --> 00:05:52.345
スクロールもできないので、続きを読む手段はありません。

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

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

75
00:06:06.568 --> 00:06:13.020
続きがあることに気付けない見た目なら、利用者は内容がそこで終わったと誤解してしまいます。

76
00:06:13.020 --> 00:06:15.386
効かないと感じたときの確認です。

77
00:06:15.386 --> 00:06:18.787
一番多い原因は、高さや幅の上限がないことです。

78
00:06:18.787 --> 00:06:25.442
その場合は箱が内容に合わせて伸びるため、はみ出し自体が発生せず、スクロールも生まれません。

79
00:06:25.442 --> 00:06:28.104
次に、開発者ツールで順番に調べます。

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

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

82
00:06:43.039 --> 00:06:51.912
あわせて、三百二十ピクセル程度の狭い画面や、文字を拡大した状態、キーボード操作でも内容を利用できるかも見ておきましょう。

83
00:06:51.912 --> 00:06:57.088
ヒドゥンで隠す場合は、別の到達方法があるかも忘れずに確認してください。

84
00:06:57.088 --> 00:06:58.968
最後に互換性とまとめです。

85
00:06:58.968 --> 00:07:03.956
オーバーフローは、クローム一以降、エッジ十二以降、ファイアフォックス一以降、

86
00:07:03.956 --> 00:07:08.944
サファリ一以降と、古くから主要ブラウザーで広く対応しています。

87
00:07:08.944 --> 00:07:14.149
今回比べたオートとヒドゥンも、サファリ三以降を含め、同じく広く使えます。

88
00:07:14.149 --> 00:07:15.017
まとめます。

89
00:07:15.017 --> 00:07:19.643
このプロパティは縦と横のはみ出しを、見せる、切り取る、スクロールさせるのどれにするかを決めるもので、

90
00:07:19.643 --> 00:07:24.270
前提は高さや幅の上限でした。

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

92
00:07:30.776 --> 00:07:32.078
お疲れさまでした。

93
00:07:32.078 --> 00:07:39.596
横だけ、縦だけを変えたいときは、オーバーフローエックスとオーバーフローワイも合わせて覚えておきましょう。