こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

レスポンシブwebデザインをIEに対応させる方法

レスポンシブwebデザインのIEへの対応について質問です。
XHTMLで作成したHPをメディアクエリを使用して、レスポンシブwebデザインにしたのですが、
IE8以下で全くCSSを読み込みません。
いくつかのHPを見て、header内に
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
を記述しているのですが、それでもうまくいきません。

CSSは外部ファイルで読み込ませてあり、
<link rel="stylesheet" media="only screen and (min-width: 481px)" href="style.css" />
このような形で記述してあります。ですので、
http://www.imaginationdesign.jp/blog/html5css3/1592/
これとも違うようですし、原因がわかりません。

どなたか原因がお分かりになられる方おりますでしょうか?

投稿日時 - 2012-08-30 16:06:09

QNo.7671657

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

そもそも、IE8以前は、
media="only screen and (min-width: 481px)"
という書き方に対応していません。
率直に
<!doctype html>
<head>
 <meta charset="utf-8">
 <title>・・・・</title>
 <meta name="description" content="">
 <meta name="author" content="IRUKA">
<!--[if IE]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
 <link rel="stylesheet" href="/CSS/persistent.css">
 <link rel="stylesheet" media="screen" href="/CSS/shape.css">

と記述したのちに、必要なら

 <link rel="stylesheet" media="only screen and

 で上書きします。

 本来は、それ(Media Queries)がなくても表示できるようにデザインするほうが圧倒的に楽です。
 元来、HTMLは『HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )』なのですから、スマートホンやPCのブラウザだけという狭い世界のものじゃありません。

 私は、さすがにXHTMLは必要もないし、古いので使っていませんが・・HTML4.01strictか、HTML5です。HPじゃなくウェブページのことだとして・・( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8#.E3.83.9B.E3.83.BC.E3.83.A0.E3.83.9A.E3.83.BC.E3.82.B8.E3.81.A8.E3.81.84.E3.81.86.E8.A8.80.E8.91.89 )

投稿日時 - 2012-09-03 17:08:14

あなたにオススメの質問