レスポンシブwebデザインでのIE対応について

質問

レスポンシブwebデザインでサイト制作する際、CSSのIE対応はどこまでやるべきか悩んでいます。
お詳しい方々、是非アドバイスをお願いします。

現状の対応としては・・・

IE9　→　他ブラウザ同様にレスポンシブ対応
IE8　→　レスポンシブ非対応・IE専用CSS（PCサイズ版）を適用
IE7　→　完全無視
（IE7はttp://www.ajike.co.jp/2012/08/browse_share201207/やその他複数のデータを基に、完全無視で問題ないと判断しました）

としております。

そこで作っていてふと想ったのですが、タブレット端末やスマートフォン端末では実質的にIEではなくなるので、結局IE9をレスポンシブ対応させる意味がないのではないか？
なら、IE8と同様にIE用のCSSを適用させるだけで良いのではないか？
と想ったのですが、どうなんでしょうか？

ここはやはり将来性を鑑みてIE9は現状のままレスポンシブ対応させておくべきなのか・・・
それともIEは9だろうと8だろうと一括でIE専用CSSを適用させてレスポンシブ対応させないのか・・・

初心者の私にはIE用のCSSですら恐ろしくめんどくさいというか難しく、IE9をレスポンシブ対応させるだけでも四苦八苦しております。。。

いったいどうしたら良いでしょうか？
是非ぜひ、ご教授願います。

回答No.4

ORUKA1951 · ベストアンサー

矛盾しています。固定デザインで作成する場合は、対応ブラウザを想定して作成しますが、対応ブラウザの制限をなくするためにレスポンシブにするのです。
　基本は、ウェブページをウェブ標準で製作することです。HTML4.01strictないしXHTML1.0strict,XHTML1.1で製作して、正しくDOCTYPEスイッチ ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )でIE7であっても標準モードで動作するようにすれば、IE7もクリアできるはずです。

　その上で、スタイルシートは、まずリキッドレイアウトで製作します。IE7云々は、IEが互換モードで動作するときのサイズの算出方法のバグが最大のものでしょう。すなわち、paddingを極力使わずmarginで対応するなどチョッとした工夫でカバーできるはずです。

　HTMLについては、strictないしHTML5(IE8以前に対応させるjavascriptが必要)で作成し、IE6も含めてリキッドデザインで配置し、その上で絶対に必要なもののみレスポンシブでスタイルを切り替える手法で良いでしょう。
★そもそも、同じデザインにする必要がない=異なるデザインにしてコンテンツが利用できるようにしようと言うのがレスポンシブデザインなのです。

　たとえば、先日回答した、ちょっと派手なメニュー「ポップアップメニューの作成方法を教えてほしい - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7802033.html#a2 )」ゃ「CSSで背景色のwidthが指定できません。 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7791851.html#a3 )」は、レスポンシブすら不要なデザインです。

　そもそもHTMLは
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　なのですから、ブラウザをIE8以上とモダンブラウザ限定として考えることすら、本筋から離れているのですよ。すべてのユーザーエージェントで利用できるように利用するために、HTMLを使用しウェブページを作成するのですから。
　それがいとも簡単にできるのがHTMLの利点なのです。

　まず、デザインを考えずに率直にHTMLを作成することから再出発すると意外と早く目的は達成できると思います。(上記サンプルのHTMLは極めてシンプルでしょう。
1) 文書構造とプレゼンテーションを分離すること。
　　Lynxのようなテキストブラウザで表示を確認すること。
2) プレゼンテーションはmedia別スタイルシートを利用して端末ごとに設定する
3) 印刷用スタイルシートは兎も角、視覚系端末用はリキッドデザインとすること
・・・ここまでは古い技術です・・・
4) そのうえで、必要最低限のもののみレスポンシブで調整する。

お礼

ご丁寧なご回答、ありがとうございます。

＞IEが互換モードで動作するときのサイズの算出方法のバグが
＞最大のものでしょう。
＞すなわち、paddingを極力使わずmarginで対応する
＞などチョッとした工夫でカバーできるはずです。

