clearfixは過去に作ったサイトでまだ十分に機能している。|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

clearfixは過去に作ったサイトでまだ十分に機能している。

htmlとcssによるカラムレイアウト。

clearfixは過去に作ったサイトでまだ十分に機能している。

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が多用されていた。当時の彼の会社はとても多忙だったと思うので、たぶん授業で習った時の手法でコーディングをしたのだろう。

cssによるレイアウト


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

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

レスポンシブ対応。


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

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

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

できた!


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。