WEBVTT

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

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

3
00:00:03.291 --> 00:00:05.210
今回のテーマは、クリアです。

4
00:00:05.210 --> 00:00:12.889
これは、フロートで浮かせた要素の横に文章が回り込むのをやめて、後ろに続く要素をその下へ移動させるプロパティです。

5
00:00:12.889 --> 00:00:16.728
写真の横に文章が寄り添うような配置は便利ですが、見出しや次の段落まで横に食い込んでしまうと、

6
00:00:16.728 --> 00:00:20.567
読みにくくなります。

7
00:00:20.567 --> 00:00:25.229
そんなときにクリアを使うと、区切りをつけて下から新しく始められます。

8
00:00:25.229 --> 00:00:29.754
この動画では、代表的な値であるボスとナンを比べて違いを確認します。

9
00:00:29.754 --> 00:00:34.553
基本の書き方、主な値、実例、効かないときの確認まで、順番に解説します。

10
00:00:34.553 --> 00:00:38.598
現在のレイアウトの主役はフレックスボックスやグリッドですが、フロートとセットで使うクリアは、

11
00:00:38.598 --> 00:00:42.643
今でも基礎として大切です。

12
00:00:42.643 --> 00:00:44.239
まず基本の書き方です。

13
00:00:44.239 --> 00:00:48.736
セレクターのあとに、クリア、コロン、値、セミコロンを書きます。

14
00:00:48.736 --> 00:00:53.814
スライドの例では、デモというクラスを持つ要素に、ボスを指定しています。

15
00:00:53.814 --> 00:00:57.006
意味は、左右どちらの浮動要素の横にも回り込まず、その下から表示を始める、

16
00:00:57.006 --> 00:01:00.198
ということです。

17
00:01:00.198 --> 00:01:05.421
ここで大切なのは、クリアは回り込みをやめたい後続の要素自身に書く点です。

18
00:01:05.421 --> 00:01:11.369
浮かせた要素そのものではなく、その次に来る要素に書く、という役割を覚えてください。

19
00:01:11.369 --> 00:01:17.752
対象のクラス名とエイチティーエムエルのクラスが一致しているかも、あわせて確認しましょう。

20
00:01:17.752 --> 00:01:22.395
書き方はシンプルなので、値の意味とセットで覚えることが大切です。

21
00:01:22.395 --> 00:01:24.646
指定できる主な値を確認します。

22
00:01:24.646 --> 00:01:29.597
ナンは回り込みを許す値で、後続は浮動要素の横に並ぶことができます。

23
00:01:29.597 --> 00:01:35.298
レフトは左側に浮いた要素の横を避け、ライトは右側に浮いた要素の横を避けます。

24
00:01:35.298 --> 00:01:40.100
ボスは左右の両方を避けて、どちらの浮動要素よりも下へ移動します。

25
00:01:40.100 --> 00:01:47.002
迷ったときはボスを選ぶと、左右を問わず確実に下へ送れるため、区切りとして使いやすくなります。

26
00:01:47.002 --> 00:01:49.552
まずはこの四つを押さえてください。

27
00:01:49.552 --> 00:01:54.204
値の違いは、避ける相手が左か右か、両方か、という点にあります。

28
00:01:54.204 --> 00:01:58.855
実際の場面では、写真や図のどちら側を避けたいかで選び分けます。

29
00:01:58.855 --> 00:02:00.858
初期値と継承を確認します。

30
00:02:00.858 --> 00:02:02.861
クリアの初期値はナンです。

31
00:02:02.861 --> 00:02:08.870
つまり、何も指定しなければ、後続の要素は浮動要素の横へ回り込むことができます。

32
00:02:08.870 --> 00:02:12.722
回り込みが自然に起きるのは、この初期値のためです。

33
00:02:12.722 --> 00:02:18.731
通常の継承はしないので、親に書いた値が子へ自動で受け継がれることはありません。

34
00:02:18.731 --> 00:02:21.812
下へ送りたい要素ごとに指定してください。

35
00:02:21.812 --> 00:02:27.821
また、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値に戻す値です。

36
00:02:27.821 --> 00:02:35.063
アンセットやリバートなどの共通値もありますが、まずは初期値ナンと、継承しない点を覚えましょう。

37
00:02:35.063 --> 00:02:39.685
指定を忘れたときの動きを予測できるようになることも大切です。

38
00:02:39.685 --> 00:02:41.810
フロートとの関係を整理します。

39
00:02:41.810 --> 00:02:46.628
フロートは要素を左や右へ浮かせて、その横に文章を流し込む仕組みです。

40
00:02:46.628 --> 00:02:50.596
クリアは、その流れを途中で止める合図だと考えてください。

41
00:02:50.596 --> 00:02:57.681
浮いた要素がある間は横に文章が並び、クリアを指定した要素は、浮いた要素の下端よりも下から始まります。

42
00:02:57.681 --> 00:03:02.358
つまり、フロートが回り込みを作り、クリアが回り込みを終わらせます。

43
00:03:02.358 --> 00:03:04.341
この二つは対になる指定です。

44
00:03:04.341 --> 00:03:10.435
逆に言えば、先に浮いた要素がなければ、クリアを指定しても見た目はほとんど変わりません。

45
00:03:10.435 --> 00:03:13.977
効くかどうかは、前にフロートがあるかで決まります。

46
00:03:13.977 --> 00:03:17.945
この関係が分かると、効かない理由も見つけやすくなります。

47
00:03:17.945 --> 00:03:19.531
実例を見ていきます。

48
00:03:19.531 --> 00:03:22.386
まずエイチティーエムエルの用意です。

