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

みなさまいかがお過ごしでしょうか。

続きましてフロートを使用した『カラムレイアウト』のパターンについて学んでいきましょう。

これまでの記事では続く要素を回りこませて表示させるパターンについての解説が主でした。よくブログなどで使用されているレイアウトですね。

今回は要素を横並びにして表示させるフロートのパターンの解説です。

まずサンプルをみてみましょう。フロートを使用するとこのようなカラムレイアウトを作成することができます。

<div style="background-color: silver;" class="clearfix">
    <div style="float: left; width: 400px;">
        <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。1</p>
        <p style="float: right; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。2</p>
        <p style="float: left; background-color: green; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。3</p>
        <p style="float: right; background-color: red; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。4</p>
    </div>
    <div style="float: right; width: 400px;">
        <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。5</p>
        <p style="float: left; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。6</p>
    </div>
</div>

サンプルをみてみる。

いかがでしょうか。フロートを上手く使用するとこのように左右に配置できますので作成できるコンテンツの幅が大きく広がること請け合いです。ちなみにこのレイアウトはフロートされた要素をさらにフロートさせて実現しています。

では作成手順をみていきましょう。

今回はdiv要素を親要素としてその中にp要素をいれ、さらにそのdiv要素をフロートさせる形で実装したいと思います。

まず普通に書きますね。

<div>
    <p>ここはp要素だよ。1</p>
    <p>ここはp要素だよ。2</p>
    <p>ここはp要素だよ。3</p>
    <p>ここはp要素だよ。4</p>
</div>

そしたらdiv要素の子要素であるp要素に『float』プロパティを振っていきましょう。交互に左と右に寄せるレイアウトにしたいので『float: left』と『float: right』をそれぞれふっていきます。ついでにp要素に幅と、ついでに高さも200pxに指定しましょう。フロートさせる場合は横幅だけは指定する必要がありますからね。あと観測しやすいように適当に背景色をつけてp要素のデフォルトのマージンをゼロにします。

<div>
    <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。1</p>
    <p style="float: right; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。2</p>
    <p style="float: left; background-color: green; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。3</p>
    <p style="float: right; background-color: red; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。4</p>
</div>

この時点でレンダリングさせてみると以下のようになります。

サンプルをみてみる。

『float: left』と『float: right』をふった要素がそれぞれ右と左に寄せられていますね。これを2カラムの表のレイアウトのようにしたいので親のdiv要素に横幅を指定します。2カラムなのでp要素2つ分の幅、つまり400pxを指定します。

<div style="width: 400px;">
    <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。1</p>
    <p style="float: right; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。2</p>
    <p style="float: left; background-color: green; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。3</p>
    <p style="float: right; background-color: red; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。4</p>
</div>

サンプルをみてみる。

このように親要素に横幅を指定するとカラムレイアウトが実装できます。なぜこのような表示方法になるかというとフロートされた要素は親要素の空いている横のスペースに十分なスペースがあればそこに収まりますが、もし親要素のスペースに余裕がない場合は1段下げられて表示されます。

これは一般に『カラム落ち』という名称で呼ばれる現象です。このカラムレイアウトは『カラム落ち』を上手く利用して表示させる手法です。仮に親要素の横幅を300pxに指定してみましょう。子要素のp要素は200pxなので100pxのスペースが足りません。すると、

<div style="width: 300px;">
    <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。1</p>
    <p style="float: right; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。2</p>
    <p style="float: left; background-color: green; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。3</p>
    <p style="float: right; background-color: red; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。4</p>
</div>

サンプルをみてみる。

このようなレンダリングになります。

親要素に十分なスペースがないため一段カラム落ちしてしまい、偶数の子要素に『float: right』を指定しているため右側に表示される、といった流れです。

ここがちょっと難しいですね。マージンやパディングなども子要素の大きさとして反映されてしまいますので注意が必要です。

