弓削篤史（デザイナー／撮影／広報）
写真・動画撮影、サイトデザイン・コーディング、CMS導入やPHPを使ったWEBプログラミングに携わっています。
[ like ] 写真撮影、革鞄づくり、カレーづくり、キャンプ、カラオケ 等
[ like ] 写真撮影、革鞄づくり、カレーづくり、キャンプ、カラオケ 等
お知らせ
NEWS
【CSS】flexboxのメリットとデメリット
2016年5月31日
／マージBLOG、WEB制作
レスポンシブデザインを実現する上で、
オーソドックスだったfloat～系を筆頭に様々な方法があるようですが、
その中でも非常に魅力的なレイアウト方法がflexboxによるレイアウトです。
flexboxのメリット
flexboxの一番すごい点は、細かいwidth等の数字を必要最低限に抑えられるざっくりしたコーディングが可能になる事でしょう。
A
BB
CCCC
2行目
DDDDD
↑はflexboxを使ってメニューを作った場合のイメージです。
メニュー毎の隙間をその都度適切に均等に開けてくれたり、
改行等で2行以上になった場合も、他のセルにheightを指定する必要もなく均等に高さまで合わせてくれるという素敵仕様。
例えばメニューを一つ減らして、文章量も減らしてみましたが・・・
A
B
C
このように自動的に対応が可能です。上二つの例はCSS自体は全く同様のものを使っています。
最近はメニュー等は画像ではなくテキストで作ることが多くなっていますので、
昔だと結構面倒な作業だった、メニューが増減した時や、ページの名前が変更になった時のメンテナンスが相当容易になります。
floatにあった回り込みの癖みたいなものも無いので、慣れればレイアウトも崩れにくくなります。
このようにflexboxを使用すると、昔と比べかなり容易にCSSコーディングが可能になったのですが、
flexboxにも割と厄介な問題点があります。
flexboxのデメリット
flexboxの最大のデメリットはブラウザ対応です。
まずこれを見てください。
.sample_flexbox
{
display:-moz-box;/*--- Android旧ブラウザ用 ---*/
display:-webkit-box;/*--- Android旧ブラウザ用 ---*/
display:-ms-flexbox;/*--- IE10 ---*/
display:-webkit-flex;/*--- safari（PC）用 ---*/
display:flex;
}
flexboxの基本的な指定は「display:flex;」だけなのですが、
この指定だけだと割と多くのブラウザで動作してくれません。
・safari用の記述をしないとiphoneのブラウザによってはレイアウトが崩れまくります。
・Android旧ブラウザ用の記述をしないと、割と最近のAndroidの携帯でレイアウトが崩れまくる場合があります。
・IE10用の記述をしないとIE10でレイアウトが崩れまくります。
と、ここまでやっても
やはり割と新しい技術なため全く対応していないブラウザがあるわけです。
それが、IE9以下のブラウザ
さすがWEB制作者の悪夢ことIE先輩。またも邪魔に入ってきます。
どういう問題かというと、IE9やIE8で閲覧した場合flexboxは一切機能しません。
うんともすんともです。泣きたい。
ただし、現時点でもIE8やIE9のシェアは非常に低い状況にある上、来年1月にはサポート対象外にもなるため
これらのブラウザは除外可能な状況になりつつあります。もちろんクライアント様への説明は必須ですが・・。
ただそれでもIE9を使用しなければならなくて、かつflexboxを使用するにはどうすればいいか？
調べてみたら、とても素敵なスクリプトを作って下さっている方がいらっしゃいました。
flexibility.jsを使って古いブラウザでもflexboxを利用する
flexibility.jsは古いブラウザでflexboxの使用が可能となるスクリプトです。導入自体も至って簡単。
まず、flexibility.jsをダウンロードしましょう。
「dist」フォルダ内にある「flexibility.js」が必要になります。
次にスクリプトを指定しましょう
<script src="flexibility.js"></script>
次に、flexboxの指定に「-js-display: flex;」を追加するだけ
.sample_flexbox
{
display:-moz-box;/
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex;
-js-display: flex;
display:flex;
}
これでIE9等でもflexboxが使えるようになります。
ただし、完璧に同じ動きが出来るというわけでは無いのでしっかりとブラウザチェックが必要となります。
さらに注意しなければならない点として、
この「flexibility.js」、実際のIE9ではちゃんと動作するのですが、
IEテスターや最新のIEに標準装備されているエミュレーション機能では動作しないという罠があります。
なのでエミュレーション機能で確認してると「あれ、全然機能しないぞ！？」という状況に直面します。
つまり、実際のIEとエミュレーション機能は全く同じものではないという事なんですね・・・ひどい話です。
しかし、WINDOWS10や8ではIE9を入れる事が出来ません・・・。
が、その場合は記事「WINDOWS10でIE8やIE9を使う方法」を参考にしてください。
WINDOWS10でもIE9やIE8を利用する方法について書いています。
という事で、
問題点もあるflexboxですが、要点を抑えていれば非常に便利な機能です。
是非お試しください♪
