【コピペOK】floatとFlexboxのCSSレイアウト比較例3選

みなさん、こんにちわ！
ジャングルオーシャンのラファエロです！！

つい最近、Webデザイン初心者の友人からこんなことを言われました。

「CSSでレイアウトしたいんだけど、ネットで調べてみるとfloatとかFlexboxとか出てきて意味わかんない(T ^ T)」

確かにCSSでのレイアウト方法を検索してみるとfloatを使った方法とFlexboxを使った方法が混在していて、Webデザイン初心者には分かりづらいですよね(^^;)

ラファエロは断然Flexboxを使った方法をおすすめしていますが、実際のところfloatとFlexboxのどっちが簡単なのかサンプルコードを用意したので比較みましょう！

グローバルナビゲーションの場合

floatで作るグローバルナビゲーション例

HTML

CSS

*{
  margin: 0;
  padding: 0;
}
nav{
  border-top: 8px solid #79BD9A;
  background: #A8DBA8;
}
nav ul{
  overflow: hidden;/* フロート解除 */
  list-style: none;
  margin: 0 auto;
  max-width: 1000px;
}
nav li{
  float: left;
  width: 20%;
}
nav li a{
  display: block;
  padding: 20px 0;
  width: 100%;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  color: #EFEFEF;
}
nav li a:hover{
  background: #79BD9A;
}

CODEPENで確認したい方はこちら

See the Pen
XQrPBB by JOラファエロ (@jo_raffaello)
on CodePen.

Flexboxで作るグローバルナビゲーション例

HTML

CSS

*{
  margin: 0;
  padding: 0;
}
nav{
  background: #A8DBA8;
  border-top: 8px solid #79BD9A;
}
nav ul{
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0 auto;
  max-width: 1000px;
}
nav li{
  width: 20%;
}
nav li a{
  display: block;
  padding: 20px 0;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  color: #EFEFEF;
}
nav li a:hover{
  background: #79BD9A;
}

CODEPENで確認したい方はこちら

See the Pen
GLKzdE by JOラファエロ (@jo_raffaello)
on CodePen.

2カラムレイアウト(フルードデザイン)の場合

floatで作る2カラムレイアウト(フルードデザイン)例

HTML

  

    
サイドバー
    

      
メインコンテンツ
    
  

CSS

*{
  margin: 0;
  padding: 0;
}
.main-container{
  overflow: hidden;/* フロート解除 */
}
.sidebar{
  float: left;
  width: 300px;
  background: #AEC4E5;
  padding: 100px 0;
}
.maincol{
  float: right;
  width: 100%;
  margin: 0 0 0 -320px;
}
.miancol-container{
  margin-left: 320px;
  background: #EB8686;
  padding: 100px 0;
}

CODEPENで確認したい方はこちら

See the Pen
EJYrBV by JOラファエロ (@jo_raffaello)
on CodePen.

Flexboxで作る2カラムレイアウト(フルードデザイン)例

HTML

  

    
サイドバー
    
メインコンテンツ
  

CSS

*{
  margin: 0;
  padding: 0;
}
.main-container{
  display: flex;
}
.sidebar{
  flex: 0 0 300px;
  background: #AEC4E5;
  padding: 100px 0;
}
.maincol{
  flex: 1 1 auto;
  margin-left: 20px;
  background: #EB8686;
  padding: 100px 0;
}

CODEPENで確認したい方はこちら

See the Pen
wZwOWQ by JOラファエロ (@jo_raffaello)
on CodePen.

3カラムレイアウト(フルードデザイン)の場合

floatで作る3カラムレイアウト(フルードデザイン)例

HTML

  

    

      

        
左サイドバー
        

          
メインコンテンツ
        
      
    
    
右サイドバー
  

CSS

*{
  margin: 0;
  padding: 0;
}
.main-container{
  overflow: hidden;/* フロート解除 */
}
.wrapper-col{
  float: left;
  margin-right: -200px;
  width: 100%;
}
.right-sidebar{
  float: right;
  padding: 100px 0;
  width: 180px;
  background: #C0C0C0;
}
.wrapper-col-container{
  overflow: hidden;
  margin-right: 200px;
}
.left-sidebar{
  float: left;
  margin-right: 20px;
  padding: 100px 0;
  width: 240px;
  background: #AEC4E5;
}
.maincol{
  float: right;
  margin-left: -260px;
  width: 100%;
}
.maincol-container{
  margin-left: 260px;
  padding: 100px 0;
  background: #EB8686;
}

CODEPEN

See the Pen
KYPYBv by JOラファエロ (@jo_raffaello)
on CodePen.

Flexboxで作る3カラムレイアウト(フルードデザイン)例

HTML

  

    
左サイドバー
    
メインコンテンツ
    
右サイドバー
  

CSS

*{
  margin: 0;
  padding: 0;
}
.main-container{
  display: flex;
}
.left-sidebar{
  flex:0 0 240px;
  padding: 100px 0;
  background: #AEC4E5;
}
.maincol{
  flex:1 1 auto;
  padding: 100px 0;
  margin:0 20px;
  background: #EB8686;
}
.right-sidebar{
  flex:0 0 180px;
  padding: 100px 0;
  background: #C0C0C0;
}

CODEPENで確認したい方はこちら

See the Pen
EJYJBG by JOラファエロ (@jo_raffaello)
on CodePen.

これから覚えるなら「Flexbox」

いくつかサンプルコードの例をお見せいたしましたが、floatのサンプルコード例よりもFlexboxのサンプルコード例の方がコードの記述量が少ないのに気付きましたでしょうか？

特に3カラムレイアウトの例はHTMLとCSSどちらも記述量の差が顕著に出ていたかと思います。

冒頭でも「ラファエロは断然Flexboxを使った方法をおすすめ」と書きましたが、Flexboxの方が圧倒的に簡単で覚えやすいです！

さらに言うとFlexboxは現在Webデザインの主流となっているレスポンシブデザインと親和性が高く、最近のほとんどのWebサイトはFlexboxでレイアウトされていると言っても過言ではないでしょう。

floatはフロート解除などめんどくさい記述を書かなければならなかったり、レスポンシブデザインに対応しようとするとコードが複雑になってしまうので最近はレイアウトに用いられなくなってきています。

なので、初心者の方は簡単に書けてレスポンシブデザインとの親和性が高いFlexboxを覚えましょう！

以上、ラファエロでした！！