これです！！！悩ましかったのは、まさにこれでした！！
極力marginで対応すれば良いわけですね。わかりました。ありがとうございます。早速修正してみます！

＞HTMLについては、strictないしHTML5
＞(IE8以前に対応させるjavascriptが必要)で作成し、
＞IE6も含めてリキッドデザインで配置し、
＞その上で絶対に必要なもののみ
＞レスポンシブでスタイルを切り替える手法で良いでしょう。
＞★そもそも、同じデザインにする必要がない
＞=異なるデザインにしてコンテンツが利用できるようにしよう
＞と言うのがレスポンシブデザインなのです。

な！なるほど！！基本はリキッドで組み、必要な箇所だけレスポンシブ。その発想はありませんでした！！
レスポンシブwebデザインだから何もかも全てレスポンシブに・・・という固定概念で凝り固まっていました。
私の発想・考え方そのものがレスポンシブではなかった・・・。

そのお言葉を頂き、制作に光がさしました！どうすれば良いか視えてきたような気がします！ありがとうございます！

現状、HTMLはHTML5で作り、CSSはCSS３の技術は一切使わず通常のCSSのタグだけで作りました。もう本当にブラウザの差が悩ましくて、いっそIEを切り捨てるという方向に意識的にも無意識的にも行っていたような気がしました。

＞ブラウザをIE8以上とモダンブラウザ限定として考えることすら、
＞本筋から離れているの

やはり他の方も追っしゃている通り、ブラウザを限定するという発想そのものがよろしくないんですね。
お詳しい方々皆様が全く同じ事をおっしゃるということは、それが正解でそれが真実、少なくともハズレではなく、最低限厳守すべき原則みたいなもの、という事ですよね！

＞1) 文書構造とプレゼンテーションを分離すること。
＞Lynxのようなテキストブラウザで表示を確認すること。
＞2) プレゼンテーションはmedia別スタイルシートを利用して端末ごとに設定する
＞3) 印刷用スタイルシートは兎も角、視覚系端末用はリキッドデザインとすること
＞4) そのうえで、必要最低限のもののみレスポンシブで調整する。

具体的なアドバイス、本当にありがとうございます。
さっそく言われた通りに、【率直にHTMLを作成することから再出発】してみます！！

＞再出発すると意外と早く目的は達成できると思います

今さっくり頭の中で上記を考えてみたんですが、本当に、おっしゃられた通りプレゼン部分とそうでない共通部分を切り分け、素直に考えてみると、今まで悩んでいた部分、苦労した部分が一気に解決できそうです！！！！
す・・・すごいです！！

素人の私でも大変わかりやすく、大変参考になりました！
本当にありがとうございます。

回答No.5

ORUKA1951

No.4です。
　誤解をひとつだけ解いておきます。
　レスポンシブデザインにすると労力が増える--なんてことはありません。基本はリキッドですから、端末ごとにスタイルシートを記述する手間がそもそもなくなります。それにディスプレイの状況に合わせてスタイルシートを切り替える記述を加えるだけです。
・HTMLが極めてシンプルになります。
・それによってスタイルシートもシンプルにわかりやすくなります。
　下記も以前書いたサンプルですが
円形の配置にするコーディングについて - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7649067.html )
　では、リキッドですからスマホ用にスタイルシートを用意する必要すらないでしょう。それでいて印刷プレビューで見ると、まったく異なるデザインになるはずです。--このユーザーエージェントによる切り替えの拡張がレスポンスデザインなのです。
　このサンプルをテンプレートに、内容を書き換えるのは誰でもできるでしょう。

お礼

重ね重ねご回答ありがとうございます。

＞レスポンシブデザインにすると労力が増える
＞なんてことはありません。基本はリキッドですから、
＞端末ごとにスタイルシートを記述する手間がそもそもなくなります。
＞それにディスプレイの状況に合わせて
＞スタイルシートを切り替える記述を加えるだけです。
＞・HTMLが極めてシンプルになります。
＞・それによってスタイルシートもシンプルにわかりやすくなります。

