BLOG
Webエンジニア2025年新卒採⽤ BRISKは新卒からリモートワークです。

Flexboxを使うべきか?まだ時期尚早か?の考察

更新日:2016/11/24

flexbox

Flexboxと仕事でのWeb制作

FlexboxというCSSプロパティについて、すでに実際にバリバリ使ってるよという方も、聞いたことはあるけど使うまでに至っていないという方もいらっしゃるでしょう。
Flexboxがどんなものなのか、ということはこの記事では扱いませんこちらの記事こちらの記事などがとても参考になりました。)
今回は、とても便利そうなFlexboxですが、Web制作の仕事で実際に使用するかどうかについて考えてみました。

Web制作の仕事では、対応ブラウザ(見え方を保証するインターネットブラウザ)を気にして制作します。
なぜなら、対応ブラウザによって、制作方法・記述方法がかなり変わってくるからです。
FlexboxはIE9では全く対応しておらず、IE10、Android4.2以前の標準ブラウザではFlexboxの記述方法がかなり違う、というのが考慮するポイントです。

Web制作における対応ブラウザの今後

今年行ったほとんどの案件は、PCの対応ブラウザが「Chrome最新、FireFox最新、IE9以上」、という案件でした。
現在、IE9のブラウザシェアは「6.36%」で第4位です。それなりに無視できない数字です。
しかし、2017年4月11日にWindows Vistaのサポートが終了するに伴いIE9のサポートも終了しますので、IE9のシェアは大きく減っていくと予想されます。(※Windows Server 2008のIE9サポートは2020年まで)
来年には対応ブラウザがIE最新版(むしろEdge)という案件もいくつか出てくるような気がしています。

また、スマホではAndroid4.4の時点でAndroid標準ブラウザが廃止されChromeを使うようになっています。
Android標準ブラウザは、2年ほど前にサポートが終了していますが、2016年6月時点のブラウザシェアは「9.04%」となっており、悩ましいところです。
しかし、Android4.4が2013年10月にリリースされていることを考えると、来年で4年経ちますので無視できるほどに減ってくるのではないかと願いたいです。

Flexboxは使うべき?

さて、本題になりますが、Flexboxを仕事でのWeb制作で使うべきでしょうか。
もちろんケースバイケースにはなりますが、判断基準となるFlexboxを使うメリット・デメリットを箇条書きで挙げてみました。

メリット

  • jsに頼らざるを得なかった表現がcssだけで可能。(横並びの要素の高さを揃えるなど)
  • float, clearfix を用いるよりも記述がシンプル。ちりも積もればで、コードの容量も軽くなる。
  • 要素上下の芯を揃える、等間隔配置、など、キレイに見える配置を簡単に実現できる。
  • デバイスごとに要素の表示順を変更する、ということが可能。

デメリット

  • ブラウザによっては使えない(「flexibility.js」を導入すれば対応可能だが、バグがあったり表示の遅延につながる)
  • ブラウザによっては記述方法が違う(iOS8以前、Android4.3、IE10では、記述方法が異なる)
  • 書き方によってはIE11やEdgeでバグが発生する。(それに対応できる書き方をすれば大丈夫。参考はこちら

こうして見てみると、Flexboxはとっても便利で使う価値は十分にあるが古いブラウザが足枷になる、という感じでしょうか。
足枷になる主なブラウザは結局IEですね。
しかし、現実のWeb制作ではIEを無視できるはずもありません。

そう考えるとわたし自身は、まだ半年以上はFlexboxの本格導入をしない気がしています。
Flexboxを使うことでしか実現できないことをしたい場合はFlexboxを用いることもあるでしょうが、そうでない場合はまだ時期尚早と考えています。
Flexboxは確かに便利ですが、ブラウザの相違によるバグが少ないほうがトータルコストは下がります。

しかし、Flexboxを本格導入できるときは着実に近づいています。
PCでWebサイトを見る人よりもタブレットやスマホで見る、という人の割合が増えているのも大きなポイントです。
使いたいとき時に使いこなすために、タイミングを見て本格的に使いこなすための勉強したいと思っています。

南本貴之

FOLLOW US