レンタルオフィス「METSオフィス」運営責任者のオバタです。

今回は、TechDrill「HTML/CSS」実践記事4回めということで「中級編:clearfixについて、きちんと説明できますか?」に挑戦していきます。ホームページをカスタマイズしたいけどどこを触ったら良いかわからない、といったお悩みを持つ起業家の方にオススメのコンテンツです。

■過去のTechDrill実践記事はこちら
⇒ 第1回目「指示書通りに実装してみよう!」
⇒ 第2回目「擬似クラスを用いてテーブル要素のセルを自由に装飾してみよう」
⇒ 第3回目「初級編:clearfixを書いてみよう」

TechDrillの登録方法については第1回目の実践レビューをご確認ください。
それではさっそく始めていきます。

目次

「clearfix」の仕組みをより深く理解しよう(おさらい)

float説明

上図は、「float」で左右に浮かせた要素の真下に次の要素(黒い部分)を配置しようとして失敗してしまった例です。このようなレイアウトにならないために用いる手法のひとつに「clearfix」というものがあります。

clearfixを挿入した状態

左右に浮いている要素2つの真下に黒い要素が配置されるように「clearfix」を使ったのが上図の例です。「clearfix」のおかげで「float」で浮いている左右2つの要素に黒い要素が潜り込まず、真下に配置されるようになっています。

「clearfix」は「float」の回り込みや潜り込みを解除するためによく使われるCSSのクラスで、以下のような代表的なテンプレをスタイルシートに記述して使います。


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

とりあえずこのコードをCSSに書いておけば「float」による回り込みや潜り込みを簡単に解除できるので、深く考えずに適当に使っている方は多いと思います。

今回は「clearfix」によく使われるこれらのコードについての理解を深めるための問題に解説を交えながら解答していきます。(説明せよ、的な問題ばかりなので、少し冗長になりますがしっかりと説明しながら進めていきます。)

問1…「:after」と「content: "";」の関係について説明せよ、を解く

「:after」が疑似要素であることは広く知られていると思いますが、「clearfix」に使う上で「content: "";」が必須である理由を知らない方がいるかもしれませんので詳しい説明を入れつつ解答していきます。

「:after」は、CSSでクラス名とセットで使うセレクタ(スタイルを適用する対象を指定するコード)です。「clearfix」というクラスに用いる場合は「.clearfix:after」という形で使用します。

「:after」を指定したhtml内の子要素の最後尾には、疑似要素が生成されます。

この疑似要素というのは文字どおり擬似的な要素で、内容物を指定しなければhtml中の要素として成立しないという仕組みになっていて、目に見える形では存在せず、htmlに反映させるなら一手間加える必要があるというちょっとだけややこしいものです。

(「clearfix」に用いる場合、「:after」を使って「float」を解除するための疑似要素を作っても、それがhtmlにおいて要素であることを定義しなければhtml上の見た目は特に変わらず、「float」を解除することはできないということです。)

この疑似要素をhtmlの中で意味のある要素として定義するために必要なのが「content: "";」です。

「content: "";」を使うと、要素の中身の文字列を指定することができます。ダブルクオーテーションで囲んだ部分がhtmlに出力されるので、ここに敢えて何も書かないことでhtmlにおいて空の要素であると認識させることができるのです。

「:after」を使って「float」を解除するためには、疑似要素を「中身はないけどhtml的には要素」という状態にする必要があり、それを実現するのが「content: "";」であるというわけです。これが「:after と content: ""; の関係」の解答となります。「clearfix」には必須の組み合わせということですね。

clearfixを挿入した状態

上図は「content: "";」のダブルクオーテーションの中にテキストを入れて疑似要素が生成された位置を証明したものです。目に見える形で疑似要素を認識したい場合は同じように確認してみると良いでしょう。

問2…「clear: both;」について説明せよ、を解く

「clear: both;」はその仕様について誤解されている方もいらっしゃるかと思いますので、そのあたりの説明も含めて解答してみます。

「clear: both;」は要素の「margin-top(要素の上のスペース)」を自動調整して増加させているだけで、直接「float」を解除するような仕様ではありません。ここを誤認していると間違った使い方をしてしまう恐れがあるので要注意です。

「:after」と組み合わせて「clear: both;」を使うと、疑似要素の上marginが自動調整されることにより要素の回り込みや潜り込みが(見た目では)解除されたように見えます。どれだけレイアウトが大きく変わったとしても、疑似要素の上marginが自動調整された結果表示が切り替わっただけです。「float」が「clear: both;」によって直接解除された、という誤認をしてはいけません。

「clear: both;」が回り込みを直接解除していると誤認している方がよくハマりがちなミスとして、要素の上marginが無効になっている部分に「clear: both;」を指定してしまい「float」の回り込みや潜り込みを解除できないというものがあります。

このミスへの対策については、次の問いに対する解答で説明します。

問3…「display: block;」が必要な理由を説明せよ、を解く

「:after」によって生成された疑似要素は「インライン要素」であり、行の一部として扱われます。インライン要素の大きな特徴として、marginは左右のみ有効(上下marginは効かない)というものがあります。

上下のmarginが無効な状態だと、問2で説明した「clear: both;」による上marginの自動調整も行われません。つまり、「clearfix」のために「clear: both;」を使うのであれば疑似要素の「インライン要素」という仕様に対し何らかの対策をしないと「float」による回り込みや潜り込みの解除ができないということになります。

このような問題を解決するために使うのが「display: block;」です。

「display: block;」を使うと、インライン要素であっても上下のmarginをとることができるようになります。問2で説明した「clear: both;」の上margin自動調整を活かすためには絶対に必要だということですね。

全3問を終えて

答え合わせはもちろんバッチリでした。(答えは短文でアッサリしてましたが…汗)
「clearfix」は仕組みがわかると、特に既存レイアウトをカスタマイズする時にとても役に立ちます。ホームページ作成サービス等で作ったサイトを自分でカスタマイズする機会がある起業家の方はしっかり頭の片隅に知識を入れておいてくださいね。

まとめ

「clearfix」はお約束のテンプレコードがあるので特に知識がなくても使えてしまうのですが、仕組みがわかればより幅広い制作やカスタマイズが可能になります。全てのプロパティと値には意味があるということを知っておくだけで、floatの解除以外にも色々と応用が効く場面が出てくるかと思います。

「float」がなくても実装できるレイアウトも増えてきてはいますが、まだまだ現役で使われているプロパティですので学んでおいて損はありません。「clearfix」関連のカスタマイズをする際には、ぜひ当記事を参考にしてみてくださいね。