CSSのclearプロパティでfloat（回り込み）を解除する方法
CSSのclearプロパティを使用すると、フロート（float）された要素のどちら側の回り込みを解除するかを指定できます。floatによるレイアウト崩れを防ぎ、後続のコンテンツを正しく配置したい場合に非常に便利なプロパティです。
clearプロパティに指定できる主な値は以下のとおりです。
- left：左側に配置されたフロート要素の回り込みを解除します
- right：右側に配置されたフロート要素の回り込みを解除します
- both：左右どちらのフロート要素の回り込みも解除します
- none：回り込みを解除しません（初期値）
例1：clear: left を使ったサンプル
それでは、CSSのclearプロパティの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style type="text/css">
.clear {
clear: left;
}
.yellow{
background-color: #FF8A00;
}
.red{
background-color: #F44336;
}
.green{
background-color: #4CAF50;
}
p {
float: left;
margin: 10px;
padding: 10px;
color:white;
}
</style></head>
<body>
<p class="red">Important Notice</p>
<p class="clear red">Important Notice</p>
<p class="yellow">Mediocre Notice</p>
<p class="green">Ignorable Notice</p>
</body>
</html>出力結果
上記のコードを実行すると、次のような表示になります。
この例では、clear: left;が適用された2つ目の段落が左側のフロートを解除するため、その要素から新しい行に折り返されて表示されます。
例2：clear: both を使ったサンプル
続いて、左右両方のフロートを解除するclear: both;を使用した例です。
<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style type="text/css">
p {
float: left;
margin: 10px;
padding: 10px;
color:white;
background-color: #48C9B0;
border: 4px solid #145A32;
}
p.noneFloat{
float: none;
clear: both;
color: #34495E;
}
</style></head>
<body>
<p>I am okay with shared space</p>
<p class="noneFloat">I want a private space</p>
<p>I am also okay with shared space</p>
<p>Me too</p>
</body>
</html>出力結果
上記のコードを実行すると、次のような表示になります。
この例では、noneFloatクラスを持つ段落にfloat: none;とclear: both;が指定されているため、前後のフロート要素の影響を受けずに独立した行として表示されます。
まとめ
clearプロパティを活用することで、floatによる意図しない回り込みを制御でき、レイアウトを思いどおりに整えることができます。特に複数のカラムレイアウトや画像とテキストの組み合わせなど、floatを使う場面では必ずと言っていいほど登場する重要なプロパティなので、ぜひ使い方をマスターしておきましょう。
-
CSSによるフォントスタイリング入門！fontプロパティの使い方と実例
CSSフォントスタイリングの基本 CSSはフォントスタイリングにおいて重要な役割を担っています。font-family（書体）、font-size（サイズ）、font-weight（太さ）、font-kerning（カーニング）など、多数のプロパティを通じて文字の見た目を細かく制御できます。 font プロパティは、font-style、font-variant、font-weight、font-size/line-height、font-family をまとめて指定できるショートハンド（省略記法）です。さらに、text-decoration のほか、text-shadow、text-stro
-
CSSを使ったクロスブラウザ対応の不透明度（opacity）設定方法
Webページで要素や画像を半透明にしたい場合、opacity プロパティが現代の標準的な解決策です。このプロパティは、Firefox 0.9以降、Safari 2、Opera 9以降、Internet Explorer 9以降、そしてすべてのバージョンのChromeで動作します。 しかし、古いブラウザにも対応させるには、以下のレガシーなプロパティを組み合わせる必要があります。 -moz-opacity：Firefox 0.9より前のバージョン向けの不透明度プロパティ -khtml-opacity：Safari バージョン1以降向けの不透明度プロパティ filter: alpha(opacit