WindowsとMacで違うCSSを読み込ませたいです

解決済

質問者：nomura0910
質問日時：2005/08/11 19:23
回答数：3件

WindowsとMacで違うCSSを適用したいです。たぶん、Java scriptを使うのでしょうけど、本を見ても、よくいるサイトに行っても解りませんでした。(T.T)
誰か、解る方、乗っているサイトのURLだけでもかまいません。教えてください。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： BLUEPIXY
回答日時：2005/08/12 13:28

>それぞれ3箇所のhref=の部分をきちんと、場所を設定している以外、変えていないのですが

まず、それぞれの機種の判定をしているｉｆの中で
alert("mac");
とかで機種の判別ができているか確認して下さい。
これで判別ができていない場合、platformが予想する値になっていないと思われるので、
alert(navigator.platform);
などして、たとえばMacなどで、どう表示されるのかを調べて下さい。
あるいは、navigator.userAgent、に変えてみるとか
まず、機種判別ができていないと話になりません。
それが、ＯＫだったら
document.getElementById("myStyle").href
を設定した後読み出してみて、どうなっているか同様に表示してみて下さい。
../css/mac.cssなどのファイルがちゃんと設定できているか、読めているかという問題になろうかと思います。
例えば、同じフォルダにコピーをして
mac.cssの様に同じ階層として指定したら読み込めるのか
あるいは、http://www.～.ne.jp/css/mac.cssのようにフルパスで指定したら読み込めるのかとか
あるいは、こうした切り換えを実行しないで単体で、スタイルシートの設定をした場合にスタイルが反映されるのかとか調べてみて下さい。

＞もしも原因が解りましたら、教えてください
書いているサンプルは、一応ウチの環境では動くのものですので、
ウチではそちらで動かない原因はわかりません。
使用しているＯＳやブラウザなどの環境と、実際に試してみられたソースなど挙げていただければわかる人もいるかもしれません。

この回答への補足

それでは、実際の表記を乗せたいと思います。
どうやらMacでは、default.cssを読み込んでいるらしく、
Windowsでは、何も、cssを読み込んでいないようです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

<title>タイトル</title>


<link id="myStyle" rel="stylesheet" type="text/css" href="../css/defaultStyle.css" />

<script language="JavaScript">


</script>


</head>

---ｄｅｆａｕｌｔ.cssの表記---
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 3px;
background: url("../image01-top/lam-back.jpg") repeat-x;
}
body,td,th {
font-family: "ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3", Osaka;
color: #666666;
font-size: 14px;
}

---mac.cssの表記---
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 3px;
background: url("../image01-top/lam-back.jpg") repeat-x;
background-position: 0px 100px;
}
body,td,th {
font-family: "ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3", Osaka;
color: #666666;
font-size: 14px;
}

---win.cssの表記---
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 3px;
background: url("../image01-top/lam-back.jpg") repeat-x;
}
body,td,th {
font-family: "ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3", Osaka;
color: #666666;
font-size: 14px;
}

環境は、WindowsXP　IEの6.0
Macは、OS10.3 IEの5.2です。
Macで、バックグラウンドに使用しいる画像が、2ピクセルほど下にずれてしまい、対処法として、
別々のCSSを当てようと考えました。

長くなってしまったので、時間を取らせてしまって申し訳ありません。
なにか、解りましたら、お願いします。
それでは、失礼します。

補足日時：2005/08/12 14:41

通報する

- 0
- 件

通報する

No.2

回答者： BLUEPIXY
回答日時：2005/08/11 20:12

<head>～</head>に

以下の様に書いて下さい。
-------------------------
<link id="myStyle" rel="stylesheet" type="text/css" href="defaultStyle.css" />
<script type="text/javascript">

</script>

この回答への補足

こちらも試してみたのですが、やはりうまくいきませんでした。こちらは私の解釈では、

defaultStyle.cssとmac.cssとwin.cssの3種類を用意して、それぞれリンクさせるという事だと思うのですけど、上記と変えているところは、それぞれ3箇所のhref=の部分をきちんと、場所を設定している以外、変えていないのですが、ダメでした。もしも原因が解りましたら、教えてください。お願いします。

補足日時：2005/08/12 10:20

通報する

- 0
- 件

通報する

No.1

回答者： Java-Java
回答日時：2005/08/11 19:41

どちらかのCSSを先に書いて、JavaScriptで判定して別のCSSで上書くと簡単に出来ます。

下記は先にMac用CSSを書いて、ユーザーがWinだったらWin用のCSSで上書いています。

<link rel="stylesheet" href="mac.css" type="text/css">
<script src="script.js" type="text/JavaScript"></script>

「script.js」は下記です。

if (navigator.userAgent.indexOf('Win') != -1) {
document.write('<link rel="stylesheet" href="win.css" type="text/css">');
document.close();
}

こんな感じでどうでしょうか？

この回答への補足

私のJAVAに関する知識が少ないので申し訳ないのですが…うまくいかないのです。

まず、<head>の部分に
<link href="../css/mac.css" rel="stylesheet" type="text/css">
で、Mac用のCSSを読み込ませています。

次に、同じく<head>の<script language="JavaScript">
と</script>の間に、

if (navigator.userAgent.indexOf('Win') != -1) {
document.write('<link rel="stylesheet" href="../css/win.css" type="text/css">');
document.close();
}

と表記しています。
もちろん、mac.cssと、win.cssの両方を用意して、別々の内容を書いていますが、どうも、この場合にWindowsが、win.cssを読み込んでいないみたいなのです。(T.T)

何が原因か、もし解りましたら教えてください。
よろしくお願いします。