もし自作のウェブサイトなどを作成中に意図せずこのようなカラム落ちしたレンダリングになってしまった場合は子要素の横幅やマージン、パディングなどにおかしな点がないか確認するようにしましょう。

p要素などはデフォルトの設定として上下にマージンがはいっていたりするのでそこも気をつけてくださいね。

というわけで引き続きやっていきましょう。今回の完成形ではフロートされた要素をさらにフロートさせる必要がありますのでdiv要素の横幅を400pxに戻しつつもう1つ、div要素とp要素のセットを用意します。

<div style="width: 400px;">
    <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。1</p>
    <p style="float: right; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。2</p>
    <p style="float: left; background-color: green; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。3</p>
    <p style="float: right; background-color: red; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。4</p>
</div>
<div>
    <p>ここはp要素だよ。5</p>
    <p>ここはp要素だよ。6</p>
</div>

サンプルをみてみる。

今のところは新しく追加したdiv要素とp要素のセットにフロートや横幅を指定していないので一段改行されたあと、普通に表示されていますね。

では新しく追加したdiv要素のセットにフロートを設定しましょう。こちらの横幅は200px、高さは400pxとします。親要素の横幅は子要素2つ分の400pxに、ついでにまたもやp要素に適当に背景色を指定しつつデフォルトのマージンもゼロにします。

<div style="width: 400px;">
    <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。1</p>
    <p style="float: right; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。2</p>
    <p style="float: left; background-color: green; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。3</p>
    <p style="float: right; background-color: red; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。4</p>
</div>
<div style="width: 400px;">
    <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。5</p>
    <p style="float: left; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。6</p>
</div>

サンプルをみてみる。

これで今フロートされた子要素を持っている2つのdiv要素が上下に並んでいる状態ですね。

この2つのdiv要素をさらにフロートさせるので、この要素をさらにdiv要素で包みます。フロートされた要素は通常のレイアウトの流れから大きく外れてレンダリングされるため、div要素などで大きく包んでしまうのが一般的です。

フロートされた要素が存在する場合は何かしらの要素で包み、その中で全て完結させてしまうイメージですね。こういう場合は汎用性の高いdiv要素で包む事がほとんどです。こうすることで続く要素の意図しない回り込みなどのレイアウト崩れを回避することができます。

<div>
    <div style="width: 400px;">
        <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。1</p>
        <p style="float: right; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。2</p>
        <p style="float: left; background-color: green; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。3</p>
        <p style="float: right; background-color: red; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。4</p>
    </div>
    <div style="width: 400px;">
        <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。5</p>
        <p style="float: left; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。6</p>
    </div>
</div>

今の段階ではこのような表示になります。

サンプルをみてみる。

さて、では子要素のdiv要素に対してフロートを設定していきましょう。それぞれ『float: left』と『float: right』を指定します。

<div>
    <div style="float: left; width: 400px;">
        <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。1</p>
        <p style="float: right; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。2</p>
        <p style="float: left; background-color: green; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。3</p>
        <p style="float: right; background-color: red; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。4</p>
    </div>
    <div style="float: right; width: 400px;">
        <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。5</p>
        <p style="float: left; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。6</p>
    </div>
</div>

サンプルをみてみる。

はい、ここでちょっと注目して欲しい点があります。今フロートさせたdiv要素の高さに注目してください。今のサンプルで言うと大枠のdiv要素の直下にいるdiv要素ですね。開発ツールでチェックしてみてください。

いかがでしょうか。なんと、子要素の高さが親要素の高さに反映されています。

これは一体どういうことでしょうか。今フロートさせたdiv要素には『overflow』プロパティなんて指定していないし、ましてや『clearfix』も使用していません。

この秘密は親自身がフロートされている、というところにあります。親要素自身がフロートされていた場合、フロートされた子要素の高さを自身の高さに反映させることができます。

