【CSS】なぜfloatは駆逐されたのか　横並びレイアウトを比較解説 / 開発者向けブログ・イベント

こんにちは。GMOインターネットグループ株式会社新卒1年目の山名です。
今回は、Webページにおける横並びの実装方法を調査、比較しましたのでご紹介します！

執筆の背景

皆さんはWebページで要素を横並びにしたいなーって時、どんな方法で実装していますか？

Webコーディングをする上で必須とも言える横並びレイアウトですが、その歴史は深くWebの技術やHTML,CSSがアップデートされる度にさまざまな実装方法が生まれてきました。
私自身、複数ある実装方法の中でどれを使うか迷ってしまうという状況によく直面します…

今回は、そんな「何を使えばいいんだろう」という悩みを解決するとともに、数年前まで横並びの最前線で使用されていたfloatが現在では使われなくなってしまった理由を明らかにしていこうと思います！

なぜfloatは駆逐されたのか

早速ですが、floatを使った横並びはなぜ駆逐されていったのか…その理由を考えてみます。

このブロックには、想定されていないか無効なコンテンツが含まれています。ブロックのリカバリーを試行

一言で言えば

「flexが便利すぎて戻れない！！」

floatで作るレイアウトの自由度が低かったり、実装に手間がかかるという理由もあるにはあると思いますが、何よりもflexレイアウトが便利すぎるんです。

というのも、昨今の横並びレイアウトで主に使われているflexレイアウトは複雑な配置でも柔軟に対応できるというで、floatで出来ることのほとんどはflexに取って代わられてしまいました。

また、機能面の改善だけでなく
「 flex って書けば、初期値でだいたい望む配置にできてしまう」
「クリエイターが言葉で表現しにくい細かい部分も勝手に調整してくれる」
「何より実装が簡単で戻れない」
といった、実装するコーダー本人の体験が改善されていったことも大きな理由です。

他にもgridレイアウトを使った横並びでもできることが多く、結局floatを使わなくてももっと簡単に便利に実装できるようになってしまったことで、現在ではほとんど出番がなくなっています。

横並びレイアウトとは

横並びレイアウトとは、文字通りWebページの要素を横並びで配置することです。

<span>タグや<a>タグのようなインライン要素と呼ばれるものを除き、Webページでは基本的に要素の後に自動的に改行が入るため縦方向に要素が連なっていきます。

それらの要素を横並びに設定し直すことで、ページが長くなりすぎることを防ぎ、ページ全体の可読性を向上させる効果があります。

実際には、グローバルナビゲーションやサイドバーとメインコンテンツの配置等に主に用いられている横並びレイアウトですが、その実装方法は複数存在しているため以降ではいくつかの実装方法とその特徴をそれぞれ説明していきます！

横並びレイアウトを比較解説

今回は、「float」「flex」「grid」の3つの実装方法で以下のデザインを作成し、それぞれの特徴を比較していきます。
※サンプルコードにCSSの共通部は記載していません。

「float」の特徴と実装方法

floatは、CSS3が普及するより以前に横並びを実装するために一般的に使用されていたCSSプロパティです。

本来floatは文章の中に画像を差し込んだり、要素の周りに文章を回り込ませることが目的のプロパティですが、その要素が回り込むという性質を利用することで横並びレイアウトを実装しています。

メリット

「flex」「grid」を使った実装と比べ、古いブラウザまで対応できる
→ float以外の新しい技術に関してもブラウザ対応が進んでいることもあり、横並びでfloatを使用するメリットはかなり少なくなっています。

デメリット

配置の自由度は高くない
予期せぬ回り込み等でデザインが崩れることが多い

使用する際は、横並びにしたい対象に対して「float:left（またはright）」を指定することでその要素を横並びにすることができます。

.box{
	float: left;
}
.clearfix::after {
	display: block;
	clear: both;
	content: "";
}

<h1>「float」を使った横並びの実装</h1>
<div class="clearfix">
	<div class="box box1"></div>
	<div class="box box2"></div>
	<div class="box box3"></div>
