SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

clearの役割と主な指定値を解説。後続の文章が浮動要素の下へ移動します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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