TechDrillの「HTML/CSS」実践レビュー３「初級編：clearfixを書いてみよう」攻略

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

今回は、TechDrill「HTML/CSS」実践記事３回「初級編：clearfixを書いてみよう。」に挑戦していきます。

「float」の回り込み解除に頻繁に用いられる「clear: both;」に関する理解を深められるノウハウとなります。ホームページをカスタマイズしたいけどどこを触ったら良いかわからない、といったお悩みを持つ起業家の方にオススメのコンテンツです。

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

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

「clearfix」とは

「clearfix」というのは、CSSで「float」を指定した要素が潜り込んでしまうのを解消するために必要なCSSプロパティです。

html上で要素を順番に並べても「float」を使ったあとに「clearfix」を指定しないと、以下の図のようになってしまいます。

上図は、htmlでは青と緑の要素の次に黒とオレンジの要素が順番に並んでいます。
ですが、青と緑の要素には「float」が指定されており、「clearfix」を使っていないので浮いた要素の下に次の要素が潜り込む形になってしまっています。

このような状態にならないようにするために、「float」の後には必ず「clearfix」を指定するのが基本となります。

事前準備

課題には「clearfix」を指定していないhtmlと、「clearfix」についてのコードが記載されていないCSSが用意されています。問題に応じて下記のファイルをカスタマイズして解いていく形になります。

用意したhtmlファイル（sample.html）


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>float問題</title>
  <link rel="stylesheet" href="style.css">
</head>
  <body>
    <div class="contents">
      <div class="float_left"></div>
      <div class="float_right"></div>
      <div class="bottom_content"></div>
      #この要素が潜り込んでいる
    </div>
  </body>
</html>

用意したCSSファイル（style.css）


.contents {
  height: 1000px;
  background-color: orange;
  border: 1px solid black;
}

.float_left {
  float: left;
  background-color: blue;
  height: 300px;
  width: 500px;
}

.float_right {
  float: right;
  background-color: green;
  height: 200px;
  width: 500px;
}

.bottom_content {
  background-color: black;
  width: 100%;
  height: 150px;
  color: #FFF;
}

問題１：以下のcssを完成させてstyle.cssに追記してください


.clearfix:after {
  content:   ###
  clear:   ###
  display:   ###
}

課題で用意されたCSSには「float」を解除するコードが記載されていないため、「clearfix」をするためのコードに書き換えてCSSに追記します。

CSSファイルに追記したコード


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

この記述は「float」を解除するためのコードとしてお決まりのテンプレです。難しい説明はよくわからないという方は、ひとまずこういう型だと覚えておいてください。

■「clearfix」の仕組み
擬似要素の「:after」と「contentプロパティ」を使い、「:after」によって生成された要素内の末尾に新しいインラインの要素をつくり、「clear: both;」と「display: block;」で「float」を解除します。

問題２：「問題１」で完成させたクラス”clearfix”をつけたdivタグを、sample.htmlの適切な位置に挿入し、bottom_contentが潜り込まないようにしてください。

冒頭で用意したsample.htmlに、「float」を解除するためのdivタグを挿入します。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>float問題</title>
  <link rel="stylesheet" href="style.css">
</head>
  <body>
    <div class="contents">

      <div class="clearfix">
      <div class="float_left"></div>
      <div class="float_right"></div>
      </div>

      <div class="bottom_content"></div>
      #この要素が潜り込んでいる
    </div>
  </body>
</html>

htmlファイルに追記したコード

CSSには「.clearfix:after」という記述をしたので、divタグのクラスは「clearfix」とします。

「bottom_content」が潜り込まないようにするためには、floatしている要素の直後に「clearfix」を指定すればOKです。

左に浮いている青い要素（float_left）と右に浮いている緑の要素（float_right）を囲む形でクラス「clearfix」を付与したdivタグを設置することで、bottom_content（黒い要素）の手前で「float」が解除されてその後に続く要素を潜り込ませずに表示することができます。

完成

当レビューで作ったファイルは下記リンクからご確認いただけます。

⇒　https://mets-office.com/td/p003/sample.html（新しいタブで開きます）

まとめ

「float」解除は、ホームページ作成サービスなどで作ったサイトをカスタマイズする際につまづきやすい箇所のひとつだと思います。

昨今ではブロック要素をきれいに配置するためにより使い勝手の良いCSSプロパティも出てきていますが、ホームページ作成ノウハウのない起業家が触るようなテンプレートファイルのデータにはまだまだ「float」と「clearfix」が使われているはずです。

サイト内のブロック要素をカスタマイズしたい時、新しくページ内にブロック要素を追加したい時などにはぜひ参考にしてみてくださいね。

カテゴリー: HTML/CSSカスタマイズ実践レビュー

タグ: CSS HTML