49
00:03:22.386 --> 00:03:29.206
ステージという外側の箱の中に、浮動要素である図の領域と、デモという段落が入っています。

50
00:03:29.206 --> 00:03:35.550
図の領域にはフローティングというクラス、段落にはデモというクラスが付いています。

51
00:03:35.550 --> 00:03:40.943
頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。

52
00:03:40.943 --> 00:03:43.798
親と子の構造そのものが例の一部です。

53
00:03:43.798 --> 00:03:51.411
段落の文章は、図の横へ回り込む様子と、図の下に続く位置の両方を確認できるように用意されています。

54
00:03:51.411 --> 00:03:55.693
中身は変えず、クリアの値だけを比べる準備をしましょう。

55
00:03:55.693 --> 00:04:00.769
構造を先に声に出して確認すると、後の比較が分かりやすくなります。

56
00:04:00.769 --> 00:04:06.026
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

57
00:04:06.026 --> 00:04:14.335
ステージは幅の上限や余白、枠線が指定され、ディスプレイ、フロー・ルートで浮動要素を内側に収めます。

58
00:04:14.335 --> 00:04:21.118
図の領域はフロート、レフトで左へ浮き、幅と高さは七レムの四角い箱になっています。

59
00:04:21.118 --> 00:04:25.527
段落のデモには余白や枠線、背景色が付けられています。

60
00:04:25.527 --> 00:04:29.766
そのうえで、主役であるクリア、ボスの指定により、段落は図の横には回り込まず、

61
00:04:29.766 --> 00:04:34.005
図の下から表示されます。

62
00:04:34.005 --> 00:04:42.145
土台の指定は違いを見やすくするためのものなので、段落がどこから始まっているかに注目してください。

63
00:04:42.145 --> 00:04:44.059
値を変えて比べてみましょう。

64
00:04:44.059 --> 00:04:47.613
最後のクリアの値だけを、ボスからナンへ置き換えます。

65
00:04:47.613 --> 00:04:51.645
ファイルを保存してブラウザーを再読み込みすると、下から始まっていた段落が、

66
00:04:51.645 --> 00:04:55.678
図の横へ回り込んで表示されるようになります。

67
00:04:55.678 --> 00:04:59.368
エイチティーエムエルや文章の中身は一切変えていません。

68
00:04:59.368 --> 00:05:03.879
ボスは回り込みをやめて下へ送る指定、ナンは回り込みを許す指定です。

69
00:05:03.879 --> 00:05:07.160
比較のコツは、変える値を一つだけにすることです。

70
00:05:07.160 --> 00:05:14.405
文章量や親の幅だけを変えたときの収まり方も観察すると、浮いた要素の高さと文章の流れの関係がよく分かります。

71
00:05:14.405 --> 00:05:16.551
間違えやすい点を整理します。

72
00:05:16.551 --> 00:05:20.997
記事でも特に注意されているのが、クリアはフレックスボックスやグリッドの折り返しを解除する指定ではない、

73
00:05:20.997 --> 00:05:25.444
という点です。

74
00:05:25.444 --> 00:05:29.430
フレックス・ラップで折り返した項目や、グリッドの行に対してクリアを使っても、

75
00:05:29.430 --> 00:05:33.416
期待した解除にはなりません。

76
00:05:33.416 --> 00:05:39.549
また、前にフロートした要素がないページでは、クリアを指定しても変化が見えません。

77
00:05:39.549 --> 00:05:47.674
変化がないときは、指定が間違っていると決めつけず、まず対象となるフロートが本当にあるかを確認してください。

78
00:05:47.674 --> 00:05:51.200
用途を取り違えないことが、最初のチェックです。

79
00:05:51.200 --> 00:05:55.800
迷ったら、まずフロートの有無から確かめる順番を守りましょう。

80
00:05:55.800 --> 00:05:57.944
効かないときの確認手順です。

81
00:05:57.944 --> 00:06:04.834
まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。

82
00:06:04.834 --> 00:06:11.571
次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを見てください。

83
00:06:11.571 --> 00:06:17.849
スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかも重要です。

84
00:06:17.849 --> 00:06:22.290
コンピューテッドでクリアの最終的な値を確認し、あわせて前の要素にフロートがあるか、

85
00:06:22.290 --> 00:06:26.730
親の表示方式や寸法も調べましょう。

86
00:06:26.730 --> 00:06:34.693
最後に、三百二十ピクセル程度の画面幅や文字の拡大、キーボード操作でも内容を利用できるか確かめてください。

87
00:06:34.693 --> 00:06:38.980
順番に一つずつ潰していくことが、解決への近道になります。

88
00:06:38.980 --> 00:06:41.159
最後に互換性とまとめです。

89
00:06:41.159 --> 00:06:46.186
クリアは、記事ではクローム一以降、エッジ十二以降、ファイアフォックス一以降、

90
00:06:46.186 --> 00:06:51.214
サファリ一以降で対応すると紹介されています。

91
00:06:51.214 --> 00:06:58.924
値のボスとナンについても同じく古い版から対応しており、現在の主要ブラウザーでは広く使えます。

92
00:06:58.924 --> 00:07:07.471
練習は、まずボスとナンの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。

93
00:07:07.471 --> 00:07:08.477
まとめます。

94
00:07:08.477 --> 00:07:15.683
クリアはフロートの回り込みをやめて後続を下へ送る指定で、初期値はナン、継承はしません。

95
00:07:15.683 --> 00:07:17.191
お疲れさまでした。

96
00:07:17.191 --> 00:07:22.387
関連するフロートもあわせて確認すると、理解がさらに深まります。

97
00:07:22.387 --> 00:07:26.912
値の違いを言葉で説明できれば、基本は身についています。