*

FlexBoxをAndroid4.3以前の標準ブラウザとiOS6.0以前のSafari、IE10にも対応させる方法。レスポンシブレイアウトに最適!

公開日: : 最終更新日:2016/04/24 レスポンシブレイアウト

flexbox01

マルチデバイス対応=レスポンシブ ではない!

マルチデバイス対応、レスポンシブレイアウトでのWeb制作はここ数年(ここ2,3年の事ですね。)ですでに当たり前のものとなってしまいました。
以前はスマホ対応をするかしないかをお客様に確認していましたが、現在では有無を言わさずのようです。

レスポンシブサイトはGoogle大先生が推奨しており、またワンソースですべてのデバイス(ガラケーを除く)に対応できる謳い文句からお手軽感をお持ちの方も多く、「マルチデバイス対応=レスポンシブ」 の印象が強いですがそうではありません。マルチデバイス対応の中の構築法の一つとしてレスポンシブデザインがあります。

レスポンシブの構築は、従来から使われているフロートでのレイアウトにメディアクエリを加えての構築方法が主流でした。

この方法は、ある程度古いバージョンのブラウザでも対応可能です。
反面、デバイス幅によってレイアウトを変更せざるを得ないレスポンシブレイアウトには、フロート時のclearfixの使用に加えブレイクポイントでのフロート解除設定など煩雑なコーディング作業が必要でした。
デバイス、OSの違い、ブラウザのバージョンごとの表示確認作業など多くの時間を要していました。

レスポンシブレイアウトに親和性の高いFlexBox

以前よりフロートでの構築の他にもフレキシブルボックス「FlexBox」がありましたが、度重なる仕様の変更や、多くの古いWindows IE(IE6~IE9)が未対応、ブラウザ実装状況と設定方法の差異などで実践ではなかなか使用できるものではありませんでしたが、ここに来てある程度仕様が固まり、またWindows IE10までの古いIEブラウザのサポートが終了し、モダンブラウザもほぼ実装し、実践での使用にも充分耐えうる状況となってきました。

FlexBoxはレスポンシブレイアウトに大変親和性が高く、今後の主流となるものと思います。
FlexBox関連の記事は諸先輩方が詳しく説明されていますし、私も空で言えるほど完全に マスターしたわけでもないので内容に関してはそちらをご覧いただくとして、ここでは、古いブラウザにも対応できる方法をメモしたいと思います。Android4.3以前の標準ブラウザ、iOS6以前のSafari、そしてWindowsIE10へ対応してみます。

FlexBoxをAndroid4.3以前の標準ブラウザ、iOS6以前のSafari、そしてWindowsIE10へ対応

FlexBoxは今まで3度の大きな仕様変更がありました。
古いものからbox、flexbox、flexです。

仕様 プロパティー 対象OSブラウザ Flexコンテナへの記述例
  box     display   box | inline-box   Android2.1~4.3 iOS6.1以前のSafari ※1   display:-webkit-box;
  flexbox   flexbox| inline-flexbox   IE10 ※2   display:-ms-flexbox;
  flex   flex| inline-flex   IE11以降 モダンブラウザ最新
display: -webkit-flex; /*Safari*/
display: flex;

※1 -webkit-box-lines: multiple;が草案のみでブラウザには実装されなかったため、一番古い仕様のboxでは子要素のwrap設定が出来ない。
※2  flexbox仕様はIE10のみ。

CSS内に上記3種類をベンダープレフィクス付きで古いもの順に記述します。
それぞれのプロパティー横にコメントアウトで記したものが対応させるOSとバージョンです。
Safariに関しては今でもベンダーが必要のようです。

 

Flexコンテナ

.flex-container {
display: -webkit-box; /* before Android4.3 iOS6:Safari */
display: -ms-flexbox; /* IE10 */
display: -webkit-flex; /* Pc-safari */
display: flex;
-ms-flex-flow: row wrap; /* IE10 */
-webkit-flex-flow: row wrap; /* Pc-safari */
flex-flow: row wrap;
width:100%;
}

 

Flexカラム(均等配置)

.col {
-webkit-box-flex: 1; /* before Android4.3 iOS6:Safari */
-ms-flex: 1 1 0px; /* IE10 */
-webkit-flex: 1 1 0px;/* Pc-safari */
flex: 1 1 0px;
width: auto; /* before Android4.3 iOS6:Safari */
}

 

Flexカラム(レスポンシブ等のグリッドで横幅を%設定する場合など)

.col-50per {
-webkit-box-flex: 0; /* before Android4.3 iOS6:Safari */
-ms-flex: 0 0 50%; /* IE10 */
-webkit-flex: 0 0 50%; /* Pc-safari */
flex: 0 0 50%;
width:50%; /* before Android4.3 iOS6:Safari */
max-width: 50%; /* IE11*/
}

