WEBVTT

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

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

3
00:00:04.055 --> 00:00:06.589
今回のテーマは、フロートです。

4
00:00:06.589 --> 00:00:12.840
これは、要素を左や右へ浮かせて、その横に文章を回り込ませるプロパティです。

5
00:00:12.840 --> 00:00:18.246
雑誌で写真の横に文章が寄り添うような配置を思い浮かべてください。

6
00:00:18.246 --> 00:00:25.849
フロートを使うと、色付きの箱や図を端に置き、残りのスペースに文章を流し込むことができます。

7
00:00:25.849 --> 00:00:31.593
この動画では、代表的な値であるレフトとナンを比べて違いを確認します。

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

9
00:00:37.506 --> 00:00:42.659
ページ全体のレイアウトはフレックスボックスやグリッドが主役ですが、文章の回り込みという役割では、

10
00:00:42.659 --> 00:00:47.812
今でもフロートが現役です。

11
00:00:47.812 --> 00:00:49.473
まず基本の書き方です。

12
00:00:49.473 --> 00:00:54.304
セレクターのあとに、フロート、コロン、値、セミコロンを書きます。

13
00:00:54.304 --> 00:00:59.740
スライドの例では、デモというクラスを持つ要素に、レフトを指定しています。

14
00:00:59.740 --> 00:01:03.062
意味は、この要素を左へ寄せて浮かせ、後ろに続く文章を右側へ回り込ませる、

15
00:01:03.062 --> 00:01:06.383
ということです。

16
00:01:06.383 --> 00:01:10.913
ここで大切なのは、フロートは浮かせたい要素自身に書く点です。

17
00:01:10.913 --> 00:01:17.254
前回学んだクリアが後続の要素に書くのとは役割が逆なので、混同しないようにしましょう。

18
00:01:17.254 --> 00:01:24.048
対象のクラス名とエイチティーエムエルのクラスが一致しているかも、あわせて確認してください。

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

20
00:01:28.880 --> 00:01:32.156
指定できる主な値を確認します。

21
00:01:32.156 --> 00:01:38.272
レフトは要素を左へ浮かせ、文章はその右側へ回り込みます。

22
00:01:38.272 --> 00:01:44.606
ライトは逆に、要素を右へ浮かせ、文章は左側へ回り込みます。

23
00:01:44.606 --> 00:01:52.032
ナンは浮かせない値で、要素は通常の流れに沿って上から順に置かれます。

24
00:01:52.032 --> 00:01:55.745
まずはこの三つを押さえてください。

25
00:01:55.745 --> 00:02:06.447
このほか、インライン・スタートやインライン・エンドという、書字方向に合わせた論理的な値もあります。

26
00:02:06.447 --> 00:02:13.437
横書きの日本語や英語では、スタートが左、エンドが右に対応します。

27
00:02:13.437 --> 00:02:22.392
値の違いは、浮かせる方向が左か右か、そもそも浮かせるかどうか、という点にあります。

28
00:02:22.392 --> 00:02:27.852
図を文章のどちら側に置きたいかで選び分けましょう。

29
00:02:27.852 --> 00:02:29.904
初期値と継承を確認します。

30
00:02:29.904 --> 00:02:32.114
フロートの初期値はナンです。

31
00:02:32.114 --> 00:02:37.481
つまり、何も指定しなければ、要素は浮かずに通常の順番で表示されます。

32
00:02:37.481 --> 00:02:42.532
ブロック要素が縦に積み重なって見えるのは、この初期値のためです。

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

34
00:02:48.688 --> 00:02:51.687
浮かせたい要素ごとに指定してください。

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

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

37
00:03:05.262 --> 00:03:09.208
指定を忘れたときの動きを予測できることも大切です。

38
00:03:09.208 --> 00:03:11.680
回り込みの仕組みを整理します。

39
00:03:11.680 --> 00:03:17.118
フロートで浮いた要素は、通常の流れから少し外れた場所に置かれます。

40
00:03:17.118 --> 00:03:25.357
後ろの文章は、浮いた要素の横の空いたスペースに入り込み、その高さを超えると下側へも広がって流れます。

41
00:03:25.357 --> 00:03:30.465
文章が短ければ横だけ、長ければ横と下の両方を使うイメージです。

42
00:03:30.465 --> 00:03:36.398
この回り込みを途中で終わらせたいときは、後続の要素にクリアを指定します。

43
00:03:36.398 --> 00:03:42.660
フロートが回り込みを作り、クリアが回り込みを終わらせる、という対の関係です。

44
00:03:42.660 --> 00:03:49.086
また、浮いた要素は親の高さに含まれにくいため、親が潰れて見えることがあります。

