IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！

2016年1月5日
CSS, JavaScript

昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！

↑私が10年以上利用している会計ソフト！

Flexboxって何？

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。

CSSを一行プラスするだけで横並びにできる！
横並びになった要素の高さが最初から揃ってる！
要素を上下左右、好きな順序に並び替えられる！
スペースの操作も自由自在！
高さの異なる横並びの要素を、簡単に上下中央揃え！

詳しい説明や実装方法は過去記事をご参照ください！

Flexboxの対応ブラウザー

過去記事にも書いていますが、IEは11から正式にFlexboxに対応しています。対応していないIE8や9は、Webサイトによっては切り捨てているところもあるかと思いますが、やむを得ず対応しなければならない事もあるかと思います。

そこで flexibility.js で対応させよう！

flexibility.jsは古いブラウザーでもFlexboxに対応させるためのスクリプト。古いブラウザーで実装できない機能の穴を埋める、Polyfill（ポリフィル）というものですね。それではさっそく flexibility.js を使ってみましょう！

1. flexibility.jsを読み込む

使い方はとっても簡単。flexibilityをダウンロードし、「dist」フォルダー内の flexibility.js をページに読み込ませます。

HTML

<script src="flexibility.js"></script>

2. CSSに一行追加

あとはFlexboxを使いたい要素に -js-display: flex; を追加するだけ。

CSS

.container {
  -js-display: flex;
  display: flex;
}

IE8でもFlexboxを使える！
こんな感じで対応されました。左がflexibility.js実装前、右が実装後ですね。うひょー！簡単！

おまけ：MacでIEの動作確認をする方法

私はMacユーザーなのですが、Windowsでの確認はVirtualBoxという仮想PCアプリケーションにマイクロソフトが提供する仮想マシンをインストールして使っています。

インストールの流れは「Macでも無料でIE確認するためのModern.IEが想像以上に快適だった」という記事を参考にしましたが、今はターミナルでコードを入力したりしなくてもインストールできるようになりました。

仮想マシンのダウンロードページから必要なIEとWindowsのバージョン、プラットフォームを選択してファイルをダウンロード。※ダウンロードにはかなり時間がかかります！

ダウンロードしたファイルを解凍すると、こんな感じのオレンジ色の四角が目印のファイルが現れるので、それをダブルクリックしてインポートすればOK。これでMacでもWindowsを操作できるようになり、IEでの動作確認も可能となります。

おまけってことでかなり端折って書きましたが…参考になれば幸いですw

今回紹介した flexibility.js の他にも、ポリフィルと呼ばれる、古いブラウザーに対応させるためのスクリプトはいくつか存在します。過去にもHTML5に対応させるhtml5shiv、CSS3に対応させるCSS3 PIE、IE6でも透過PNGを表示させるIE PNG Fixなんてものがありました（懐かしい！）。ただ、導入することで動作が遅くなったり、何かしらのバグが発生する可能性もあり、実装には賛否あるかと思います。導入する際は動作確認を行いながら進めてくださいね！

IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！