【レスポンシブOK】私はこれでhtml5とcss3をie8以下に対応させました。

【レスポンシブOK】私はこれでhtml5とcss3をie8以下に対応させました。

クソッ!
IEのクソッ!!

失礼しました。

最近、Wordpressのテーマを作りました。

でもIEを考えてなかったので一応確認したら案の定レイアウトは崩れてます。

面倒くさいし、ブスだからインターネットエクスプローラーは無視しようと思ってたんですが、チラチラ|ω・`)(←IE)こっちを見やがるから、
いやいやだけど対応させてみました。

ということで今回は、html5とcss3で作ったレスポンシブサイトを、
ブラウザ界のブスことInternetExplorerにも対応させてみようって話。

手を煩わせるんじゃないよ。まったく。
あんたかわいくないんだよ!

で、世間の方々を参考にしようと検索するとたくさん出て来ました。

[browser-shot width=”200″ url=”http://www.arch-web.jp/archives/771/” target=”_blank”]
IE8でも簡単にHTML5とCSS3に対応させる方法/アーチWeb制作室

[browser-shot width=”200″ url=”http://webmemo.biz/html5-css3″ target=”_blank”]
HTML5とCSS3をIE対応させるにはこの2つでいい?ブログを対応させる時に使った方法を書いたよ!/あかめ女子のwebメモ

などなど・・・。

どれも丁寧に説明されててわかり易かったんですが、なぜか自分の場合効かない。

なんで?ってことで、色々試した結果、以下のやり方でクリアできました。
自分みたいに効かない人もいるかもしれないので、私もこのブログに残しておきます。

ちなみにレスポンシブデザインでもOKでした。

やってみたIE対応方法

1.html5を有効できた「html5shiv」

1. html5shivをダンロードする

以前と設置方法が変わってます。
ダウンロード ⇒ html5shiv

2.ディレクトリに入れる

zipファイルを展開して、dist内にある【html5shiv.js】を任意のフォルダにアップロードします。
私は【js】フォルダの中にいれました。

3.<head>に読み込ませる。

で、<head>内に以下を追記します。

<!--[if lt IE 9]> 
<script src="js/html5shiv.js"></script>
<![endif]-->

▶ Check!

html5shivとhtml5shiv-printshiv.jsとの違いは印刷時の機能サポートがあるかどうからしい。
サイトの表示としてはどちらも問題ないようです。

2.css3を有効にできた「respond.js」

css-mediaquries.jsではなくこちらを使いました。

1. respondをダンロードする

レスポンシブ・ウェブデザインでも対応させることができるjsです。
ダウンロード ⇒ scottjehl/Respond – GitHub
(サイト右にあります)

2.ディレクトリに入れる

これも同じように、zipファイルを展開して【respond.src.js】を任意のフォルダにアップロードします。
html5shivと同様に【js】フォルダの中にいれました。

ちなみにrespond.min.jsとの違いはわからなかったけど、どっちでも大丈夫だった(自分の場合)
※ 追記 コメントで教えて頂きました。。
minは圧縮されてるファイルらしいです!知らなかったな~ははは(^_^;)
「(´ー`)/~~」さん。ありがとうございます!

3.<head>に読み込ませる。

これも<head>内に記述が必要です。

<script src="js/respond.src.js"></script>

meta要素を追加

ここからが本題なんですが、
上の2つをやってみたけどうまくいきませんでした。

で、以前作ったものを真似てみようってことで、昔レスポンシブサイトを作ったときのを記述と比較。

そうそう。これを ↓ 忘れてた。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

これを記述。
早めに読み込ませる必要があるので、今回はtitleの上に書いてます。

結果・・・見事IE8/7にも対応!⊂(^ω^)⊃ セフセフ!!

これは、IEのレンダリングが適用されるようにする記述で、IEで閲覧しててもGoogle Chrome Frameで表示してくれます。
詳しいことは・・・こちら
[browser-shot width=”200″ url=”http://www.ist-jo.in/archives/826″ target=”_blank”]

IE=edge はIEの最新のモードで表示させる記述です。
例えば IE=7 とすればIE7の標準モードの表示となります。

まとめ

これと。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

これ。

<script src="js/respond.src.js"></script>
<!--[if lt IE 9]> 
<script src="js/html5shiv-printshiv.js"></script>
<![endif]-->

を<head>に記述しました。

100%対応ってわけにはいきませんでしたが、自分の環境で確認してもレイアウト崩れもありません。
角丸も対応してるからこれでOKだと思います!
というかもうこれでよくね?!
やるだけのことはやったよ(´・ω・`)

ということで、これまで色々やっても対応出来なかった人は、X-UA-Compatibleを追記してみると良いかも!

IE6?無視無視!

次作ることがあったらIEはもう考えないようにしよう。。



[ad#ad-post-bottom]

気分に任せて更新中 ε-(/・ω・)/ トォーッ!!
follow us in feedly

11 Comments
  1. (´ー`)/~~ より:

    minは無駄なスペース等を削除して圧縮されていて中身を変えないで使う場合はこっちがいいかな。
    srcは無圧縮で中身を参考にするときに。
    minとついてるものはrespond以外にもあるよ。
    minとついてないのがあったらついてない方は圧縮されてない、ついている方は圧縮されてると思えばいいと思います。
    容量を比べてみるとわかりやすいかも。
    記事を参考にさせてもらいました。ありがとうございました。m(_)m

    1. shouken より:

      おおお。
      なるほどなるほど!
      そうなんだ!感動しました。

      言われてみると、他のでも見たことあるかも・・・。

      教えて頂き本当にありがとうございます!!
      また一つ勉強になりましたm(__)m

  2. 営業さん より:

    こんにちは!
    レスポンシブデザインの事を調べていて、このページを見つけました。
    タブレットやスマホでIE7~IE8というかIEを使用している人って居ないと思って自分はIEに関してはPC表示でいいやって割り切って制作しています。

    1. shouken より:

      こんにちわ!コメントありがとうございます!
      確かにタブレット・スマホのIEって無いだろうし、割りきってやった方がいいですよねー。
      自分はIEのPC表示自体が崩れまくってたので今回のような形をとりました^_^;
      未だに正しい対応方法はわかりませんが勉強していきます!

  3. akatsukisan より:

    こんにちは!
    レスポンシブデザインのことを調べて、こちらにたどり着きました。
    IEはほんと頭痛の種ですよね。
    Bootstrapのバージョンアップに伴って、一部切り捨てもやむを得ないわけですが。

    1. shouken より:

      こんにちは!
      やっぱり多くの方がIEには悩まされてるんですね。
      Bootstrapは・・・未だに難しそうで避けてます(^_^;)
      私的にはむしろ、こういう構築ツールや制作のプロの方からドンドン切り捨ての流れを作って欲しいです。
      まあそういうわけにはいかないんでしょうけど。。

  4. 通りすがり より:

    だけでは、Google Chrome Frameで表示してくれなかったはずです。下記のようにご修正をお願いします。

    1. shouken より:

      あれ?そうなんですか?

      「下記の修正」が記入されてませんが・・・非常に気になります。
      勉強のためご教授下さいm(__)m

  5. ピンバック: 【HTML5×CSS3×フラットデザイン】WordPressのオリジナルテーマを「1」から作る!【知識編】 | Syumart
  6. ピンバック: HTML5とCSS3をIE8に効かせようと色々やっていますが上手くいきません。 このサイト… | 新潟でワードプレスのホームページ制作はパーソン2パーソナルズ

通りすがり へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください