PR

floatはもう使わないのか?【CSS】

floatはオワコンなのか? HTML/CSS

この前、cssのfloatを使う機会があって、、

floatって一昔前に使われてた古いCSSの?
今はflexboxとかgridがあるから使うことなくね?

そう思うよね。。
なんならコーダー歴まだ2年弱だから古いプロパティであるfloatはそもそも使ったことなかったんだけど

うん

この前、floatに助けられたんだよね

ということで、今回は「floatに救われた話」をまとめていこうと思います。

floatはいつ頃から使われなくなったのか

本題に入る前に、「いつ頃からfloatがあまり使われなくなったのか」を見てみます。

floatが使われること少なくなった要因として「flex」「grid」の存在が大きいです。

flexboxの存在

「CSSのfloatを使わずに、Flexboxを使用してwebサイトを作った話」というQiita記事は2016年10月に投稿されています。

CSSのfloatを使わずに、Flexboxを使用してwebサイトを作った話 - Qiita
今回新規事業のサービス立ち上げに伴い、下記webサイトを作成しました。子供向けプログラミングスクール スタートプログラミングこのサイトにはfloatプロパティを一切使用していません。Flexb…

「floatよりFlexboxを使おう!」みたいな機運は2016年頃からあったようです。

gridの存在

また、ここ数年で各種ブラウザが「grid」に対応し始め、ICS MEDIAさんは「CSS Grid Layout入門 対応ブラウザが出揃った新しいレイアウト仕様」という記事を2024年4月に公開しています。

CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIA
CSSのGridLayoutとは、ウェブサイトのレイアウトを構築するための仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。

学習段階でサラっとだけ触れられるfloat

2024年現在、全ての主要ブラウザが「flex」「grid」に対応しており、「float」を使う機会は以前と比べるとかなり減ったと思われます。

僕が職業訓練生だった頃、floatについては教科書でサラっと触れられたくらいでした。

▼教科書として使われていた書籍の新しい本

各種ブラウザはfloatに対応しているのか

主要ブラウザは2024年現在も「float」に対応しているようです。

"float" | Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile w...

開発終了となった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界の”電子メール”である。

タイトルとURLをコピーしました