※この場合↑、IE11用にmax-widthを同じ値で指定しないと崩れる。

 

Android4.3以前標準ブラウザ・iOS6以前Safariを ワンカラムにするポイント設定

@media only screen and (max-width: 767px) {
.flex-container {
display: block; /* before Android4.3 iOS6:Safari */
display: -ms-flexbox;  /* IE10 */
display: -webkit-flex; /* Pc-safari */
display: flex;
}
}
 ※box仕様は自動改行しない為、ブレイクポイントでコンテナをdisplay: block;で縦並びに指定。

旧box仕様での折り返し機能(-webkit-box-lines: multiple;)は草案のみで終了し、実際にはどのブラウザにも実装されていなかった。
Android4.3以前標準ブラウザ・iOS6以前Safariを対象ブラウザとした場合、上記理由の旧box仕様上、コンテナよりあふれた要素の折り返し設定が出来ない為、コンテナ内の横並びカラム数変更は基本ブレイクポイント1箇所となる。
その際すべてのブラウザに指定されてしまうので、他のブラウザ用にdisplay: flex;を上書きで再設定する。

※iOS6以前のSafariは居てもごく少数であるため無視できる範囲。box仕様への対応は実質Android4.3以前の対応となるため、Android4.3以前のバージョンが完全に無視できる時期になるまでの暫定処置方法。

※IE11にはショートハンド使用時のバグがあるらしいが、実際には確認していないのでここではショートハンド 用のハックを実装していない。

旧ブラウザへはまだ対応が必要!?

旧ブラウザがサポート終了したとは言え、いまだに古いものを使用している方も若干存在するようですし、ことにスマホ、Androidの4.3以前の機種の使用者は相当数いるものと思われます。

一般の方でしたら2年も過ぎればそのほとんどの方が新機種に買い替えるのではないかと思われますし、またそうしない方でしたら電話機能のみの使用がほとんどのように思います。
これが企業様になるとそうは頻繁に機種変更しないようで、また、支給されている機種に対し勝手にOSのバージョンアップなどは禁じられているところがほとんどでしょう。
その為、実際にWebを閲覧使用されるユーザー様よりも若干古いバージョンのブラウザも対象に入れないと、依頼されたお客様の閲覧環境では表示崩れが起きて苦情となってしまう事も十分に考えられます。
実際にここ最近、Android4.2~4.3の標準ブラウザの固有のバグでの表示崩れと思われる現象を指摘された事もありましたので、少なくともあと1年程度は対応が必要のように思います。

これにグリッドレイアウトの設定とメディアクエリの設定を組み込めば、従来のフロートによる構築とは比べ物にならない時間短縮が見込めるのではないでしょうか!?

関連記事

レスポンシブレイアウト時にdevice-widthを設定してもデバイスの横幅ぴったりに表示しない時

レスポンシブレイアウトの方法にもいくつかあります。 大雑把ですが、フルードグリッドですべてのデ...

記事を読む

新着記事

新年おめでとうございます

2013年より某企業グループ内制作チームに所属し、翌年より週の半分以上をチーム内での制作、残...

記事を読む

WordPressのエラーを表示させる。白紙状態になったとき。

WordPressのテーマ制作などでfunction.phpの編集やプラグインのインストールなどして...

記事を読む

Dreamweaver CC 2017 正式リリース、早速使ってみた!

一昨日、Dreamweaver CC 2017 が正式にリリースされました。 夏前よりBeta版を...

記事を読む

Windows10 フリーズしたように動作が重くなる現象と対策!

先日、Windows 10 Anniversary Updateをしたばかりですが、その後突然フリー...

記事を読む

【突然くるぞ!】 Windows 10 Anniversary Updateで2時間以上お仕事ストップ!

Microsoftさんがまたヤッてくれました。 お仕事中にアプリケーションが重たくなってきたの...

記事を読む

新年おめでとうございます

2013年より某企業グループ内制作チームに所属し、翌年より週の...

WordPressのエラーを表示させる。白紙状態になったとき。

WordPressのテーマ制作などでfunction.phpの編集やプ...

Dreamweaver CC 2017 正式リリース、早速使ってみた!

一昨日、Dreamweaver CC 2017 が正式にリリースされま...

Windows10 フリーズしたように動作が重くなる現象と対策!

先日、Windows 10 Anniversary Updateをした...

【突然くるぞ!】 Windows 10 Anniversary Updateで2時間以上お仕事ストップ!

Microsoftさんがまたヤッてくれました。 お仕事中にアプリ...

→もっと見る

PAGE TOP ↑