45
00:03:49.086 --> 00:03:52.052
その対処は後のセクションで触れます。

46
00:03:52.052 --> 00:03:56.996
仕組みが分かると、レイアウト崩れの原因も追いやすくなります。

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

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

49
00:04:01.056 --> 00:04:06.275
ステージという外側の箱の中に、デモという図の領域と、段落が入っています。

50
00:04:06.275 --> 00:04:09.465
図の領域にはデモというクラスが付いています。

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

52
00:04:14.395 --> 00:04:17.005
親と子の構造そのものが例の一部です。

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

54
00:04:23.964 --> 00:04:28.024
中身は変えず、フロートの値だけを比べる準備をしましょう。

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

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

57
00:04:37.449 --> 00:04:41.308
ステージは幅の上限や余白、枠線が指定されています。

58
00:04:41.308 --> 00:04:48.717
図の領域であるデモには、余白や枠線、背景色に加えて、幅が七レム、右と下に余白が付けられています。

59
00:04:48.717 --> 00:04:53.038
文章が図にぴったりくっつかないようにするための工夫です。

60
00:04:53.038 --> 00:04:59.367
親のステージにはディスプレイ、フロー・ルートが指定され、浮いた図を内側に収めます。

61
00:04:59.367 --> 00:05:06.776
そのうえで、主役であるフロート、レフトの指定により、図は左へ浮き、段落はその右側へ回り込みます。

62
00:05:06.776 --> 00:05:13.876
土台の指定は違いを見やすくするためのものなので、文章がどこを流れているかに注目してください。

63
00:05:13.876 --> 00:05:15.844
値を変えて比べてみましょう。

64
00:05:15.844 --> 00:05:19.780
最後のフロートの値だけを、レフトからナンへ置き換えます。

65
00:05:19.780 --> 00:05:23.926
ファイルを保存してブラウザーを再読み込みすると、図の横へ回り込んでいた文章が、

66
00:05:23.926 --> 00:05:28.073
図の下から始まる通常の縦並びに戻ります。

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

68
00:05:31.868 --> 00:05:36.085
レフトは浮かせて回り込ませる指定、ナンは浮かせない指定です。

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

70
00:05:39.458 --> 00:05:44.940
ついでにライトへ変えると図が右へ移動し、文章が左へ回り込むことも確認できます。

71
00:05:44.940 --> 00:05:50.984
文章量や親の幅だけを変えたときの収まり方も観察すると、回り込みの流れがよく分かります。

72
00:05:50.984 --> 00:05:53.005
間違えやすい点を整理します。

73
00:05:53.005 --> 00:05:57.552
記事でも特に注意されているのが、ページ全体の配置にはフロートではなく、フレックスボックスやグリッドを基本にする、

74
00:05:57.552 --> 00:06:02.098
という点です。

75
00:06:02.098 --> 00:06:09.315
フロートはもともと文章の回り込みのための仕組みなので、複雑なレイアウトに使うと管理が難しくなります。

76
00:06:09.315 --> 00:06:16.388
もう一つの注意点は、浮いた要素が親の高さに含まれず、親の背景や枠線が潰れて見えることがある点です。

77
00:06:16.388 --> 00:06:24.327
浮いた要素を親に含める必要がある場合は、親にディスプレイ、フロー・ルートを指定する方法などを検討してください。

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

79
00:06:27.647 --> 00:06:33.132
回り込みならフロート、全体配置ならフレックスやグリッド、と使い分けましょう。

80
00:06:33.132 --> 00:06:35.234
効かないときの確認手順です。

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

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

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

84
00:06:54.751 --> 00:07:01.807
コンピューテッドでフロートの最終的な値を確認し、あわせて要素の幅や親の表示方式も調べましょう。

85
00:07:01.807 --> 00:07:07.062
幅が親いっぱいに広いと、横に回り込むスペースが残らないこともあります。

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

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

88
00:07:19.072 --> 00:07:21.267
最後に互換性とまとめです。

89
00:07:21.267 --> 00:07:26.417
フロートは、記事ではクローム一以降、エッジ十二以降、ファイアフォックス一以降、

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

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

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

93
00:07:48.283 --> 00:07:49.296
まとめます。

94
00:07:49.296 --> 00:07:56.556
フロートは要素を左右へ浮かせて文章を回り込ませる指定で、初期値はナン、継承はしません。

95
00:07:56.556 --> 00:07:58.076
お疲れさまでした。

96
00:07:58.076 --> 00:08:03.141
関連するクリアもあわせて確認すると、理解がさらに深まります。

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