そうだったんですね。
う～ん。自分の場合、普通のサイトを作るよりもむしろ労力か数倍化してしまいました。ということは、決定的な何かしらの問題がある、という事ですよね？

ん～～～～。何が原因なんでしょうか・・・。

ああ！

今、ORUKA1951様にご指摘頂いた事を確認しながらコードをみていたのですが、もしかしたら、自分の制作しているサイトは、真のレスポンシブwebデザインのサイトではなく、単に端末サイズによって表示を変えるだけのなんちゃってレスポンシブwebデザインなだけかもしれません！

ようは、１つのサイトを複数の端末に対応させれば良いだけなのに、【複数の端末での表示】に拘りすぎ、わざわざ端末毎に複数のサイトを作るレベルでのCSS内容でした！！
共通内容なのにわざわざ別々に記述していたり・・・
無駄の積み重ねをしていただけでした。

【基本はリキッドで必要な箇所だけレスポンシブに個別対応】という事の意味、ORUKA1951様がおっしゃっている事の意味がやっとわかってきました！

どうやら私はレスポンシブwebデザインの根本をを全く理解してないで作っていたようです。

これは・・・すごい。

ご指摘頂いた事を理解して修正すれば、とてつもない労力削減・効率管理ができそうです！
そうすると、合わせてIEだろうとChromeだろうとなんだろうと、ブラウザ云々を気にするのは全くもってナンセンスであり、それは小技でカバーさえすれば良い！というのも理解できました！！

どうやら私は、制作方法の起点から間違い、結果大幅に視点や問題点がズレていたようです。
大変参考になりました！本当に本当にありがとうございます！

回答No.3

神崎 渉瑠（@taloo）

質問に答えていたような、答えていなかったような、、、

>いったいどうしたら良いでしょうか？
どうもこうも、あなたのサイト（あなたの物）ですから、好きにしてくださいとしか言いようがないです。

ユーザビリティーにおいては、どんな環境でも読めるようにする事が推奨されます。
推奨されているからといって、がんばって作るも良し、アクセスがないんだから無視しても問題無しと考えても良し。

プロなら制作依頼者が作れと言えば作りますし、作らなくて良いと言えば作りません。（料金などと相談ですけどね。）

お礼

さらなるご回答、ありがとうございます！

＞ユーザビリティーにおいては、どんな環境でも読めるようにする事が推奨されます。

その通りですよね。
ユーザビリティを再認識させらたお言葉、大変痛みいります。

やはり、なんとか努力して【どんな環境でも読める】サイトを目指します！

＞プロなら制作依頼者が作れと言えば作りますし、作らなくて良いと言えば作りません。（料金などと相談ですけどね。）

正直・・・制作中は絶対に飛ばない、かつ、機密情報を絶対にもらさない、仮にもれても金額で完全保証、という内容を100％私の希望通り契約書に盛り込める制作会社様があれば、多少高くとも今すぐに依頼したいのが本音です・・・。

回答No.2

神崎 渉瑠（@taloo）

No.1です。
読み返してみたら何か変なので、訂正＆補足です。

>この言葉はウェブページにかかる言葉で、ブラウザがデザイン対応非対応という言葉は使えません。
この言葉というのは、レスポンシブデザイン（レスポンシブウェブデザイン）という言葉の事です。

>レスポンシブデザインに対応したウェブページは、全てのブラウザ、環境で問題なく閲覧可能です。
レスポンシブデザインで「作成」したウェブページは、全てのブラウザ、環境で問題なく閲覧可能です。

「このサイトはIE8対応です。それ以外のブラウザで見ると・・・」というような言葉、作成方法があるとおり、
特定ブラウザを無視するという方法についてはユーザビリティー上推奨はされていませんが、製作コストなどの問題も有りますし、私は何も言いません。

>初心者の私にはIE用のCSSですら恐ろしくめんどくさいというか難しく、IE9をレスポンシブ対応させるだけでも四苦八苦しております。。。

