floatプロパティで位置を調節(1)

弊社近くの夏の両国橋より

結構好きな景色です。

というわけでみなさまこんにちは。

続いて『float』プロパティについて勉強していきましょう。『float』は『フロート』と読みます。このプロパティは非常に良く使われるプロパティでHTMLやCSSを書くお仕事をする人になるためには必ず覚えなくてはいけません。その反面ちょっと難しいところも多く、最初のうちは色々大変かもしれませんが頑張っていきましょう。

では最初に『float』プロパティで何ができるのかざっと確認していきましょう。

これまで勉強してきた内容だとブロックレベル要素の横幅を小さく設定して位置を左右に配置してもその要素は詰まることはなく改行が入って表示されてしまいますね。以下にサンプルを用意したのでみてみてください。

サンプルをみてみる。

上下に改行が入っているのが確認できましたでしょうか。これを『float』プロパティを使うとこのように配置できます。

サンプルをみてみる。

上下の改行が入らず空いたところに詰まって表示されましたね。

フロートを使用したもう一つのレイアウトのパターンとして、続く要素を回りこませて表示させることができます。以下のサンプルをみてみてください。

サンプルをみてみる。

いかがでしょうか。上記のサンプルは画像部分にフロートを効かせているのですが、それに続くテキストが回りこむ形で表示されていますね。よくブログなどで使用されているデザインです。

こんな感じで『float』プロパティを使用すると通常とは違った形で要素を配置をすることができます。作成できるコンテンツの幅が大きく広がること請け合いです。

今回の記事では『続く要素を回りこませてレイアウトさせるパターン』の実装方法について勉強していきたいと思います。要素を詰めてレイアウトするパターンは次回解説をしていきますね。

というわけでまず『float』プロパティの記述方法ですが、値に取れるのは『left』、『right』、『none』の3つです。

CSSファイルに記述するとすると以下のような感じになります。

p {
    float: left;
    width: 200px;
    height: 200px;
}
div {
    float: right;
    width: 200px;
    height: 200px; 
}

値に『left』か『right』を指定した場合にフロートされた要素としてレンダリングされます。『left』と指定すると左寄せのフロート、『right』と指定すると右寄せのフロートです。『none』を指定した場合はフロートが効いてない状態となり、各HTML要素のfloatプロパティの初期値は『none』です。

そして先程のサンプルのように続く要素を回りこませて表示させるにはフロートされた要素の後にフロートが効いていない通常の要素を配置すればOKです。

というわけで以下にHTML要素に組み込んだソースを用意してみました。

<p style="float: left; background-color: yellow; width: 200px; height: 200px;">横幅200px高さ200pxのp要素だよ</p>

これをレンダリングさせてみましょう。サンプルではフロートの効果が分かりやすいようにbody要素の幅を300pxに指定しています。

サンプルをみてみる。

いかがでしょうか。ぱっと見ると何も変化がないように見えますね。上記のサンプルでは『float』プロパティに左側にフロートさせる『left』と指定しているので表示に変化がないように感じますがこれでもしっかりフロートされた要素としてレンダリングされています。

ではちょいと確認してみましょう。この要素の下にフロートされていないごく普通のp要素を入れてみます。

<p style="float: left; background-color: yellow; width: 200px; height: 200px;">横幅200px高さ200pxのp要素だよ</p>
<p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

さて、これをレンダリングしてみると、

サンプルをみてみる。

続くp要素が右側に回りこんでいるのが確認できましたでしょうか。しっかりフロートされている証拠ですね。

ではフロートを『right』にしてみましょう。以下にサンプルを用意したので確認してみてください。

<p style="float: right; background-color: yellow; width: 200px; height: 200px;">横幅200px高さ200pxのp要素だよ</p>
<p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

サンプルをみてみる。

いかがでしょうか。要素が右側に寄せられ、続く要素は左側に回りこんでいます。フロートを『right』にするとこのようなレンダリングで表示することができます。

前の記事で勉強した『margin-left: auto』と指定した場合でも右寄せのレイアウトをすることができますが、普通のブロックレベル要素は前後に改行が入った状態でレンダリングされますので続く要素が回りこむようなレイアウトにはなりません。以下にフロートを切った状態のサンプルを用意したので確認してみてください。

<p style="margin-left: auto; background-color: yellow; width: 200px; height: 200px;">横幅200px高さ200pxのp要素だよ</p>
<p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

サンプルをみてみる。

いかがでしょうか。上下に改行がはいっているのが確認できたと思います。フロートを使用したサンプルと見比べてみるとレイアウトに大きな差がありますね。

では『float』プロパティを使う際の場合の注意点を確認していきましょう。

まず最初にfloatプロパティを使って要素をフロートさせる場合は同時にwidthプロパティも指定しなくてはならないという点があげられます。これはCSS上のルールですので忘れないようにしてください。

そして親要素はフロートされた子要素の高さを自身の高さに算出できない、という点があります。

以下にサンプルを用意してみましたので試してみましょう。以下のサンプルにはdiv要素とその子要素であるp要素がいて、子要素のp要素には『float: left』と指定されていますね。観測しやすいようにdiv要素には灰色の背景色をつけています。

