どっちを使う？CSSで横並びのコンテンツ（Float or Flex）

2023.01.12 デザイン

ブログ

CSS

01｜自己紹介
02｜問題
03｜float: left; をつかう
04｜ display: flex; をつかう
05｜最後に

1. 自己紹介

はじめまして！片岡と申します。

4月に新卒エンジニアとして入社しました。今回が初投稿となりますが、よろしくお願いします。

それでは、本日はHTML/CSSを使ったデザインについて書いていきたいと思います。

2. 問題

早速ですが皆さん、下記のコンテンツを「横並び」にしたい場合、どのようにCSSを書きますか？


<h2>どっちを使う？ CSSで横並びのコンテンツ（Float or Flex）</h2>
<div class="contents">
   <div class="item">
      <p>1つめのアイテム</p>
   </div>
   <div class="item">
      <p>2つめのアイテム</p>
   </div>
   <div class="item">
      <p>3つめのアイテム</p>
   </div>
   <div class="item">
      <p>4つめのアイテム</p>
   </div>
</div>

float: left; を使う方、display: flex; を使う方、大きく分けて2通りの方法がありますよね。

※display: inline-block; が有効な場合もありますが、今回は各コンテンツのデザインの自由度を考慮し省いています。

float: left; で書いた場合


.contents {
   overflow: hidden;
}
.item {
   float: left;
   padding: 20px 30px;
   text-align: center;
}

display: flex; で書いた場合


.contents {
   display: flex;
   flex-wrap: wrap;
   width: 600px;
}
.item {
   width: calc(100% / 4);
   padding: 20px 10px;
   text-align: center;
}

float: left; 側は親コンテンツの横幅を指定せずに横並びに、<br>display: flex; 側は親のコンテンツを600pxに指定し、4分割されるように配置しました。<br>どちらも綺麗に横並びになりましたね！

では、それぞれどのように使い分ければ良いのでしょうか？それぞれの特徴や注意事項について紹介していきます。

3. float: left; をつかう

■特徴

・要素を「左詰め（右詰め）」で配置するという役割があります

・画面内に入り切らなくなると、次の行に移動し、左詰めで配置してくれます

・各要素の高さはその要素自体に依存します

■どういうときに有効？

・横並びにしたい要素の横幅がばらばらの時

・複数行の場合は高さを指定できる時

■有効ではないときは？

・横並びにしたい要素の高さがばらばらかつ、1行で収まらない可能性がある時

■注意点

・親要素の高さが0になる？？？


.item {
    float: left;
    padding: 20px 30px;
    text-align: center;
}

borderが上にしかありませんね…　親要素を見ると、どうやらheightが0になっているようです。

floatは名前通り、要素が「浮いた」状態となります。そのため親要素は、子要素の高さが取得できず、heightが0となってしまいます。

対策方法としては大きく2つあります！

・親要素に overflow: hidden; を付ける


.contents {
    overflow: hidden;
}

・親要素のafter要素（または横並びにしたくない最初の要素）に clear: both; を付ける


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

floatを適用したまま置いておくとデザインが崩れる原因になりますので、必ず対策を行いましょう！

■使用例

・アンケートの選択肢

HTMLはページトップのコードのpタグ部をinputタグに変更しました。


.contents {
    width: 500px;
    overflow: hidden;
}
.item {
    float: left;
    margin-right: 10px;
    padding: 3px 5px;
    text-align: center;
}

特に項目が多い場合、重宝します。

4. display: flex; をつかう

■特徴

・要素を「横並び」に配置してくれます

・様々な指定をすることができ、自由な配置ができます

■どういうときに有効？

・横並びに均等に配置したいとき（複数行も可）

・高さの違う要素を横並びにして、高さを合わせたいとき

■使用例

ページのデザイン

HTMLはページトップのコードの.itemの数を増やしただけです。


.contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 60%;
    margin: 30px 0;
    padding-top: 30px;
}
.item {
    width: calc(100% / 3 - 30px);
    margin-bottom: 30px;
    padding: 50px 10px;
    text-align: center;
}

pタグをimgタグに変えたらギャラリーのようにできますし、divにしてタイトルと文章を入力するのもいいですね。

widthの値を変えれば4列、5列などにも変更できるため、とても拡張性の高い方法だと思います。

この記事ではすべての例については紹介できていませんが、下記サイトがとてもわかりやすかったので、「もっとdisplay: flex;でいろいろしてみたい！」と思った方はぜひ参考にしてみてください。

CSSフレックスボックス(display:flex)の使い方
https://mamewaza.com/support/blog/howto-use-flex.html

5. 最後に

いかがでしたか？

今回はCSSを使ったコンテンツの「横並び」について紹介しました。

今まで何となく横並びにするならこれ！とどちらかを使っていた方に、こんな方法もあるんだなと知っていただけたのなら幸いです。

私は昔、floatしか知りませんでしたが、flexを知ってとても好きになりました。
今では断然、flex派ですw

今回紹介できなかったこともたくさんあるので、ぜひ興味を持った方はネット等で調べてみてください。

テックメディア