この理由は、前の記事で通常の要素のレイアウトを決める『ドキュメントフロー』というものがあるとかないとかいうお話をちょっとしましたね。そしてフロートされた要素はその通常の『ドキュメントフロー』から外れた特別なドキュメントフローとしてレイアウトされるという事でした。

さて、ここで今回の親要素に注目してみましょう。今回は親要素自身もフロートされていますね。ということはつまり親要素も子要素と同じくその特別なドキュメントフローとしてレンダリングされているということです。イメージとしてはフロートされた子要素と同じ世界にいる、というような感じですね。

こういった理由からしっかり子要素の高さが取得できていた、というわけです。

というわけで自身がフロートされているならばフロートされた子要素の高さを反映するための『overflow』プロパティを設定したり『clearfix』を実装する必要はありません。これも大切な事ですのでしっかり覚えておきましょう。あ、ちなみに書いちゃっても結果は同じなので大丈夫です、間違いではありませんので安心してくださいね。

では改めて進めていきますね。といってももうここまでくれば後は大枠のdiv要素に子要素の高さを反映させるだけで完成ですね。今の大枠のdiv要素はフロートされているわけではないので子要素の高さは取得できていません。では前回の記事で勉強した『clearfix』を使用して高さを反映させてあげましょう。ついでに見やすいようにまたもや背景色もつけてあげます。

<div style="background-color: silver;" class="clearfix">
    <div style="float: left; width: 400px;">
        <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。1</p>
        <p style="float: right; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。2</p>
        <p style="float: left; background-color: green; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。3</p>
        <p style="float: right; background-color: red; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。4</p>
    </div>
    <div style="float: right; width: 400px;">
        <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。5</p>
        <p style="float: left; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。6</p>
    </div>
</div>

サンプルをみてみる。

はい、これで完成ですね。お疲れ様でございました。

これがカラムレイアウト作成時の流れの一例になります。ちょっとむずかしかったと思いますが大丈夫でしょうか。

ちなみに最後の工程で大枠のdiv要素に高さを反映させましたが、もし反映させない場合は続く要素がこのようにレンダリングされます。

<div>
    <div style="float: left; width: 400px;">
        <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。1</p>
        <p style="float: right; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。2</p>
        <p style="float: left; background-color: green; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。3</p>
        <p style="float: right; background-color: red; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。4</p>
    </div>
    <div style="float: right; width: 400px;">
        <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。5</p>
        <p style="float: right; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。6</p>
    </div>
</div>

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

サンプルをみてみる。

追記したp要素がちょうど真ん中に回りこんでしまっていますね。こういう感じで続く要素のレイアウトに影響を与えてしまうのでフロートさせた場合はその包まれている要素の中で完結させることが大切です。もちろん意図して続く要素を回り込ませたい場合はあえて完結させない、という選択肢もオッケーです。

さて、ではちょっと『float』プロパティの値を変更してみましょう。

今のところ子要素であるp要素は交互に『float: left』と『float: right』をふっていますね。実はこれ『float: left』だけでも同じレイアウトになります。

ちょっと記述してみましたのでチェックしてみましょう。

<div style="background-color: silver;" class="clearfix">
    <div style="float: left; width: 400px;">
        <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。1</p>
        <p style="float: left; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。2</p>
        <p style="float: left; background-color: green; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。3</p>
        <p style="float: left; background-color: red; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。4</p>
    </div>
    <div style="float: right; width: 400px;">
        <p style="float: left; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。5</p>
        <p style="float: left; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。6</p>
    </div>
</div>

サンプルをみてみる。

どうでしょうか。全く同じレイアウトになっていますね。

この理由は『float: left』と指定した場合は親要素の空いたスペースに左寄せで収まり、『float: right』と指定した場合は親要素の空いたスペースに右寄せで収まるという挙動からです。空いたスペースに収まるという挙動は変わりません。

今回の場合は親要素の開いたスペースが子要素であるp要素と全く同じ200pxですね。ちょうど同じ大きさなので左も右も関係なく、ただ空いたスペースにストンと収まっているイメージです。

