Documentation CSS

この記事で学べること

  • clearプロパティの概念と目的
  • left、right、bothの各値の違い
  • floatとの組み合わせ方
  • clearfixテクニックの実装方法
  • flexboxやgridとの使い分け

概要

CSSのclearプロパティは、floatプロパティと組み合わせて使用され、フロートされた要素の影響を解除するために使います。floatを使用すると、要素が通常の文書の流れから外れてレイアウトが崩れることがあります。このような場合、clearプロパティを使用することでフロートの影響を解除し、要素を通常の流れに戻すことができます。この記事では、clearプロパティの使い方、注意点、および実際の活用方法について解説します。

clearプロパティの基本的な使い方

clearの主な値

clearプロパティには以下の値があります：

  • none：デフォルト値で、フロートを解除しません。
  • left：左側にフロートされた要素の回り込みを解除します。
  • right：右側にフロートされた要素の回り込みを解除します。
  • both：左と右の両側にフロートされた要素の回り込みを解除します。
.clear-left {
clear: left; /* 左側のフロートを解除 */
}
.clear-right {
clear: right; /* 右側のフロートを解除 */
}
.clear-both {
clear: both; /* 両側のフロートを解除 */
}

基本的な例

以下は、左右にフロートされた要素の影響を解除するためにclear: both;を使用する例です。

<div class="float-left">左にフロートされたボックス</div>
<div class="float-right">右にフロートされたボックス</div>
<div class="clear-both">フロートの影響を解除したボックス</div>
.float-left {
float: left;
width: 100px;
height: 100px;
background-color: #87ceeb;
}
.float-right {
float: right;
width: 100px;
height: 100px;
background-color: #f08080;
}
.clear-both {
clear: both;
background-color: #90ee90;
padding: 10px;
}

clearプロパティの活用方法

レイアウトの崩れを防ぐ

floatを使用すると、フロートした要素の下に続く要素がその影響を受け、レイアウトが崩れることがあります。clearプロパティを使用することで、次の要素がフロートの影響を受けないようにできます。

clearfixの代替として使用

clearプロパティは、特定の要素のフロート解除だけでなく、親要素の後に配置してフロート解除を行う「clearfix」の簡易的な代替手段としても使用できます。

.clearfix::after {
content: "";
display: block;
clear: both;
}

親要素にclearfixクラスを適用することで、内部のフロートされた子要素の影響を解除できます。

フォームや画像配置の調整

floatを使用しているフォーム要素や画像の配置を調整する際にも、clearプロパティは有効です。フォームの各要素が横に並びすぎないようにするため、clearで整列させることが可能です。

clearを使用する際の注意点

フロートの影響範囲を理解する

floatを解除する際、clearの適用される要素がどのフロートを解除するかを正確に理解することが重要です。意図しない方向にclearを適用すると、レイアウトが崩れる原因となります。

clear: both;が最も一般的

多くのレイアウトで、clear: both;がフロート解除のために最もよく使われますが、必要以上に解除すると、レイアウトの意図しない位置に余白ができる場合があります。

レスポンシブデザインへの影響

clearプロパティを多用すると、レスポンシブデザインでの配置が複雑になることがあります。レイアウトが変わるたびにクリアリングの調整が必要になることがあるため、flexboxやgridの併用を考慮するのも有効です。

現代のCSSレイアウトでのclearの位置づけ

clearの役割の変化

floatとclearは古くからCSSレイアウトの基本として使われてきましたが、flexboxや“CSS Gridが登場してからは、その役割が縮小されています。これらの新しいレイアウト手法は、フロートの代替として、よりシンプルかつ直感的にレイアウトを構築できるからです。

clearの代替手段

  • Flexbox：要素を横並びにする場合や、簡単なレイアウト調整にはflexboxが有効です。クリアリングの必要がないため、clearを使用するよりも管理が簡単です。
  • CSS Grid：複雑なレイアウトには“CSS Gridが適しており、フロート解除を考慮せずにレイアウトを組むことができます。

まとめ

clearプロパティは、floatによるレイアウト崩れを防ぐための強力なツールですが、現代のレイアウト手法が発展した現在では補助的な役割を果たすことが多くなっています。clearとfloatの組み合わせは古いが効果的な方法ですが、flexboxやCSS Gridの導入も視野に入れ、適材適所で使い分けることが大切です。clearの使い方を正しく理解し、適切にレイアウトを調整していきましょう。

ポイントの振り返り

値動作使用例
noneフロートを解除しないデフォルト
left左フロートを解除左側の回り込み解除
right右フロートを解除右側の回り込み解除
both両側を解除一般的な使用

clearfixテクニック

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

関連プロパティ

プロパティ説明
float要素のフロート
display: flex代替レイアウト手法
display: grid代替レイアウト手法

参考文献

円