<div style="background-color: silver;">
    <p style="float: left; background-color: yellow; width: 200px; height: 200px;">横幅200px高さ200pxのp要素だよ</p>
</div>

さてこれをレンダリングしてみると…

サンプルをみてみる。

いかがでしょうか。『background-color: silver』と指定されたdiv要素がいるはずなのに全く灰色の部分が見えませんね。これがフロートをする場合のややこしいところです。div要素は消えてしまったのではなく子要素の高さが反映されないために高さが『0』となってしまい、目視できない状態になっています。

これまで勉強してきたとおり基本的に親要素の高さは内包されている子要素の高さを算出して自動で決定されるのですが、フロートされた要素は通常のレイアウトを決定する『ドキュメントフロー』という処理から外れたものとしてレンダリングされてしまうため、親要素はフロートされた子要素の高さを算出できません。
※ドキュメントフローについての解説はかなり長くなるのでまた別の記事で紹介したいと思います。

さて、この子要素の高さを親要素に反映できないとなると色々な問題が発生します。まず先ほどのように親要素に背景色などを入れるデザインを構築することができなくなりますね。そして、続く要素がすべて回りこんで表示されてしまうので通常のレイアウトに戻したい、といった場合に弊害があるということです。

先ほどのHTMLソースに適当な文言を入れたp要素を追記してみました。

<div style="background-color: silver;">
    <p style="float: left; background-color: yellow; width: 200px; height: 200px;">横幅200px高さ200pxのp要素だよ</p>
</div>

<p>『ここから通常のレイアウトに戻したいよ！』ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

これをレンダリングさせてみると…

サンプルをみてみる。

親要素であるdiv要素の高さが『0』なのでフロートされているp要素が末端にきてしまい、さらに続くp要素が回りこんで表示されてしまっています。通常のレイアウトに戻したい、といった場合にちょっと問題になりそうですね。

これらの現象を解決するにはいくつかの方法があり、まず親要素に子要素の高さを直接指定してしまうことで解決できます。

ちょっと追記してみましょう。今回の場合は子要素のp要素の大きさは200pxなので親要素であるdiv要素の高さも200pxに指定します。ついでにp要素に『user agent stylesheet』で設定されているデフォルトのマージンも邪魔なので0にしておきます。
※『user agent stylesheet』について忘れちゃった方はこちらへ

<div style="background-color: silver; height: 200px;">
    <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">横幅200px高さ200pxのp要素だよ</p>
</div>

<p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

これをレンダリングしてみると…

サンプルをみてみる。

OKですね。親要素の高さが子要素の高さと同じになることで続くp要素を回りこませないようにできました。これが解決方法のひとつになります。

しかしこの手法はちょっと問題があり、子要素の高さが固定されている場合のみしか対応できません。以下のように子要素の高さが変化するようになった場合を考えてみましょう。

<div style="background-color: silver; height: 200px;">
    <p style="float: left; background-color: yellow; width: 200px; margin: 0;">ここはp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！</p>
</div>

<p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

これをレンダリングしてみると…

サンプルをみてみる。

灰色の親要素と黄色の子要素の高さが合っていないためちょっとスカスカになってしまいましたね。このデザインでOKだぜぇ、という感じならば問題ないのですがちょっとみっともない感じがしなくもないです。

ウェブサイトのデザインを決める際には基本的にHTML要素の高さは内容物の高さで自動算出されるものと想定してレイアウトを決めていくことが非常に多く、親要素に高さを指定して回りこみを解除するという手法はあまり汎用性が高いとは言えません。やはり親要素の高さは内包されている子要素の高さに合わせたいところです。

そんな悩めるあなたにうってつけなのが『clear』プロパティを使用して回りこみを解除する、という方法です。

『clear』プロパティとはフロートを解除するためのプロパティで、取れる値とそれぞれの値の効果は以下のようになっています。

left	『float: left』と設定された要素の回りこみを解除する
right	『float: right』と設定された要素の回りこみを解除する
both	全てのフロートの回りこみを解除する
none	回りこみを解除しない

このプロパティを設定した要素を配置することによってフロートを解除して通常のレイアウトに戻すことができます。

そしてこのプロパティを設定した要素を上手く使用するとフロートされた子要素の高さを親要素の高さに算出できるようになります。実際に記述して試してみましょう。

先ほどの記述に『float: right』を設定したp要素を追加しました。

<div style="background-color: silver;">
    <p style="float: left; background-color: yellow; width: 200px; margin: 0;">ここはp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！</p>
    <p style="float: right; background-color: aqua; width: 200px; margin: 0;">ここは2つ目のp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！ちなみにこれは右にフロートさせているよ！</p>
</div>

<p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

以下がサンプルになります。サンプルではbody要素の幅を600pxに指定しています。

サンプルをみてみる。

続くp要素が左にフロートされた要素の右、右にフロートされた要素の左、つまり真ん中に回り込みしていますね。

では続くp要素に『clear: left』と記述してみましょう。

