ブログ

これから必須のFlexboxを案件で使ってみた

今年はできるだけ、「Internet Explorer 9」を窓から投げ捨てる(=サポートを切る)案件を増やしていく予定です。

このサイトもflexboxを使うコードに移行しました。それ以外にも、flexboxをいくつかの案件で使ってみました。そこで得られたノウハウをちょこっとだけシェアさせていただこうと思います。作り方は今回は記載しないのであしからず。

作るときにはFirefoxでまず制作します

Firefoxで最初に検証しながら制作するのには理由があります。

  • ちょっと複雑なことをやろうとすると、Firefoxさんだけお行儀が悪くなります。Internet Explorer 10よりもお行儀が悪いです。
  • 同じものをつくるにしても、Firefoxだけできない、できても複雑なコードになることが多くなります。
  • Firefoxさんにがんばってもらうためのコードを記載しても、ChromeやSafari・Internet Explorerで表示で問題が出る確率は低いです。

ChromeやSafariで最初確認しながら制作し、Firefoxで検証すると「あれ?」ということが多いです。Firefoxを検証対象から外すとかなりシンプルなソースになったりすることが、もう何回あったでしょうか。

display:tableとは過去に何があったのかわかりませんが仲良くありません

flexboxと「display:table」はできるだけ使うのをよしましょう。

flexboxの子要素に「display:table」を指定すると、「display:table」を指定した要素が拗ねてしまい、幅を認識できないことがあります。

IE10もちょっとバグがありますけど、flexboxに関してはIE6よりは窓から投げ捨てる気分はだいぶ減ると思います

子要素の幅が認識されないときがあります。そのようなときには「width:100%」を指定すればいい感じに表示されます。

現状では、少なくともFirefoxよりはましです。

古いブラウザ対応の時には、インライン要素に気をつけましょう

Android 2.3のブラウザで検証すると、インライン要素(a要素やspan要素など)にはflexboxを指定するとスタイルが反映されないことがあります。正確には、ちょっとすねちゃう感じです。

flexboxと直下の要素はブロック要素(section要素やdiv要素など)で指定するのが安全でしょう。

スライダーやカルーセルで使うときには幅指定に気をつけましょう

スライダーやカルーセルなどで使うときには、幅指定を「width」ではなく「min-width」と「max-width」を使います。

flex-wrapプロパティはまだ案件では使えないので注意しましょう

「flex-wrap」というプロパティがあります。しかし、古いflexboxのプロパティをサポートしているブラウザ、また、Firefoxもバージョン27(2014年1月現在、次のバージョン)までは使えません。

「flex-wrap」プロパティが使えるブラウザがメインになるまで我慢しましょう。
また、どうしても使いたいときにはfloatをフォールバックにしましょう。

将来、flexboxでがんばればこんなこともできます

  • テキストの下に画像が回り込むもの以外はfloatはいらなくなります。「clearfix」は過去帳入りします。
  • 要素の高さをすべてそろえることができます。「heightline.js」みたいなJavaScriptは歴史上の遺物になります。
  • 要素の高さをすべてそろえるだけでなく、子要素の特定要素の位置を下揃えにする、ことも可能です。いままでは「position」つかってがんばっていた苦労はなくなります。「見出しがあって、文字量の違うテキストがあって、その下のボタンの位置をそろえたい」ような需要には最適です。
  • ルビ(ruby要素)もflexboxで制作するとかなりシンプルなソースになります。404 Blog Not FoundなルビのCSSもflexboxで記載すればかなりシンプルなコードになります。
  • 「nth-last-of-type」疑似クラスと組み合わせて使用すると実は便利、ということを心の隅に入れておくといいでしょう。

作るときにはツール使ってOKです、けど...

  • ツールを使うのはOK...なのですが、ツールのソースをすべて使う必要はありません。
  • 必要な部分だけ抜き出して使うことをおススメします。そこは今回シェアしないので試行錯誤してください。

まとめ

flexboxはこれからの技術です。

つい最近、「Internet Explorer 8」を窓から投げ捨てた記事を書いたどこかの制作会社がありましたが、そろそろ「Internet Explorer 9」を窓から投げ捨ててみてはいかがでしょうか。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。