Step By Work

大阪のホームページ制作会社

既存サイトのレスポンシブ化の際にflexboxを使いたい

Date: 2016.12.20
Update: 2022.10.24

執筆・監修

上杉 洋 Hiroshi Uesugi

1991年生まれ。 株式会社ステップバイワーク代表。 2013年に株式会社n.uを設立。 2015年にStep by workとして独立。 2021年株式会社ステップバイワークとして法人化。 HP制作/SEO対策/コンテンツ制作/動画制作/YouTube運用/写真撮/WordPressを全て一人でやります。

flexboxって便利ですよね!
上下中央揃えとか、横並びのボックスの均等揃えとかが簡単にできるので非常に助かります。

そんなのtableでやればいいんじゃない?という声もあるかと思いますが、私がWeb制作の勉強を始めたときには既にHTML5/CSS3がでていたこともあり、正直tableレイアウトへの理解が少ないし、なんでもかんでもtableレイアウトにすることは推奨されていない現状もあるので、flexboxを使用することができればコーディングが非常に楽になると思うのです。

特に既存のWebサイトをレスポンシブ化する場合なんかはflexboxを使えるとかなり楽にコーディング出来ると思います!

ただ、古いIEなどで対応していないためなかなか使用する機会がないのも事実です。

なので、せめてスマホの場合のみflexboxを使えないかと考え、スマホのブラウザのflexboxの対応状況について調べてみました。

目次(読みたい所をクリック!!)

対応ブラウザについて

とりあえずIE9以前は対応しておらず、IE10はベンダープレフィックスを使用して対応が可能なようです。
それ以外については問題なさそうです。

肝心のスマホのブラウザについてですが、iOS6.1以前Android4.3以前のブラウザではflexboxに対応していないようです。
しかし、boxというflexboxの古い仕様で記述すればよさそうです。

今後、flexboxがもっと広く使用されるようになることを願います。

参考サイト

下記のサイトを参考にさせていただきました!

http://scene-live.com/page.php?page=60

この記事へのコメント 0件

オールインワンで集客できる
格安ホームページ制作会社です!

株式会社ステップバイワークに関する資料をご希望の際は、
以下公式LINEお問い合わせフォームからご連絡ください。