WEBVTT

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

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

3
00:00:03.341 --> 00:00:06.404
今回のテーマは、オーバーフローエックスです。

4
00:00:06.404 --> 00:00:12.390
箱の幅が決まっているのに、中に長い一文や長いアドレスが入って、右側へはみ出してしまう。

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

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

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

8
00:00:26.869 --> 00:00:31.463
縦方向を担当するオーバーフローワイの、横方向版だと考えてください。

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

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

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

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

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

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

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

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

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

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

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

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

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

22
00:01:29.607 --> 00:01:37.952
長いアドレスやコードが右へ突き抜けると、隣の要素と重なったり、ページ全体が横にスクロールしてしまったりする原因になります。

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

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

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

26
00:01:56.556 --> 00:01:57.765
次はヒドゥンです。

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

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

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

30
00:02:11.468 --> 00:02:16.438
長いアドレスの末尾が見えなければ、そのアドレスは使えなくなってしまいます。

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

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

33
00:02:23.290 --> 00:02:31.216
似た値にクリップがあり、ヒドゥンよりさらに厳密に切り取る指定ですが、まずは隠したら読めないという原則を押さえましょう。

34
00:02:31.216 --> 00:02:33.999
スクロールさせる値が二つあります。

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

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

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

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

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

40
00:03:05.430 --> 00:03:13.124
コードの表示や表の横スクロールなど、長い内容を全部読ませたい場所では、特にオートが活躍します。

41
00:03:13.124 --> 00:03:14.927
ここからは実例です。

42
00:03:14.927 --> 00:03:20.157
土台として、ステージという親の中に、デモという箱を置き、その中にスペースのない、

43
00:03:20.157 --> 00:03:25.387
とても長いアドレスを一文で入れます。

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

45
00:03:32.241 --> 00:03:34.585
重要な土台が二つあります。

46
00:03:34.585 --> 00:03:36.389
一つは幅の上限です。

47
00:03:36.389 --> 00:03:41.258
デモにマックスワイド、十五レムを指定して幅を抑えます。

48
00:03:41.258 --> 00:03:45.406
もう一つは、ホワイトスペース、ノーラップです。

49
00:03:45.406 --> 00:03:51.357
これで文章が途中で折り返さず、一行のまま横へ伸びるようになります。

50
00:03:51.357 --> 00:03:59.112
この二つがそろって初めて、右へのはみ出しが発生し、値による違いが見えるようになります。

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

52
00:04:02.794 --> 00:04:06.977
デモにオーバーフローエックス、オートを指定します。

53
00:04:06.977 --> 00:04:13.588
すると長いアドレスは十五レムの箱には入りきらないので、箱の下側に横のスクロールバーが現れ、

54
00:04:13.588 --> 00:04:20.198
箱の中だけを左右に動かして、アドレスの最後まで読めるようになります。

55
00:04:20.198 --> 00:04:24.382
ページ全体は広がらず、箱の幅も固定されたままです。

56
00:04:24.382 --> 00:04:32.414
長いコードや長いユーアールエル、横に広い表など、折り返すと読みにくい内容に向いた組み合わせです。

57
00:04:32.414 --> 00:04:36.849
マウスではシフトキーを押しながらホイールを回す、タッチでは横へ滑らせる、

58
00:04:36.849 --> 00:04:41.284
といった操作でも読み進められます。

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

60
00:04:45.294 --> 00:04:47.224
他の指定はすべて同じです。

61
00:04:47.224 --> 00:04:50.862
今度はスクロールバーが消え、箱の右側の部分は境界でぱつんと切り取られて、

62
00:04:50.862 --> 00:04:54.501
まったく見えなくなります。

63
00:04:54.501 --> 00:04:59.253
スクロールもできないので、アドレスの続きを読む手段はありません。

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

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

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

67
00:05:20.192 --> 00:05:21.866
使い分けを整理します。

68
00:05:21.866 --> 00:05:29.933
長いコードやアドレスを最後まで読ませたいならオート、バーが要らない短い内容なら初期値のままでも構いません。

69
00:05:29.933 --> 00:05:32.216
ここで一つ、注意点があります。

70
00:05:32.216 --> 00:05:35.717
縦方向のオーバーフローワイとの組み合わせです。

71
00:05:35.717 --> 00:05:42.567
片方にビジブル以外を指定すると、もう片方のビジブルがオートとして計算される場合があります。

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

73
00:05:47.133 --> 00:05:53.221
また、ページ全体のはみ出しを、ボディにヒドゥンを付けてごまかすのは避けましょう。

74
00:05:53.221 --> 00:05:58.092
原因の要素を見つけて、その要素だけを直すほうが、後で困りません。

75
00:05:58.092 --> 00:06:00.437
効かないと感じたときの確認です。

76
00:06:00.437 --> 00:06:06.299
一番多い原因は、幅の上限がない、または折り返しが有効なままになっていることです。

77
00:06:06.299 --> 00:06:12.161
その場合は箱が伸びるか、文章が次の行へ回るため、横スクロール自体が発生しません。

78
00:06:12.161 --> 00:06:14.799
次に、開発者ツールで順番に調べます。

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

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

81
00:06:29.600 --> 00:06:36.928
あわせて、三百二十ピクセル程度の狭い画面や、文字を拡大した状態でも内容を読めるかも見ておきましょう。

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

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

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

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

86
00:06:53.982 --> 00:06:54.888
まとめます。

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

88
00:07:00.094 --> 00:07:05.301
前提は幅の上限と、折り返さない指定でした。

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

90
00:07:12.093 --> 00:07:13.451
お疲れさまでした。

91
00:07:13.451 --> 00:07:18.884
縦方向のオーバーフローワイと組み合わせると、縦と横を別々に制御できます。