HTML DOM スタイルの clear プロパティとは？使い方と設定値をわかりやすく解説
HTML DOM の clear プロパティは、フロート（float）された要素の位置を取得または設定するために使用されるスタイルプロパティです。このプロパティを使うことで、ある要素を別のフロート要素の下に回り込ませるかどうかを指定できます。
例えば、画像やボックスが左右にフロートされている場合、clear プロパティを設定することで、その影響を受けずに要素を新しい行から表示させることが可能になります。
clear プロパティの構文
clear プロパティを設定する際の基本構文は以下のとおりです。
object.style.clear = 'none | left | right | both | initial | inherit';
設定できる値の一覧
clear プロパティに指定できる各値の意味は次の表のとおりです。
| 値 | 説明 |
|---|---|
| left | 左側のフロートを解除します。要素は左側にフロートされた要素の下に移動します。 |
| right | 右側のフロートを解除します。要素は右側にフロートされた要素の下に移動します。 |
| both | 左右両側のフロートを解除します。どちら側のフロート要素の影響も受けません。 |
| none | フロートを解除しません。これがデフォルト値です。 |
| initial | このプロパティを初期値（none）に戻します。 |
| inherit | 親要素の clear プロパティの値を継承します。 |
clear プロパティの使用例
それでは、実際に clear プロパティを使ったサンプルコードを見てみましょう。この例では、JavaScript を使って div 要素の clear プロパティを「left」から「right」へ動的に変更しています。
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin: 5px;
float: right;
clear: both;
border: 2px solid orange;
}
#DIV1 {
clear: left;
}
</style>
<script>
function changeClear() {
document.getElementById("DIV1").style.clear = "right";
document.getElementById("Sample").innerHTML =
"div 要素の clear プロパティを left から right に変更しました";
}
</script>
</head>
<body>
<img src="https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg">
<div id="DIV1">これは div 内のサンプルテキストです。ここにもう一行テキストがあります。
この div にはランダムな英文が含まれています。この div は clear プロパティの
動作をデモンストレーションするために作成されました。</div>
<p>下のボタンをクリックすると、上の div の clear プロパティが変更されます</p>
<button onclick="changeClear()">Change Clear</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを表示すると、画像は右側にフロートされ、div 要素は左側のフロートを解除した状態で表示されます。
続いて、「Change Clear」ボタンをクリックすると、JavaScript の changeClear() 関数が実行され、div 要素の clear プロパティが「right」に切り替わります。その結果、要素の配置が変化し、メッセージも画面に表示されます。
まとめ
HTML DOM の clear プロパティを使用すると、JavaScript から動的にフロートの解除方向を制御できます。left・right・both・none などの値を状況に応じて使い分けることで、フロートレイアウトにおける意図しない回り込みを防ぎ、柔軟なページデザインを実現できます。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの clear プロパティとは？使い方と設定値をわかりやすく解説
HTML DOM の clear プロパティは、フロート（float）された要素の位置を取得または設定するために使用されるスタイルプロパティです。このプロパティを使うことで、ある要素を別のフロート要素の下に回り込ませるかどうかを指定できます。 例えば、画像やボックスが左右にフロートされている場合、clear プロパティを設定することで、その影響を受けずに要素を新しい行から表示させることが可能になります。 clear プロパティの構文 clear プロパティを設定する際の基本構文は以下のとおりです。 object.style.clear = none | left | right | both