<div style="background-color: silver;">
    <p style="float: left; background-color: yellow; width: 200px; margin: 0;">ここはp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！</p>
    <p style="float: right; background-color: aqua; width: 200px; margin: 0;">ここは2つ目のp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！ちなみにこれは右にフロートさせているよ！</p>
</div>

<p style="clear: left;">ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

そうするとこのようにレンダリングされます。

サンプルをみてみる。

ちょっと分かりづらいかもしれませんが回りこみが解除できているのが確認できましたでしょうか。

この場合は『clear: left』と指定されているので『float: left』を設定した要素のみを対象にして回りこみを解除しています。なので右にフロートされているp要素に対しては回りこみが解除されないので少しだけ左に回り込みされちゃっています。今回のサンプルでは右側のp要素の方がちょっと大きいですもんね。

では続いて『clear: right』と指定してみます。

<div style="background-color: silver;">
    <p style="float: left; background-color: yellow; width: 200px; margin: 0;">ここはp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！</p>
    <p style="float: right; background-color: aqua; width: 200px; margin: 0;">ここは2つ目のp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！ちなみにこれは右にフロートさせているよ！</p>
</div>

<p style="clear: right;">ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

そうすると…

サンプルをみてみる。

右にフロートされた要素に対しての回りこみが解除されたのが確認できましたでしょうか。今回は右にフロートされたp要素の方が大きいので確認しやすいかと思います。

最後に『clear: both』を使ってみましょう。これは『clear: left』と『clear: right』、つまり全てのフロートされた要素に対しての回りこみを解除する値です。

<div style="background-color: silver;">
    <p style="float: left; background-color: yellow; width: 200px; margin: 0;">ここはp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！</p>
    <p style="float: right; background-color: aqua; width: 200px; margin: 0;">ここは2つ目のp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！ちなみにこれは右にフロートさせているよ！</p>
</div>

<p style="clear: both;">ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

サンプルをみてみる。

OKですね。こんな感じで『clear』プロパティを使用すると回り込みを解除し元のレイアウトに戻すことができます。

ちなみに『clear』プロパティに設定する値は『both』のみでなんとかなる場合がほとんどなので『left』と『right』の値はほとんど使用されません。ですので回りこみを解除したい場合は続く要素に『clear: both』と記述すればOKです。

さて、とりあえず回りこみは解除できたのですがまだちょっと問題がありますね。親要素であるdiv要素の高さがどうやら0のままのようです。

これも『clear』プロパティを使用すると解決することができます。

今は高さを設定させたいdiv要素の外側にいる要素に『clear: both』と指定していますがこれを高さを設定させたいdiv要素の中に入れてみましょう。

<div style="background-color: silver;">
    <p style="float: left; background-color: yellow; width: 200px; margin: 0;">ここはp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！</p>
    <p style="float: right; background-color: aqua; width: 200px; margin: 0;">ここは2つ目のp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！ちなみにこれは右にフロートさせているよ！</p>
    <p style="clear: both;">ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>
</div>

これをレンダリングさせてみると…

サンプルをみてみる。

親要素であるdiv要素がちゃんと高さを算出して反映できていますね。このように一番最後の子要素に『clear: both』と指定すればその手前の子要素がフロートされていてもちゃんと高さを算出できるようになります。

高さが算出できる理由は『clear: both』が指定された要素は『クリアランス』と呼ばれる上方向のマージンが自動で生成されるからです。その生成された『クリアランス』の高さはフロートされた手前の要素の高さと同じなのでその結果、親要素の高さに算出できるというわけですね。この『クリアランス』についてはあまり使用されない言葉ですので忘れてしまって大丈夫です。実装方法だけ忘れないようにしてください。

ちなみに設計の都合上、最後の子要素に『clear: both』を入れられない場合は空要素を仕込みしてしまって問題ありません。

上記のサンプルの場合では最後のp要素を背景色が灰色に設定されているdiv要素から外したい場合などですね。

以下のような記述になります。

<div style="background-color: silver;">
    <p style="float: left; background-color: yellow; width: 200px; margin: 0;">ここはp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！</p>
    <p style="float: right; background-color: aqua; width: 200px; margin: 0;">ここは2つ目のp要素だよ。高さは設定してないから中身の大きさによって色々高さが変わるよ！ちなみにこれは右にフロートさせているよ！</p>
    <div style="clear: both;"></div>
</div>

<p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。</p>

サンプルをみてみる。

注目すべきはフロートを解除するために『<div style="clear: both;"></div>』を仕込んでいることです。このやり方も良く使用されるので覚えておきましょう。

さて、『clear』プロパティを使用した場合の実装方法はこんな感じになりますが、最後に紹介したように意味のない空の要素を用意してフロートを解除するのはちょっと気持ち悪いなぁと感じる方もいらっしゃると思います。

そんな悩めるあなたに紹介したいのは『overflow』プロパティというものです。これを使うともっとスマートにフロートを解除することができます。

かなり記事が長くなってしまったので一旦ここで切りますね。次の記事で『overflow』プロパティについて引き続き解説していきます。

ではまたお会いしましょう。