やぁ、X-MENみたいにミュータント能力が欲しいユトピ(@yutopi60pa)です。
今回勉強するのは「clear」プロパティだよ。
ゲームをクリアするとかそういうベタなことは言わないよ!
ということで今日はfloatとも大いに関係していて、しかもレイアウトでもよく使うCSSプロパティの「clear」について勉強していきましょう。
clearとは?
clearプロパティは読んで字のごとく「クリア=解除する」という意味です。
それではなにをクリアするのかというと、”回り込みの解除”をします。
回り込みとは、CSSプロパティfloat:leftまたはrightを指定された要素の反対側にテキストなどが移動してくることですね。
floatプロパティの詳しい説明に関しては、こちらをご覧ください。
・レイアウトで失敗する前に!CSSプロパティ「float」の使い方と問題点
clearの指定方法は以下の4つです。
- left・・・左に寄せられた回り込みを解除します。
- right・・・右に寄せられた回り込みを解除します。
- both・・・右、または左の全て回り込みを解除します。
- none・・・回り込み解除をしません。
ここまで読んだ方ならわかると思います。そうなんです。clearはfloatとふかーーーい関係のあるプロパティなんです。
floatあってのclearといっても過言ではありません。
それでは早速実際に見てみましょう。
clearプロパティを使ってみよう!
clear: left;を指定
コード
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#fl { float: left; width:80%; height:200px; background:gold; } #cl { clear: left; } HTML <div id="fl">左に寄るよ!</div> <p id="cl">回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!</p> |
結果
#cl 回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!
clear: right;を指定
コード
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#fl2 { float: right; width:80%; height:200px; background:gold; } #cl2 { clear: right; } HTML <div id="fl2">右に寄るよ!</div> <p id="cl2">回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!</p> |
結果
#cl2 回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!
clear: both;を指定
コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#fl3 { float: right; width:80%; height:200px; background:gold; } #fl4 { float: left; width:80%; height:200px; background:gold; } #cl3 { clear: both; } HTML <div id="fl3">右に寄るよ!</div> <p id="cl3">回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!</p> <div id="fl4">左に寄るよ!</div> <p id="cl3">回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!</p> |
結果
#cl3 回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!
#cl3 回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!回り込みを解除したよ!