【CSS】Flexboxを使わないで横並びデザインを実装する方法

ウェブデザインにおいて、要素を横に並べることは非常に一般的です。一般的な手法としてFlexboxがありますが、古いブラウザに対応させたいときなどそれ以外の手法が必要な場合もあります。この記事では、Flexboxを使用せずに横並びデザインを実現するためのいくつかの代替手段を紹介します。

Floatを駆使した横並び

<style>
  .container {
    overflow: hidden; /* clearfix hack を使用して親要素をクリアする */
  }

  .box {
    width: 50%;
    box-sizing: border-box;
    float: left;
  }
</style>

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</div>

Floatプロパティを使用することで、要素を左寄せに配置することができます。

Inline-blockでの横並び

<style>
  .box {
    width: 48%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
  }
</style>

<div class="box">Box 1</div>
<div class="box">Box 2</div>

display: inline-blockを使用することで、要素をインラインに配置し、横に並べることができます。

Display: Tableを用いた手法

<style>
  .container {
    display: table;
    width: 100%;
  }

  .box {
    display: table-cell;
    width: 50%;
    box-sizing: border-box;
  }
</style>

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</div>

display: tableおよびdisplay: table-cellを使用することで、要素を表のセルのように配置することができます。

まとめ

これらの手法は、Flexboxが利用できない環境や要件に対応する際に便利です。しかし、一般的にはFlexboxやGridなどのモダンなレイアウト手法が推奨されます。

以前はIE（Internet Explorer）に対応させるために、Flexboxは使わずにこれらの方法で横並びデザインを実装することが多かったのですが、IEのサポートが終了した今では素直にFlexboxを使用するケースが増えました。

柔軟性とメンテナンス性を重視し、プロジェクトに最適な手法を選択しましょう。