この前、cssのfloatを使う機会があって、、
floatって一昔前に使われてた古いCSSの？
今はflexboxとかgridがあるから使うことなくね？
そう思うよね。。
なんならコーダー歴まだ2年弱だから古いプロパティであるfloatはそもそも使ったことなかったんだけど
うん
この前、floatに助けられたんだよね
ということで、今回は「floatに救われた話」をまとめていこうと思います。
floatはいつ頃から使われなくなったのか
本題に入る前に、「いつ頃からfloatがあまり使われなくなったのか」を見てみます。
floatが使われること少なくなった要因として「flex」「grid」の存在が大きいです。
flexboxの存在
「CSSのfloatを使わずに、Flexboxを使用してwebサイトを作った話」というQiita記事は2016年10月に投稿されています。
「floatよりFlexboxを使おう！」みたいな機運は2016年頃からあったようです。
gridの存在
また、ここ数年で各種ブラウザが「grid」に対応し始め、ICS MEDIAさんは「CSS Grid Layout入門 対応ブラウザが出揃った新しいレイアウト仕様」という記事を2024年4月に公開しています。
学習段階でサラっとだけ触れられるfloat
2024年現在、全ての主要ブラウザが「flex」「grid」に対応しており、「float」を使う機会は以前と比べるとかなり減ったと思われます。
僕が職業訓練生だった頃、floatについては教科書でサラっと触れられたくらいでした。
▼教科書として使われていた書籍の新しい本
各種ブラウザはfloatに対応しているのか
主要ブラウザは2024年現在も「float」に対応しているようです。
開発終了となったInternet Explorerとノルウェーで開発されているニッチなブラウザだけが非対応。
floatに救われた
ここから本題です。
実際の業務で以下のようなレスポンシブ対応をしないといけない状況に遭いました。
スマホ画面幅のときは要素を縦配列にするだけでいいけど、パソコン画面幅のときは一部の要素だけ横に回り込ませたいというクライアントからの依頼。
floatを知らなかった僕は
「スマホ画面幅のとき」「パソコン画面幅のとき」それぞれでhtml書かないとcssで調節できなくね？
となっていたのですが、float全盛期にコーディングをしていた方から「floatでいけるよ」と教えてもらい、実際にcssでfloatを使ってレスポンシブさせるだけで実現できました。
▼当時の対応を再現してみた
float、実はまだ現役
floatは過去のcssプロパティだと思い込んでいたのですが、今回の件をキッカケにいろいろ調べてみることに。
すると、かつてのfloatの使い方について言及されている記事を見つけました。
floatの本来的な使い方は上記のような回り込みを実装させるCSSだったはずです。回り込み、つまり横並びのレイアウトができるが故に様々なレイアウトに出張して半ば強引に使われていたのです。(仲間にtable-cell)
無理矢理使っていたからclearfixを始めとする様々な小技を駆使してレイアウトしていたのが、前時代的コーディングではないでしょうか。
https://zarigani-design-office.com/blog/is_float_owacon/
floatは、flexやgridがなかった時代に「横並びのレイアウトができるが故に様々なレイアウトに出張して半ば強引に使われていた」と。
そして、強引に使うことで生まれた「前時代的コーディング」をやめようという動きが拡大解釈された結果、「floatはオワコン」という風潮が生まれたんじゃないか、と。
floatにかつての「横並びなら、俺に任せろ」的な栄光はなくなりましたが、終わったわけでなく、元に戻ったのです。
https://zarigani-design-office.com/blog/is_float_owacon/
しかし、実際は「floatはオワコン」ではなく、元々担っていた「回り込み」という役割をするプロパティに戻ったのです。
floatの使用頻度が下がったのはfloatがオワコンだからではない。「回り込み」という役割以外で使われなくなっただけで、今も本来の役割を全うするCSSプロパティとして生きている。
CSS界の”電子メール”
ビジネスにおける「電子メール」と同じではないでしょうか？
かつてビジネス現場ではメールがコミュニケーションツールの大黒柱として使われていました。しかし、チャットツールやプロジェクト管理ツールの登場によって、大黒柱と呼ぶほどの大役を担うことはなくなりました。
一時期は「メールを使うのは感度の低いビジネスマンだ」という風潮がありました。
では、メールを全く使わなくなったのかというとそうではありません。
現代でも、チャットツールなどでは通達できないような内容の連絡、正式な文書のやり取りなどで使われます。特定の場面で重宝されています。
CSSのfloatも同じで特定の場面で真価を発揮します。つまり、floatはCSS界の”電子メール”なのです。
floatはCSS界の”電子メール”である。