私の隣にはデザイナーがいます。しかもかなり若いです。19歳。若過ぎる！！
よくそのデザイナーと世間話をしていますが、ところどころに世代ギャップを感じてます(^_^;)
この前、何かの流れで松任谷由実の話を隣のデザイナーに話してみたら「え？誰ですか？」みたいな反応をされ、予想していなかった事態にショックを受けました。。。（自分も歳を取ったなという意味で）
松任谷由実は知らないとして、さすがに「恋人がサンタクロース」は知っているだろうと思いその曲を聞かせてみましたが、「え？何ですかこれ？」という反応だったので、世代ギャップとはこれかと思いました…orz
それはさて置き（笑）、レスポンシブデザインを実際に制作してみてわかったことは、HTMLコーディングがとても複雑だということです。デバイス（PC・スマートフォン・タブレット）毎にHTMLに適用するCSSを変えるため、デザインが変更になった場合の修正量が非常に多いのです！（後から修正は絶対にNG！）あと、スマートフォンの端末・機種によって、表示に違いがあるため、技術的なところでも悩まされることが多いです。そのため、作った経験が多くあっても、ミスや抜け漏れ、技術的に対応が難しいことが多発してしまいます…。
今回のコラムでは、皆さんが私と同じ失敗をしないように、レスポンシブデザインのHTMLコーディングで多発してしまう技術的な問題（落とし穴）の内のMedia Query（メディアクエリ）についてご紹介しようと思います。（ミスや抜け漏れは、再発しないように努力しましょう！）
CSS3のMedia Query（メディアクエリ）には落とし穴が！？
レスポンシブデザインのHTMLコーディングを始めるときに先ず定義することとして、Media Query（メディアクエリ）を利用したデバイスの横幅、または解像度毎に読み込むCSSの振り分けですが、実はこの時点で既に落とし穴があるのです。
それは、Internet Explorerのバージョン6、7、8（以降IE6～8）はMedia Query（メディアクエリ）に対応していないのです！
私はこのことを知るまで、当たり前のように対応しているものだと思ってHTMLコーディングを進めていたのですが、制作終盤のHTMLテスト・検証作業時にこの欠陥に気付き、同プロジェクトメンバーから「超特急で修正！1時間後！」と言われ、血眼になりながら修正をした経験がありました。（汗）
IE6～8にメディアクエリを適用するには？
「じゃあ、IE6～8にメディアクエリを適用させるためにはどうするの？」と感じたかと思いますが、解決する代表的な方法は「respond.js」や「css-mediaqueries.js」のようなJavaScriptを利用すれば解決することが出来ます。
こんな便利なものがあったとも知らず、パソコンの画面と長時間にらめっこして、HTMLとCSSの調整で試行錯誤を続けて頭が痛くなったことは、思い出したくない思い出です。（笑）
JavaScriptの使い方
ご紹介したJavaScriptの使い方は、いたって簡単で、HTMLのheadタグ内で読み込ませるだけ！（この記事では「respond.js」の使い方について紹介します）
<head>
<link rel=”stylesheet” type=”text/css” href=”pc.css” media=”screen and (min-height: 1028px)” />
<link rel=”stylesheet” type=”text/css” href=”tablet.css” media=”screen and (max-height: 768px)” />
<link rel=”stylesheet” type=”text/css” href=”smartphone.css” media=”screen and (max-height: 480px)” />
…
<script src=”respond.js”></script>
…
</head>
正に魔法のJavaScript！上記のように読み込ませるだけで、 Media Query（メディアクエリ）の落とし穴であるIE6～8に対応していない問題を解決することが出来ます。
私と同じような問題に直面している社員を見かけたとき、ドヤ顔で「respond.js」のことを教えてあげました。1分で解決！
いかがでしたでしょうか？レスポンシブデザインのHTMLコーディング（CSS含む）は複雑な上に落とし穴があるなんて・・・と思った方もいると思いますが、逆に言うと、知っていれば解決出来ることです。
みなさんも、レスポンシブデザインでWebサイトを作るときは落とし穴にハマらないよう、気をつけてくださいね。（まだまだたくさんありますよ…）
・・・え？何でコンサルティングの私がコーディングの技術的なことを紹介しているかって？それはコンサルティングとなる前にコーダーとして十数案件ほど制作した経験があるからです。多くのスキルを持った社員を作るという、ティファナ・ドットコムの方針のもと、制作も出来るコンサルティングになったため、技術的な知識も豊富なのです。今では「制作を受けないか？」という話をもらっても断っていますが。（笑）
