floatが消える日

Web黎明期、Webサイトのレイアウトはtableで行われていました。そしてHTMLとCSSの記述を分離して行うようになったWeb2.0と呼ばれる時代に、レイアウトの主役にのし上がったのがfloatです。

そしてWeb2.0以降Webサイトのレイアウトに欠かせなかったfloatも時代の変化とともに主役の座を追われようとしています。

サポートブラウザの変化

MicrosoftやGoogle等の名だたる企業が、古いインタネットエクスプローラ（以下IE）や古いWindowsのサポートをセキュリティ観点から終了しました。古いブラウザやOSではセキュアな環境の提供が難しくなってきたからです。

これを受けてWeb制作側も、古いIEの打ち切りが今までよりも進み、Webコーディングの幅は広がりを見せつつあります。

なぜIEの対応を打ち切るとコーディングの幅がひろがるのか？

IEは他のモダンブラウザがサポートしている機能を正しく実装しておらず、スタイルシートだけでは他のブラウザと同じような見せ方ができませんでした。

IEで他のブラウザと同じ見栄えを再現するためには、別途javaScriptライブラリを用意する等、特別な対応が必要で、一手間も二手間もかかるため、フレキシブルな対応は困難でした。

シェアNo1からの陥落

それでもIEに対応する必要があったのはIEのシェアがNo1だったからです。機能的に不十分なブラウザであってもIEの存在は軽視できませんでした。

インターネット利用環境の変化

しかし、そのIEも徐々にChromeを筆頭とする他のブラウザにシェアを奪われ、現在ではマイナーバージョンのIEは切り捨てていいほどに普及率を落としました。

このことにはインターネットの利用環境が、PCからスマホにシフトしていることも関係しております。

それでもIE系はやっぱりIE系

古いIEへの対応がなくなったとは言え、現在最新のIE11やIEの後継ブラウザEdgeへの対応がなくなったわけではありません。

そして残念なことにIE11やEdgeもこれまでのIE系と同じく他のモダンブラウザがサポートしている全ての機能をサポートしているわけではありません。

新しいCSS3のプロパティを実装する時はIEやEdgeへの注意は怠ってはならず、パフォーマンスを優先する場合は、対応方法も検討の必要があります。

Flexboxの台頭

前置きが長くなりましたが、古いIEへの対応がなくなり、フレキシブルにWebサイトのレイアウトが再現できるdisplay: flexがWebサイトのレイアウトの主役になりつつあります。

FlexboxはIE11やEdgeにも対応しておりますので、「対応ブラウザネックで使えない」なんてことも減ってきました。

floatを使わずコーディングするなんてWeb2.0時代からすると考えられないことです。事実2017年6月1日に行った当サイトのリニューアルでは、新たに書き足したCSSプロパティにfloatは使われておりません。

忘れてはいけないクリアフィックス

floatが消えるとクリアフィックスを行う必要もなくなります。Webコーディングと長い付き合いの私からするとなんだか感慨深いものがあります。

用途と別の方向で発展した技術

現在のWebサイトを取り巻く技術は本来とは別の用途で発展した技術です。そのため、痒いところに手が届かず、代用のもので発展してきました。レイアウトにtableやfloatが使われていたのはその最たるものだと個人的には考えます。

今後は用途に応じた適切な機能が実装されていくであろうと推察されます。Web業界は最新を追い求めても次々に新しいことが実装されますので、やっと時代に取り残されないレベルです。本当に動きの早い業界だなぁ〜と実感しながらこの記事を綴っております。