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

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

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

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

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

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

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

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

HTML

<nav>
  <ul>
    <li><a href="＃">Top</a></li>
    <li><a href="about/">About</a></li>
    <li><a href="service/">Service</a></li>
    <li><a href="access/">Access</a></li>
    <li><a href="contact/">Contact</a></li>
  </ul>
</nav>

<nav>

<ul>

<li><a href="about/">About</a></li>

<li><a href="service/">Service</a></li>

<li><a href="access/">Access</a></li>

<li><a href="contact/">Contact</a></li>

</ul>

</nav>

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;
}

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

<nav>
  <ul>
    <li><a href="＃">Top</a></li>
    <li><a href="about/">About</a></li>
    <li><a href="service/">Service</a></li>
    <li><a href="access/">Access</a></li>
    <li><a href="contact/">Contact</a></li>
  </ul>
</nav>

<nav>

<ul>

<li><a href="about/">About</a></li>

<li><a href="service/">Service</a></li>

<li><a href="access/">Access</a></li>

<li><a href="contact/">Contact</a></li>

</ul>

</nav>

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;
}

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

<main>
  <div class="main-container">
    <div class="sidebar">サイドバー</div>
    <div class="maincol">
      <div class="miancol-container">メインコンテンツ</div>
    </div>
  </div>
</main>

<main>

<div class="sidebar">サイドバー</div>

<div class="miancol-container">メインコンテンツ</div>

</div>

</main>

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;
}

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

<main>
  <div class="main-container">
    <div class="sidebar">サイドバー</div>
    <div class="maincol">メインコンテンツ</div>
  </div>
</main>

<main>

<div class="sidebar">サイドバー</div>

<div class="maincol">メインコンテンツ</div>

</div>

</main>

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;
}

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

<main>
  <div class="main-container">
    <div class="wrapper-col">
      <div class="wrapper-col-container">
        <div class="left-sidebar">左サイドバー</div>
        <div class="maincol">
          <div class="maincol-container">メインコンテンツ</div>
        </div>
      </div>
    </div>
    <div class="right-sidebar">右サイドバー</div>
  </div>
</main>

<main>

<div class="left-sidebar">左サイドバー</div>

<div class="maincol-container">メインコンテンツ</div>

</div>

<div class="right-sidebar">右サイドバー</div>

</div>

</main>

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;
}

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

<main>
  <div class="main-container">
    <div class="left-sidebar">左サイドバー</div>
    <div class="maincol">メインコンテンツ</div>
    <div class="right-sidebar">右サイドバー</div>
  </div>
</main>

<main>

<div class="left-sidebar">左サイドバー</div>

<div class="maincol">メインコンテンツ</div>

<div class="right-sidebar">右サイドバー</div>

</div>

</main>

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;
}

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を覚えましょう！

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