clearfixとfloatプロパティは、かつてレイアウトを作るのに活用されていた。

10年ほど前まで、ブラウザが用意しているstyle設定をリセットする「reset.css」や、その後に普及した「normalize.css」などには、必ずといいほど「clearfix」というものが設定されていた。

例えば、次のように。

.clearFloat{
   clear: both;
}

.clearfix:before,
.clearfix:after{
  content:"";
  display: table;
}

.clearfix:after{
  clear:both;
}

.clearfix{
  *zoom:1;
}

floatさせる親ボックスに「overflow: hidden;」を指定する方法もあったが、「clearfix」の方が良く使われていたと思う。

floatレイアウトから、flexレイアウトやgridレイアウトの時代へ。

clearfixを使用した「floatレイアウト」は、ブラウザのバグや仕様を利用した裏技的、ハック的な手法だが、それ以前の「tableレイアウト」よりは、はるかに使い勝手が良かった。

CSS3の登場により、「flexレイアウト」や「gridレイアウト」を利用できるようになり、現在はこちらの方が便利で主流となっている。

なので、新規案件で「clearfix」を使う局面はかなり限定されているか、むしろ全く使われていないかもしれない。

clearfixとfloatレイアウトで作った過去のサイトは大丈夫なのだろうか？

最近、ある業種の仕事の新規サイト制作案件のお話があり、前準備をしている時に自分や自分が講師をしていた際の生徒さんが就職先で制作した同業種のサイトを思い出し、コードのチェックをしてみた。かつての生徒さんが制作したのはおそらく2013年-2014年頃であり、当時はflexレイアウトはまだ普及が始まりつつある局面だった。ベンダープレフィックスも必要だった。

生徒さんのサイトのデザイン面は全く問題なかったが、ソースコードを確認すると、clearfixが多用されていた。当時の彼の会社はとても多忙だったと思うので、たぶん授業で習った時の手法でコーディングをしたのだろう。

clearfixを確認したところ、floatレイアウトによるレイアウト崩れはなかった。

ぱっと見だが、PCにおいても、スマホにおいても、レイアウトには問題がなかった。今回はWindowsは確認していないが、当時の彼の制作環境はおそらくWindowsがメインで、かつMacも持ち合わせていたので、Windowsも当然問題ないだろう。スマホも同様に。

しっかりやったよ、ということの一つの証明。

コーディングはクライアント様には目に見えない部分なので、正直手抜きすることもできる。ただ、それをやってはプロとは言えないし、誠実とも言えない。

できればこういうところを、ディレクターや営業担当の方などに評価されると、現場のクリエイターのメンタル面の不調や離職率も改善されると思う。願いを込めつつ。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。