Web関連

意外と知らない!?レスポンシブデザインにある落とし穴(Media Query編)

私の隣にはデザイナーがいます。しかもかなり若いです。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サイトを作るときは落とし穴にハマらないよう、気をつけてくださいね。(まだまだたくさんありますよ…)

・・・え?何でコンサルティングの私がコーディングの技術的なことを紹介しているかって?それはコンサルティングとなる前にコーダーとして十数案件ほど制作した経験があるからです。多くのスキルを持った社員を作るという、ティファナ・ドットコムの方針のもと、制作も出来るコンサルティングになったため、技術的な知識も豊富なのです。今では「制作を受けないか?」という話をもらっても断っていますが。(笑)

関連するサービス

ホームページ制作

Webデザイン制作

レスポンシブWebデザイン制作

「ハッカソン」って何?知らないと恥ずかしい?IT業界でよく聞くコトバ前のページ

ターゲットを見極めてWebサイトの売り上げ大幅アップ!「男女」のニーズを把握する次のページ

ピックアップ記事

  1. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  2. 新型コロナウイルスで日本の働き方改革が起こる
  3. 新しい販売形態であるDtoCについて考えてみる
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    色彩や配色を勉強するならコレ!古き良き日本文化を今に生かす

    人は誰しも何かをデザインしています。「デザインなんてしたことない」…

  2. Web関連

    システム化されたサイトとリッチスニペットの相性が良い理由

    こんにちは、晩酌は竹鶴ハイボール一択 SEの岸沢です。竹鶴ハイ…

  3. SEO関連

    ブログを書く時に注目すべきSEO対策まとめ~後編~

    前回の続きで、ブログ×SEO対策後半です。前半は記事作りからブログ…

  4. Web関連

    WEBサイトは両利き用?

    あなたは利き腕はどちらですか?今回はWEBサイトが利き腕を考慮…

  5. Web関連

    広告によるストレスを減らすネイティブ広告

    Webサイトを見ているとたくさんの広告を見かけると思います。W…

  6. Web関連

    売り上げ(コンバージョン・問い合わせ数)を上げたい

    戦略的な導線設計が、売上アップに繋がるコンバージョンまでの道のりを…

おすすめ記事

最近の記事

  1. キャッシュレス決済で財布を持たずにお出かけできる時代がやって…
  2. 「モノ」から「コト」へ。変わる購買理由。
  3. 家で学ぼう
  4. まるでおうちがアクアリウム?家から楽しめるオンライン水族館!…
  5. キャッシュレス決済とAIとコンビニ(とわたし)

アーカイブ

  1. Web関連

    採用担当者必読!リクルートサイト×インフォグラフィック
  2. Web関連

    ツンデレ美少女を振り向かせる!?マーケティングで悩んだら、基礎に立ち返るべし
  3. Web関連

    web制作会社が紹介するW3Cチェック(validator)の使い方
  4. Web関連

    ビッグデータの活用事例 ~売上アップに貢献した事例~
  5. Web関連

    【パララックスデザイン】Web制作におけるメリットとデメリット
PAGE TOP