プログラミング

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

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

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

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

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

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




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

グローバルナビゲーション例

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

HTML

CSS

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

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

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

HTML

CSS

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

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

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

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

フルードデザインとは、画面サイズに合わせて伸縮するレイアウト。このサンプルコード例ではサイドバーを固定幅にし、メインコンテンツ部分を画面サイズに合わせて伸縮する設計にしています。

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

HTML

CSS

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

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

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

HTML

CSS

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

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

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

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

フルードデザインとは、画面サイズに合わせて伸縮するレイアウト。このサンプルコード例ではサイドバーを固定幅にし、メインコンテンツ部分を画面サイズに合わせて伸縮する設計にしています。

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

HTML

CSS

CODEPEN

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

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

HTML

CSS

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

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




  • この記事を書いた人

raffaello

ジャングルオーシャンのラファエロといいます! ゴリラだけど意識高い系になりたい。

-プログラミング
-, , , ,

© 2024 ジャングルオーシャン