</div>
<p>サンプルテキスト</p>

floatを使って横並びにした場合、それ以降の要素に回り込みが設定され続けてしまうため、その都度回り込みを解除する記述が必要になります。

上記のコードでは「clearfix」を使用した手法で解除しており、親要素の疑似クラスに解除用のスタイルを適用することで以降の要素を縦並びに戻しています。

他にもclearプロパティを使った方法やoverflowを使った方法があり、それぞれ記述量が少ないため用途やデザインによって使い分けるのが良さそうです！

「flex」の特徴と実装方法

flexは、CSS3から追加された縦横配置のレイアウトを簡単に実現できるプロパティです。

現在は極端に古いブラウザを除きほとんどのブラウザで対応している点と、レイアウトが柔軟でなんでも作れてしまうという特徴も相まって、flexレイアウトは横並びのスタンダードになっていると言っても過言ではありません。

メリット

要素の縦横並びの変更だけでなく表示の順番や要素間の幅、高さなどさまざまな値が柔軟に調整できる
実装が比較的少ないコード量でできる

デメリット

入れ子構造が複雑になりがち

基本的な実装方法は簡単で、配置を変えたい要素の親要素に「display:flex」を設定することで子要素にflexレイアウトが自動で適用されるようになります。

.boxflex{
	display: flex;
}

<h1>「flex」を使った横並びの実装</h1>
<div class="boxflex">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</div>
<p>サンプルテキスト</p>

今回は使用していませんが、flexレイアウトには多くのプロパティが用意されており、使いこなすのは難しいですが様々な組み合わせによってより複雑なレイアウトや状況に応じたレスポンシブ対応の実現が可能になっています。

特に、折り返しのスタイルを指定する flex-wrap やレスポンシブ対応等で配置の方向を変更したい時に使用する flex-direction は使用する場面も多く便利なプロパティなため、ぜひ覚えて使ってみてください！

「grid」の特徴と実装方法

gridは、格子状のマス目のグリッドに要素を配置し、順番を変えたり結合することで様々なレイアウトが実現できるプロパティです。

実際にgridレイアウトを使用する場合は、あらかじめ格子のレイアウト決めておき、そこに要素を割り当てていく方法が基本になります。

メリット

縦横の配置に対して比較的自由にレイアウトできる

デメリット

要素の増減に対しては柔軟に対応しづらい
古いブラウザだとまだ対応していないこともある
→ 使用する際には事前に対応しているブラウザの確認が必要

実装方法はflexレイアウトと同様で、配置を変えたい要素の親要素に「display:grid」を指定することで子要素の配置を変更できるようになります。
今回の場合は、幅100pxの四角形を横に3つ並べるため「grid-template-columns」でマス目の幅を100pxで3つ並ぶように設定しています。

.boxgrid{
	display: grid;
	grid-template-columns: 100px 100px 100px;
}

<h1>「grid」を使った横並びの実装</h1>
<div class="boxgrid">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</div>
<p>サンプルテキスト</p>

gridレイアウトは、そもそもfloatやflexで作るレイアウトとは配置を指定する方法も違っているため、最初は難しく感じることもありますが、覚えてしまえば二次元的に自由な配置ができるためとても頼もしい存在です！

また、使用すると要素（グリッド）間の幅を細かく調整することができる gap というプロパティがあるのですが、これはflexレイアウトにはないプロパティのため、使えるのはgridレイアウトのみになります。

まとめ

Webページにおいて横並びは一般的なレイアウト手法ではありますが、その実装方法はCSSの発展と共に変化しています。
しかし、今は使われなくなっている技術も確実にCSSの一時代を支えていたと思うと、今からでも知識として持っておくことに損はないと思います。
また、現在でもテキストの回り込みにはfloatを使うのが便利であり、これが本来の使い道だということを考えると、適材適所に戻ったとも言えるのではないでしょうか。

これを機に、横並びレイアウトの変化だけでなくCSSの全体の歴史にも興味を持っていこうと思います！