ちなみに全てのp要素を『float: right』とすると左右が逆転されてレンダリングされます。

<div style="background-color: silver;" class="clearfix">
    <div style="float: left; width: 400px;">
        <p style="float: right; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。1</p>
        <p style="float: right; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。2</p>
        <p style="float: right; background-color: green; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。3</p>
        <p style="float: right; background-color: red; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。4</p>
    </div>
    <div style="float: right; width: 400px;">
        <p style="float: right; background-color: yellow; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。5</p>
        <p style="float: right; background-color: aqua; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。6</p>
    </div>
</div>

サンプルをみてみる。

右寄せでレンダリングされるということは最初のp要素から順番に右へ詰まって配置されていく、という感覚ですね。少しトリッキーなデザインに使える手法なので一応覚えておいて下さい。

では先ほどの全て『float: left』と指定しても同じ結果になる、というところへ話を戻します。

ちょっと説明の邪魔なので設定した背景色は全て外します。今の段階ではこのようなソースです。

<div class="clearfix">
    <div style="float: left; width: 400px;">
        <p style="float: left; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。1</p>
        <p style="float: left; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。2</p>
        <p style="float: left; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。3</p>
        <p style="float: left; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。4</p>
    </div>
    <div style="float: right; width: 400px;">
        <p style="float: left; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。5</p>
        <p style="float: left; width: 200px; height: 200px; margin: 0;">ここはp要素だよ。6</p>
    </div>
</div>

サンプルをみてみる。

背景色を外してしまったのでちょいと分かりづらいですが先ほどと同じレイアウトになっています。

今はstyle属性に直書きでCSSを記述してしまっていますが、これを外部のCSSファイルを使って記述をまとめたいとしましょう。長々としたHTMLソースになってしまっていますもんね。

先ほどのように『float: left』と『float: right』が入り交じっている状態ではCSSでセレクタごとにプロパティを指定するのがちょっと大変です。ですが『float: left』として指定してあればp要素のCSSプロパティは全て統一することができます。

以下のような感じですね。

div > div > p {
    float: left;
    width: 200px;
    height: 200px;
    margin: 0;
}

こうすることで大分記述をスッキリさせることができます。さらにフロートさせているdiv要素にも共通の『width: 400px』というプロパティがありますのでこちらもまとめてしまいましょう。そうするとstyle属性に記述するのは『float』プロパティのみでいけますね。以下にサンプルを用意してみたので確認してみてください。

外部CSS

@charset "utf-8"; 

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
div > div {
    width: 400px;
}
div > div > p {
    float: left;
    width: 200px;
    height: 200px;
    margin: 0;
}

HTML

<div class="clearfix">
    <div style="float: left;">
        <p>ここはp要素だよ。1</p>
        <p>ここはp要素だよ。2</p>
        <p>ここはp要素だよ。3</p>
        <p>ここはp要素だよ。4</p>
    </div>
    <div style="float: right;">
        <p>ここはp要素だよ。5</p>
        <p>ここはp要素だよ。6</p>
    </div>
</div>

サンプルをみてみる。

先ほどと同じレイアウトになっていますね。大分HTMLソースがスッキリしました。こういった感じでCSSとHTMLをまとめられる場合が多いので共通項目でまとめられないかどうか少し探してみると良いです。これはウェブサイトを作成していくうちに慣れてくるかと思います。

以上でフロート関係の解説を終了します。

大分長くなってしまったのですがフロートの挙動や記述方法についてはいかがでしたでしょうか。慣れないと難しいところも多いかと思います。ただこれはCSSを記述するにあたっての必須事項となりますのでしっかりマスターしちゃいましょう。

次の記事からは『position』プロパティについて勉強していきます。こちらもちょっとクセがあるので慣れるまで大変かもしれませんが頑張ってください。

ではー。