CSSで要素を横並びにする方法

Webページを作成する際に、要素を横並びに配置したい場面は多くあります。例えば、ナビゲーションメニューや画像ギャラリー、商品一覧などが挙げられます。CSSを使用すると、要素を横並びに配置する方法はいくつかありますが、中でも **Flexbox** は、柔軟性が高く、直感的に操作できるため、非常に便利です。

Flexboxを使った横並び

Flexboxを使って要素を横並びにするのは非常に簡単です。手順は以下の通りです。

横並びにしたい要素をまとめた親要素に display: flex; を指定します。
必要に応じて、justify-content プロパティで要素の配置を調整します。

HTMLの例


  <div class="container">
    <div class="item">アイテム1</div>
    <div class="item">アイテム2</div>
    <div class="item">アイテム3</div>
  </div>

CSSの例


  .container {
    display: flex;
    justify-content: space-between; /* 要素間に均等なスペース */
  }

  .item {
    width: 100px; /* 各アイテムの幅 */
  }

上記の場合、.containerクラスが適用された要素内の.itemクラスが適用された要素が横並びに配置されます。justify-content: space-between; を指定することで、各アイテム間に均等なスペースが設けられます。

justify-contentプロパティ

justify-content プロパティを使うことで、横並びの配置を細かく調整することができます。主な値は以下の通りです。

値	説明
`flex-start`	要素を左詰めに配置します。
`flex-end`	要素を右詰めに配置します。
`center`	要素を中央揃えに配置します。
`space-between`	要素間に均等なスペースを設けます。
`space-around`	要素の前後に均等なスペースを設けます。
`space-evenly`	要素間、および要素の前後にも均等なスペースを設けます。

参考資料

よくある質問

Q1. Flexboxを使わずに要素を横並びにするにはどうすればよいですか？

A1. display: inline-block; を使用する方法や、floatプロパティを使用する方法などがあります。しかし、これらの方法はFlexboxと比べて柔軟性に欠けるため、複雑なレイアウトには不向きです。

Q2. 縦方向に要素を並べたい場合はどうすればよいですか？

A2. 親要素に flex-direction: column; を指定することで、要素を縦方向に並べることができます。

Q3. Flexboxは古いブラウザでは使えませんか？

A3. 非常に古いブラウザではFlexboxが正しく表示されない場合があります。その場合は、ベンダープレフィックスを使用したり、代替となるレイアウト方法を検討する必要があります。

```

その他の参考記事:css li 横並び均等