スクリプト初心者なのですが、

スクリプトについて教えて頂きたいのですが、
横の解像度が
1024px以上、1280pｘ以下のときはdesign-1.css
1280未満から上はdesign-2.css
を読み込ませるには、どのようにｈｔｍｌへ記述すればよろしいのでしょう？
色々調べてみたのですが、解決できず悩んでおります。
よろしければ記述方法を教えていただけませんでしょうか？
よろしくお願いいたします。

No.2 ベストアンサー 回答者： Chaire 回答日時： 2011/09/12 20:39

JavaScript は関係ないです。

<link rel="stylesheet" type="text/css" href="design-1.css"
　media="only screen and (min-device-width: 1024px) and (max-device-width: 1280px)">

<link rel="stylesheet" type="text/css" href="design-2.css"
　media="only screen and (min-device-width: 1281px)">

詳しくはメディアクエリ（Media Queries）で調べて下さい。

---
もっとも、メディアクエリは比較的新しいブラウザしかサポートしていません（モバイル Opera などは早期からサポートしていましたが）。そこで、三つの方策が考えられます。

(a). メディアクエリをサポートしない古いブラウザ向けにはシンプルなスタイルだけを提供する（メディアクエリをサポートしないブラウザは media="only..." を読み込まないので、スタイルが混ざる心配はない）。

(b). 古いブラウザでもメディアクエリを動かすスクリプトを使う。

(c). メディアクエリに関係なく、screen.width/availWidth で判断するスクリプトを使う。

私のお勧めは (a) です。スタイルを適用できるかが、スクリプト（の有効・無効）に左右されるようなことは避けるべきです。どうしても、ということなら (b)。最後の（あまり当てにならない）手段として (c) です。

この回答へのお礼

お急がしいところ、ご回答ありがとうございます。
早速、調べさせていただきました。
メディアクエリとはｃｓｓ3になるのですね。
まだまだ、勉強中なものでChaire様のような、ご回答をいただけるとても助かります。
本当にありがとうございました。
また、何かございましたら、ご教示の程よろしくお願いいたします。

お礼日時：2011/09/12 21:33

No.1 回答者： SAYKA 回答日時： 2011/09/12 17:11

どちらかというと　両方のCSSを読み込んでおいて別々のIDで設定。

bodyまたはhtmlのIDを解像度によって切り替える　ってやり方のが早いと思うよ。

この回答への補足

早速のご回答ありがとうございます。
そのような方法もあるのですね・・・
記述は難しいのでしょうか？

補足日時：2011/09/12 18:29