すっかりうさこの本業が忘れられそうになっているので、このへんでWebネタでも…。

近日、レスポンシブ対応のサイトが増えてきましたね。

少し前までは、スマートフォンと、PCを別のHTMLに書くのが主流でしたが、今や一つのHTMLに書いてCSSでスマホもPCも対応させちゃおう！！という画期的かつ面倒なことを思いついた人がいます。
そんなわけで、Web製作者はこのめまぐるしい変化するテクノロジーに対応すべく、日々寝る間も惜しんで仕事に明け暮れるわけです。

うさこはフリーランスです。
とはいっても、やっぱりレスポンシブについては対応しないといけないので、お仕事の中でお勉強させてもらっています。

さて、このレスポンシブ対応、見る側からすればひとつのHTMLで全部済むなら作る手間も少なくて簡単じゃん！！って思うでしょう？
違うんです…HTML1つになったことで、さらに大変なことがあるんです！
それはブラウザチェック！！

WebブラウザというのはIEだけではありません。Chrome,FireFox,Opera,Safari…メジャーなブラウザだけでもこんだけあるんです。
しかもMacとWindows、さらにiphoneやらAndroidやら、タブレットやら…
寝られない…

しかも、Web製作者泣かせなIE様はバージョンによって表示が違うという難題が…！！

さて本題のmediaQueriesとはHTMLもしくはCSSにかくことで、ブラウザの幅を変化させるだけで、CSSの読み込みを切り替えることができます。
したがって、今まで各ブラウザ幅に対して1つのHTMLを書いていたことが1つのHTMLでたくさんの幅に対応できるようになったのです。

しかーし！！なんてことでしょうか！？IE8以下はmediaQueriesが読み込めないという事実が！！！

信じられません！というか、IE8以下ってまだ対応しなきゃダメですか？？

そう！IE8以下！何かと言って邪魔されます。

そんなときは、そうこれ！便利になりましたね～。
IE8以下にmediaQueriesを読み込ませることができるjsがちゃんと用意されているのです。
さあ、はりきって「Respond.js｣と調べてみましょう。
これすごい！今まで悩んでいたことが一気に解決!

ところで、もう一つ同じようなjsがあるんです。
「css3-mediaqueries-js｣
でも、うさこのHTMLではうまく動作しませんでした。
こちらも調べてみると、なんか使い方が難しいようです。
使うときのルールが決まっているようなので、使うときは前もってきちんと調べておくと良いですよ。

はぁ。便利にはなったけど、やっぱりレスポンシブ対応は大変～！！