【HTML/CSS】要素を両端に配置するには

ヘッダーにアイコンなどを並べる際に、2つのコンテナ要素を左右両端に寄せて配置したいケースがあると思います。今回は2つの要素を左右両端に配置するテクニック、floatとflexboxという2つの方法について解説していきます。それぞれ具体例を見ていきましょう。

floatで両端に配置

1つ目の例では左に配置したいコンテナ要素に「float: left;」を、右に配置したいコンテナ要素に「float: right;」を設定します。

この様にfloatプロパティは本来縦に並ぶ要素を横並びにすることが出来るプロパティです。ここで補足ですが、floatプロパティを使うと、そのあとに続く要素もそれに従い回り込むようになります。ですので、floatによる回り込みをかけた後は、必ずそれを解除する必要があります。

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

floatの解除には「clear: both;」を使用しますが、ここでは「clearfix」というテクニックを使ってfloatを解除しています。使い方は簡単で、clearfixをCSSに定義したらfloatをかけた親要素にclearfixを設定するだけです。

flexboxで両端に配置

2つ目の例では、flexboxというテクニックを使います。flexboxとは「Flexible Box Layout Module」のことで、フレキシブルで簡単にレイアウトが組めるテクニックです。こちらの方がスマートで便利かもしれませんね。

重要なところだけをピックアップすると次のようになります。

header {
  display: flex;
  justify-content: space-between;
}

たった2つのプロパティを設定するだけで済みますね。

おわりに

2つの具体例を見ていきましたが、いかがでしたでしょうか。後者に紹介したflexboxは最近流行りのテクニックなので、今後のWeb制作のスタンダードになるでしょう。