回答WAVE立川校卒業生へブログお問い合わせカレンダーレスポンシブWebデザインだから迷う?IEと共存するためのポイント!2件の返信レスポンシブWebデザインを考える際に、IE8以前(IE8~6)の古いブラウザについて、どのように対応するかを考えてみました。すれば、手間が少なく古いブラウザへの対策ができるのか?レスポンシブWebデザインを作る際の覚書です。考えるにあたって、下記の条件のクリアを前提としました。旧ブラウザはIE8~IE6を含める。IE8~IE6でもCSS3使ったデザインを行う。IE6でもpng画像を使用する。デバイスはスマートフォン、タブレット、PCの3種類を想定する。CSSはモバイルファーストを考慮にいれた記述方法とする。日本ではまだまだWebページを見るためにIEを使う人が多いです。デザイン面を考えるとCSS3を使っている場合、ChromeやFirefoxとIEを比べたときに見た目が変わってしまうことがあります。その辺りの事情は、見る人にはなかなか理解してもらえない現状もあるので、jsライブラリの利用で透過png画像やある程度のCSS3を使えるようにして解決してしまおうというワケです。制作者としてはモバイルファーストも意識したいという気持ちあったりします。レスポンシブに「必要なこと」「不要なこと」レスポンシブWebデザインと言うと、デバイスごとに異なるデザインになることに意識が向きがちです。過度に「レスポンシブ」というキーワードに振り回されていないか、制作の際に必要なこと不要なことをざっくりと切り分けてみました。「必要なこと」スマートフォン、タブレット、PCの異なるデバイス間で、それぞれに適したデザインで表示される。「不要なこと」PCでブラウザ幅を変えたときに、デザインが変わる。異なるデバイス間での表示に適したデザインにすることは必要なことですが、PCでブラウザを幅を変えた時にデザインが変わることは必ずしも必要なことには思えませんでした。その理由としては、PCではわざわざブラウザの幅を狭くして、タブレット用のデザインでWebページを見ることはほとんどないからです。queryに対応しているブラウザ「必要なこと」「不要なこと」の切り分けができれば、闇雲なレスポンシブに走ることもなく、デザイン、技術の面で必要な対応が見えてきます。PCでは、PC向けのデザインを見せる。(固定幅のデザインを見せることが出来れば良い)IE8以前のブラウザを搭載したスマートフォン、タブレットがない。「不要なこと」で切り分けたことを元に、PCでは固定幅デザインを見せるようにします。queryに対応する必要はなくなりますね。制作の際はIE8以前ブラウザ向けに、固定幅の専用CSSを用意して条件分岐コメントを使って読み込めば大丈夫です。(モバイルファーストなCSSの記述にしなければ、固定幅専用のCSSを用意する必要はなくなりますが、この辺は個人的なこだわりです。queryに対応していないブラウザは「background-size」にも未対応です。そのため、フルードイメージへの対応も難しく中途半端になってしまいます。queryにも対応しないという制作方針にしてしまうのも1つの方法かなと考えました。(でも、border-radiusなどのCSS3は使いたいので、その辺はjsライブラリで何とかしてしまいます)画像について考えると、「Retinaディスプレイとか高解像度ディスプレイはどうするの?」という疑問が出てきますが、長くなりそうなので、他の記事としたいと思います。ついて旧ブラウザがターゲットに含まれた制作が多いので、参加者のなかでは数少ない重度のpolyfill使いですが、lessの愛好者でもあります。AM投稿、ありがとうです。案件次第の部分と、制作側のポリシーを分けて考察してあるのが良いと思います。AM>タカハシ先生コメントありがとうございます。書き間違えていました。案件次第の部分が、ブラウザシェアの変化に伴い、少しでも制作側のポリシーに近づいてくれると良いなと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。DESIGNERの集まりです。ヘッダー画像をトップページにだけ表示させたい。