レスポンシブデザインの製作労力は、一般的な製作労力の約2倍から3倍です。
通常、レスポンシブデザインで作成する場合は、スマートフォン、タブレットPC、デスクトップ／ノートPCの３種類のデザインを作成し、
デスクトップ用に関しては、旧IE、新IE、Firefox、Webkit、Operaの５種類です。
（この５種類は旧来のサイト設計と同じですので、レスポンシブ云々は関係ありません。）

つまり、レスポンシブデザインにする事により、チェックしなければならない環境／ブラウザの種類が
スマートフォン、タブレットの２種類増え、しかも専用デザインを作るという事になりますから、
その分、労力が増えるという事になります。

もしタブレットPC用IE、デスクトップIEだけを別のデザインにするのであれば、デザインは４種類以上、労力はさらに増える事になりますね。
ただ、ブラウザごとの分岐は、IEだけならコンディショナルコメントが有りますので、容易だと思います。

>http://togetter.com/li/406519
>メンテナンスが楽
タブレットPC用のデザインにミスがあった場合は、タブレットPC用のCSSファイルだけを更新すれば良いですから、
それによりデスクトップPC用デザインに影響がなく、表示チェックもタブレットPCだけを行えば良い、というメリットが有ります。
それを「メンテナンスが楽」とおっしゃってるのだと思いますが、
製作労力とメンテナンス労力は別物です。

レスポンシブデザインでの製作は、デザインの中でも最も大変な作業だと思います。

お礼

重ね重ね、ご回答ありがとうございます。

＞「このサイトはIE8対応です。それ以外のブラウザで見ると・・・」
＞というような言葉、作成方法があるとおり、
＞特定ブラウザを無視するという方法については
＞ユーザビリティー上推奨はされていませんが、
＞製作コストなどの問題も有りますし、私は何も言いません。

やはり推奨はされないですよね。わかりました。
本来なら外注すべきものを私自身が作っているので、正直、本音は外注したい所です・・・。

＞レスポンシブデザインの製作労力は、一般的な製作労力の約2倍から3倍です。
＞製作労力とメンテナンス労力は別物です。

もうまさに、まさに！！！！つくづくおっしゃる通りだと感じました。
実は、レスポンシブwebデザインで作ろうと踏み切ったのは、メンテナンスがやりやすいから、というだけの安易で軽い理由のみで決めてしまいました。
今、大いなる後悔をしています・・・。
たった１ページ作るのにCSSファイルを何枚も作り、ブラウザ別ならまだしも端末別でいちいち確認したりと、本業が忙しいため深夜ぐらいしか時間が作れず、制作がなかなか先に進みません。私の技術レベルが低いため、なおさらです。。。

レスポンシブwebデザインのサイトについて、つくづく実感されられるお言葉、大変ありがとうございました。参考になりました。

回答No.1

神崎 渉瑠（@taloo）

レスポンシブデザインという言葉（流行語）を誤解されてませんか？

>IE9　→　他ブラウザ同様にレスポンシブ対応
>IE8　→　レスポンシブ非対応・IE専用CSS（PCサイズ版）を適用

この言葉はウェブページにかかる言葉で、ブラウザがデザイン対応非対応という言葉は使えません。

レスポンシブデザインに対応したウェブページは、全てのブラウザ、環境で問題なく閲覧可能です。

本来HTMLファイルというのは、どんな環境でも問題なく読む事が出来るように作るべきで、
たとえばfloat: leftやwidth: 50%のように、ウインドウサイズが小さければ段組み表示をやめたり、段組み幅を小さくして（左右スクロールなしに）閲覧できるようにするのも、レスポンシブデザインの一種だと思います。

アクセシビリティー、ユーザビリティーという言葉で調べてみてください。
IEのバージョンとかは関係なく、どんな環境にでも対応できる方法がたくさん出てくると思います。

お礼

ご回答ありがとうございます。
お礼が遅くなってしまい、申し訳ありません。

言われてみればそうですよね。
確かに、たいていのブラウザで見れました。

アクセシビリティという言葉、早速調べて勉強してみます！

ご丁寧にありがとうございます！