CSSのFlexboxを古いIEにも対応させることができるスクリプト「flexibility」

CSSのFlexboxを古いIEにも対応させることができるスクリプト「flexibility」

CSSのFlexboxを古いIEにも対応させることができるスクリプト「flexibility」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加

要素を横並びにしたり、レイアウトを構築する時に便利なFlexboxですが、Internet Explorer8や9等の古いブラウザには対応していません。マイクロソフトのサポートも終了していますし、個人的には古いIEは無視して良いと考えていますが、Web制作の現場では古いIEにも対応しなければいけないこともあるでしょう。

古いIEを意識してFlexboxを使わないというのも一つの手です。しかし、Flexboxを使った方がレイアウトの構築がスムーズというケースも多いので、悩みどころだと思います。

そこで今回は、古いIEにFlexboxを対応させることができるスクリプト「flexibility」を紹介したいと思います。flexibilityを使えば、古いIEでもFlexboxが利用できるようになります。

スポンサードリンク

flexibilityの使い方

flexibilityのダウンロードと設置

まずは、GitHubからflexibilityをダウンロードしましょう。ダウンロードしたファイルを解凍し、flexibility.jsをサーバーにアップします。

HTMLでは、</body>の直前に以下を追加して、flexibility.jsを読み込みます。

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

ファイルパスは適宜変更してください。

CSSの追加

スクリプトを読み込んだら、Flexboxを適用したい要素に対して、「-js-display: flex;」を追加してあげます。

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

「-js-display: flex;」を追加することで、IE8やIE9でもFlexboxが機能するようになります。

あとがき

どうしても古いIEに対応しなければいけない時は、ぜひ導入をご検討ください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。