SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのfloatの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 8:08動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:01シーエスエス、リファレンス解説です。
  3. 0:04今回のテーマは、フロートです。
  4. 0:06これは、要素を左や右へ浮かせて、その横に文章を回り込ませるプロパティです。
  5. 0:12雑誌で写真の横に文章が寄り添うような配置を思い浮かべてください。
  6. 0:18フロートを使うと、色付きの箱や図を端に置き、残りのスペースに文章を流し込むことができます。
  7. 0:25この動画では、代表的な値であるレフトとナンを比べて違いを確認します。
  8. 0:31基本の書き方、主な値、実例、効かないときの確認まで、順番に解説します。
  9. 0:37ページ全体のレイアウトはフレックスボックスやグリッドが主役ですが、文章の回り込みという役割では、
  10. 0:42今でもフロートが現役です。
  11. 0:47まず基本の書き方です。
  12. 0:49セレクターのあとに、フロート、コロン、値、セミコロンを書きます。
  13. 0:54スライドの例では、デモというクラスを持つ要素に、レフトを指定しています。
  14. 0:59意味は、この要素を左へ寄せて浮かせ、後ろに続く文章を右側へ回り込ませる、
  15. 1:03ということです。
  16. 1:06ここで大切なのは、フロートは浮かせたい要素自身に書く点です。
  17. 1:10前回学んだクリアが後続の要素に書くのとは役割が逆なので、混同しないようにしましょう。
  18. 1:17対象のクラス名とエイチティーエムエルのクラスが一致しているかも、あわせて確認してください。
  19. 1:24書き方はシンプルなので、値の意味とセットで覚えることが大切です。
  20. 1:28指定できる主な値を確認します。
  21. 1:32レフトは要素を左へ浮かせ、文章はその右側へ回り込みます。
  22. 1:38ライトは逆に、要素を右へ浮かせ、文章は左側へ回り込みます。
  23. 1:44ナンは浮かせない値で、要素は通常の流れに沿って上から順に置かれます。
  24. 1:52まずはこの三つを押さえてください。
  25. 1:55このほか、インライン・スタートやインライン・エンドという、書字方向に合わせた論理的な値もあります。
  26. 2:06横書きの日本語や英語では、スタートが左、エンドが右に対応します。
  27. 2:13値の違いは、浮かせる方向が左か右か、そもそも浮かせるかどうか、という点にあります。
  28. 2:22図を文章のどちら側に置きたいかで選び分けましょう。
  29. 2:27初期値と継承を確認します。
  30. 2:29フロートの初期値はナンです。
  31. 2:32つまり、何も指定しなければ、要素は浮かずに通常の順番で表示されます。
  32. 2:37ブロック要素が縦に積み重なって見えるのは、この初期値のためです。
  33. 2:42通常の継承はしないので、親に書いた値が子へ自動で受け継がれることはありません。
  34. 2:48浮かせたい要素ごとに指定してください。
  35. 2:51また、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値に戻す値です。
  36. 2:57アンセットやリバートなどの共通値もありますが、まずは初期値ナンと、継承しない点を覚えましょう。
  37. 3:05指定を忘れたときの動きを予測できることも大切です。
  38. 3:09回り込みの仕組みを整理します。
  39. 3:11フロートで浮いた要素は、通常の流れから少し外れた場所に置かれます。
  40. 3:17後ろの文章は、浮いた要素の横の空いたスペースに入り込み、その高さを超えると下側へも広がって流れます。
  41. 3:25文章が短ければ横だけ、長ければ横と下の両方を使うイメージです。
  42. 3:30この回り込みを途中で終わらせたいときは、後続の要素にクリアを指定します。
  43. 3:36フロートが回り込みを作り、クリアが回り込みを終わらせる、という対の関係です。
  44. 3:42また、浮いた要素は親の高さに含まれにくいため、親が潰れて見えることがあります。
  45. 3:49その対処は後のセクションで触れます。
  46. 3:52仕組みが分かると、レイアウト崩れの原因も追いやすくなります。
  47. 3:56実例を見ていきます。
  48. 3:58まずエイチティーエムエルの用意です。
  49. 4:01ステージという外側の箱の中に、デモという図の領域と、段落が入っています。
  50. 4:06図の領域にはデモというクラスが付いています。
  51. 4:09頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。
  52. 4:14親と子の構造そのものが例の一部です。
  53. 4:17段落の文章は、図の横へ回り込む様子と、図の下に続く位置の両方を確認できるように用意されています。
  54. 4:23中身は変えず、フロートの値だけを比べる準備をしましょう。
  55. 4:28構造を先に声に出して確認すると、後の比較が分かりやすくなります。
  56. 4:32次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  57. 4:37ステージは幅の上限や余白、枠線が指定されています。
  58. 4:41図の領域であるデモには、余白や枠線、背景色に加えて、幅が七レム、右と下に余白が付けられています。
  59. 4:48文章が図にぴったりくっつかないようにするための工夫です。
  60. 4:53親のステージにはディスプレイ、フロー・ルートが指定され、浮いた図を内側に収めます。
  61. 4:59そのうえで、主役であるフロート、レフトの指定により、図は左へ浮き、段落はその右側へ回り込みます。
  62. 5:06土台の指定は違いを見やすくするためのものなので、文章がどこを流れているかに注目してください。
  63. 5:13値を変えて比べてみましょう。
  64. 5:15最後のフロートの値だけを、レフトからナンへ置き換えます。
  65. 5:19ファイルを保存してブラウザーを再読み込みすると、図の横へ回り込んでいた文章が、
  66. 5:23図の下から始まる通常の縦並びに戻ります。
  67. 5:28エイチティーエムエルや文章の中身は一切変えていません。
  68. 5:31レフトは浮かせて回り込ませる指定、ナンは浮かせない指定です。
  69. 5:36比較のコツは、変える値を一つだけにすることです。
  70. 5:39ついでにライトへ変えると図が右へ移動し、文章が左へ回り込むことも確認できます。
  71. 5:44文章量や親の幅だけを変えたときの収まり方も観察すると、回り込みの流れがよく分かります。
  72. 5:50間違えやすい点を整理します。
  73. 5:53記事でも特に注意されているのが、ページ全体の配置にはフロートではなく、フレックスボックスやグリッドを基本にする、
  74. 5:57という点です。
  75. 6:02フロートはもともと文章の回り込みのための仕組みなので、複雑なレイアウトに使うと管理が難しくなります。
  76. 6:09もう一つの注意点は、浮いた要素が親の高さに含まれず、親の背景や枠線が潰れて見えることがある点です。
  77. 6:16浮いた要素を親に含める必要がある場合は、親にディスプレイ、フロー・ルートを指定する方法などを検討してください。
  78. 6:24用途を取り違えないことが、最初のチェックです。
  79. 6:27回り込みならフロート、全体配置ならフレックスやグリッド、と使い分けましょう。
  80. 6:33効かないときの確認手順です。
  81. 6:35まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
  82. 6:41次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを見てください。
  83. 6:48スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかも重要です。
  84. 6:54コンピューテッドでフロートの最終的な値を確認し、あわせて要素の幅や親の表示方式も調べましょう。
  85. 7:01幅が親いっぱいに広いと、横に回り込むスペースが残らないこともあります。
  86. 7:07最後に、三百二十ピクセル程度の画面幅や文字の拡大、キーボード操作でも内容を利用できるか確かめてください。
  87. 7:14順番に一つずつ潰していくことが、解決への近道になります。
  88. 7:19最後に互換性とまとめです。
  89. 7:21フロートは、記事ではクローム一以降、エッジ十二以降、ファイアフォックス一以降、
  90. 7:26サファリ一以降で対応すると紹介されています。
  91. 7:31値のレフトとナンについても同じく古い版から対応しており、現在の主要ブラウザーでは広く使えます。
  92. 7:39練習は、まずレフトとナンの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。
  93. 7:48まとめます。
  94. 7:49フロートは要素を左右へ浮かせて文章を回り込ませる指定で、初期値はナン、継承はしません。
  95. 7:56お疲れさまでした。
  96. 7:58関連するクリアもあわせて確認すると、理解がさらに深まります。
  97. 8:03値の違いを言葉で説明できれば、基本は身についています。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

floatの役割と主な指定値を解説。色付きの箱の横に文章が回り込むかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのfloatの使い方：指定値・実例・効かない原因とブラウザー互換性 →