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

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

続きまして『clearfix』というものを勉強しましょう。『clearfix』は『くりあふぃっくす』と読みます。

『clearfix』とはオーストラリア人のウェブ開発者であるTony Aslett氏が2004年ごろに公開したハック技術の一種で、その技術に『clearfix』という名前が付けられている感じです。CSSプロパティの名前などではないのでご注意ください。

さて、この『clearfix』というものを使うと『overflow: hidden』と同じようにフロートされた子要素の高さを親要素の高さに反映することができます。

しかも『overflow』プロパティで実装した時と違い、はみ出した部分の表示に関して何も影響を与えない形で実装できるので非常に便利です。

というわけで使い方をみてみましょう。

まず『clearfix』はCSSに以下のように『clearfix』という名前でクラスセレクタを記述します。ちょっと難しいプロパティをいっぱい使っているのでコピペしてしまって問題ないです。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

そしたら『overflow: hidden』の時と同じように親要素に対してクラス属性に『clearfix』と値を記述します。こんな感じになりますね。

<div style="background-color: silver;" class="clearfix">
    <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>

これをレンダリングさせてみるとあら不思議。

サンプルをみてみる。

はい、ちゃんと親要素の高さにフロートされた子要素の高さが反映されています。灰色の部分がしっかり子要素の高さと同じ位置まできていますね。

使い方はそんなに難しくないかと思います。

さて、ちょっと気になったと思いますが、なぜたったこれだけでフロートされた子要素の高さが取得できているのでしょうか。その謎を解いていきましょう。

この『clearfix』とは『after擬似要素』(あふたーぎじようそ)というものを使っています。

この中級編では細かい説明は割愛しますが、after擬似要素を設定するとその要素の子要素の最後に、CSS側から要素を追加することができます。

言葉で説明するとイメージするのが難しいので、ちょっと適当にイメージ図を書いてみますね。こんな感じです。

.test:after {
    content: "ここがafter擬似要素だよ";
    display: block;
}

<div class="test">
    <p>ここはp要素だよ</p>
    <after擬似要素>ここがafter擬似要素だよ</after擬似要素> <!-- ←これが追加されます -->
</div>

testというクラス名が付いた要素の子要素のお尻にブロック要素が追加されるようなイメージですね。あまりよい記述例になっていないかもしれませんがイメージは付きましたでしょうか。

さて、このafter擬似要素の生成される位置は子要素のお尻になります。ここに『clear: both』を指定するとどうでしょうか。

.test:after {
    content: "ここがafter擬似要素だよ。clear: both;を設定しているよ";
    display: block;
    clear: both;
}

<div class="test">
    <p>ここはp要素だよ</p>
    <after擬似要素>ここがafter擬似要素だよ。clear: both;を設定しているよ</after擬似要素> <!-- ←これが追加されます -->
</div>

ピン！と来た方がいらっしゃるかと思いますが、最初に解説した『clear: both』を指定した空の要素を用意してフロートを解除する手法と全く同じ構成になっています。再度載せますね。

<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>』という部分がafter擬似要素に置き換わった感じです。とっても素敵なアイディアですね。これが『clearfix』の裏側の処理になります。

この『clearfix』のafter擬似要素を生成してフロートを解除する、というTony Aslett氏の発想は当時、非常に画期的で一気に世界中に広まりました。

ちなみにTony Aslett氏のオリジナルの『clearfix』はこのような記述になっています。

.floatcontainer:after{
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
    visibility:hidden;
    }
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height: 1%;}
.floatcontainer{display:block;}
/* End Hack */

ちょっと記述が長めなのは当時まだシェアのあったNetscapeというブラウザやInternet Explorerに対するバグ対策を考えているためです。

先ほどの解説で使用した『clearfix』の記述は私がちょろりと書いたもので、昨今の最新ブラウザで動かせる最低限の記述だけを書いたものになります。こちらですね。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

これは古いInternet Explorerなどの対策を全く考えていませんのでこのまま使用するには少々弊害があり、他の『clearfix』を使ったほうが無難です。

世界中の開発者の皆さんが自作の『clearfix』を公開していたりするので『clearfix』とgoogle先生に聞いてみれば自分の目的にあった『clearfix』が見つかると思います。それを使用させてもらうのがベストです。ちなみにプログラムソースには著作権があったりすることがありますので使うときは注意してください。あと開発して公開してくれた方々への謝意も忘れないようにしてくださいね。

最後に昨今のCSSソースでよく拝見するNicolas Gallagher氏が開発した『clearfix』を紹介します。『Micro Clearfix』と名前が付けられているようです。

古いIE対策も考えているのでとっても使い勝手が良いです。あ、クラス名が『clearfix』ではなく、『cf』となっているので間違いないようにしてくださいね。

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Nicolas Gallagher氏のウェブサイト
http://nicolasgallagher.com/micro-clearfix-hack/

というわけで『clearfix』の解説は以上となります。概念まで考えるとちょっと難しいかもしれませんが使い方はとっても簡単なのでぜひ使ってみてください。

さて、フロートされた要素の回り込みに関する解説は以上で完了です。

次の記事からはフロートを使った『カラムレイアウト』のパターンについて勉強していきましょう。

しばらく難しい記事が続いているので大変かと思いますが頑張ってくださいね。

ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア