[Webデザイン関連]レスポンシブ対応したらIE8に非対応の刑…ヒ～助けて～Respond.js様！
公開日：
:
ツール
concrete5とは直接関係ないものの、自社サイトを構築している中で困ったこと。それはやっぱりクロスブラウザ対応かな…と。
Webサイトのデザイン面で大きな役割を担うCSS3などの規格に対応したCSSフレームワークをすると（今回はFoundation5）、スマホやタブレットPCをターゲットにしてWebサイトをデザインしていく「モバイルファースト」という考え方で作られているため旧来のブラウザがその表示形式に対応していないケースがある。
特に、MicrosoftのInternetExploreシリーズはバージョンによって全然違う動きをすることがあって、下位バージョンとの表示差を「互換表示モード」という機能をわざわざ組み入れているくらい。差がある。そして、Web製作側でも対応を考えさせられる部分でもある。
で、今回ももれなくそのようなことを考慮しなければならないのを綺麗に忘れていてFoundation5を使ってスマホ・タブレットPCに対応させるんや！というアホな思想で進めてしまったから、後でとんでもないことになってしまった。
発端は、社内にサーバーを立ててconcrete5を使って構築したサイトを社内向けに公開したところ、IE8のユーザーから「表示おかしいで！」という連絡をもらって気づいたというお粗末な話。
普段、Firefoxを使っている私はIE9では動作などを確認していたものの、下位バージョンを見逃していた。
あわてて、公開されている既存の自社サイトのGoogleアナリティクスからWebアクセス元ブラウザでアクセス数を集計してみるとIE8のアクセスが全体の65%を超えていた。
もっと早くこのアクセス解析結果を見てサイトを作っていたら先回りしてサイト構築時に気付けていたのだが、そんなことも忘れてconcrete5とFoundation5の魅力に憑りつかれていた…涙
で、泣きつくようにGoogle先生にレスポンシブ IE8 対応と検索してみました。
すると、どうやらJavaScriptのライブラリがあるらしい…というところにたどり着きました。これは、CSS3のメディアクエリ非対応のブラウザ（ここではIE8以下）にもレスポンシブっぽい表示をサポートしてくれるという優れものだそうな。
その名も「Respond.js」というライブラリらしい。これは使わねば！ということで早速実装。
GitHubのhttps://github.com/scottjehl/Respondからソースファイルを入手して、テーマディレクトリ直下に配置してスクリプトの呼び出し元のHTMLソース内の<head>～</head>エリアに呼び出しのステップを記述すれば対応完了！
めちゃくちゃ導入が簡単な上、結構な数の関連ブログ記事があって導入ノウハウなどに困ることはなかったです。
おかげで、大幅な修正をしなくても済みました！
ありがとう！Respond.js様～
Comment
[…] 諦めるわけにもいかずいろいろ探していると、ありました！！というのが前回の記事「[Webデザイン関連]レスポンシブ対応したらIE8に非対応の刑…ヒ～助けて～Respond.js様！」だった。 […]