• ベストアンサー

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

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

  • HTML
  • 回答数3
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

>それぞれ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のようにフルパスで指定したら読み込めるのかとか あるいは、こうした切り換えを実行しないで単体で、スタイルシートの設定をした場合にスタイルが反映されるのかとか調べてみて下さい。 ＞もしも原因が解りましたら、教えてください 書いているサンプルは、一応ウチの環境では動くのものですので、 ウチではそちらで動かない原因はわかりません。 使用しているＯＳやブラウザなどの環境と、実際に試してみられたソースなど挙げていただければわかる人もいるかもしれません。

nomura0910
質問者

補足

それでは、実際の表記を乗せたいと思います。 どうやら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"> <!-- TemplateBeginEditable name="doctitle" --> <title>タイトル</title> <!-- TemplateEndEditable --> <link id="myStyle" rel="stylesheet" type="text/css" href="../css/defaultStyle.css" /> <script language="JavaScript"> <!-- if(navigator.platform.toUpperCase().indexOf("MAC")!=-1){ document.getElementById("myStyle").href="../css/mac.css"; } else if(navigator.platform.toUpperCase().indexOf("WIN")!=-1){ document.getElementById("myStyle").href="../css/win.css"; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --> </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を当てようと考えました。 長くなってしまったので、時間を取らせてしまって申し訳ありません。 なにか、解りましたら、お願いします。 それでは、失礼します。

その他の回答 (2)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

<head>～</head>に 以下の様に書いて下さい。 ------------------------- <link id="myStyle" rel="stylesheet" type="text/css" href="defaultStyle.css" /> <script type="text/javascript"> <!-- if(navigator.platform.toUpperCase().indexOf("MAC")!=-1){ document.getElementById("myStyle").href="mac.css"; } else if(navigator.platform.toUpperCase().indexOf("WIN")!=-1){ document.getElementById("myStyle").href="win.css"; } //--> </script>

nomura0910
質問者

補足

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

  • Java-Java
  • ベストアンサー率41% (14/34)
回答No.1

どちらかの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(); } こんな感じでどうでしょうか？

nomura0910
質問者

補足

私の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) 何が原因か、もし解りましたら教えてください。 よろしくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • ＣＳＳとMacの関係

    ＣＳＳの制御で、 外部ＣＳＳ マック用に css/style_mac.css に body {font-size: 12pt;} td {font-size: 12pt;} ウイン用に css/style_win.cssに body {font-size: 10pt;} td　　{font-size: 10pt;} と記述しています。 がプラウザで確認したところ、 windows　IE5.0は制御されていますが、 Mac IE5.0で制御されません。 HTMLの呼び出しは、 <SCRIPT LANGUAGE="JavaScript"> <!-- if(navigator.appVersion.indexOf("Mac",0) != -1){ document.writeln('<link rel="stylesheet" type="text/css" href="css/style_mac.css">'); } else { document.writeln('<link rel="stylesheet" type="text/css" href="css/style_win.css">'); } //--> </SCRIPT> と記述しています。 そもそもjavaがわからないので どこを直せばMacでも制御されるのでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • windowsとマック

    JAVA SCRIPTってマックでは基本的に使えないのですか？ ホームページでwindow open で小窓を出しているのですが、マックでは見れないみたいで困っています。 あと、最近のことですがwinでつくったCD-Rを、 マックではみることができませんでした。 これは単に私のCDRの作成方法が悪かったのでしょうか。 winでつくったCDをマックで見れないってことは あるのでしょうか？

  • CSSについて

    CSSを勉強したいのですがどこから手をつければいいか分かりません。 お勧めの本やCSSを紹介 解説しているサイト等はご存知ないでしょうか？ CSS以外にもJavaやPHP、Flash、webデザイン関連についてもお勧め等があればよろしくお願いいたします。

  • safari でcssがききません！

    こんばんは。 仕事でサイトを作っているのですが、Macのsafariでだけまったくcssが効かないという現象にぶちあたってしまいました。 下のように、外部cssを読み込み、文字サイズはcss.jsでwin、mac向けに指定してます。（文字サイズは表示されてます） <link rel="stylesheet" type="text/css" href="css/default.css"/> <script language="javascript" type="text/javascript" src="js/css.js"></script> Macのfirefoxではなんの問題もありません。 cssは覚えたてて経験浅く、どのあたりに原因があるのかさっぱり分かりません…。 どなたか、解決法、参考サイトなどありましたら、教えてください！ よろしくお願いします。

  • javaスクリプトでcssを制御しているのですが、サーバーにアップするとcssが聞きません。。。

    すいません。javaスクリプト初心者です。 javaスクリプトでcssを制御しているのですが、サーバーにアップするとcssが利きません。。。 // set Variable var csspath = サーバーのipアドレス/scripts/css/'; // スタイルシートの場所（ホスト階下の場所） var defhost = URL'; // ドメインを自動で取得できなかった場合のホスト（ホストだけ！） var gethost =true; // 自動でホスト名を取得する場合は「true」、以外は「false」 var cssTags = <link rel="stylesheet" type="text/css" href="'; としているのですが、駄目です。 もし解決方法をご存知であれば、お教えください。

  • macで見たＣＳＳで作られたページについて

    今までテーブルレイアウトをしてきましたが、 ＣＳＳレイアウトに移行しつつあります。 WIN XPで作成しているのですが,MACのIEで見るとレイアウトが崩れます。WINのIEではエラーはないんです。 MACの方だとスペースや余白などが失われてレイアウトが崩れているようです。 また、ココログのブログなどもずれたりしてレイアウトが崩れます。 様々なブラウザに対応するＣＳＳを使うにはどうしたらいいでしょうか。 わたしは、「”CSSレイアウ践講座”　CSSレイアウトでSEOに強く、ソースも軽く、表示も速いホームページを作ろう」というページや「スタイルシートによるレイアウトデザイン見本帖」という本などを参考にしてやっています。

  • MacのfirefoxでCSSが読み込まれない件

    初めまして。 現在XHTML+CSSでサイトを製作しているのですが、ブラウザチェックの段階で、「MacのFirefox」だけCSSを読み込んでくれません。 MacのOPERA、SAFARI WinのFirefox、IE は問題なかったのですが、Macのfirefoxだけダメなんです。 記述は「@import」ですが、個別設定（３つのCSSファイルを個別にhtmlに指定）もやってみましたがダメでした。 このような事態になった方はいらっしゃいますでしょうか？ どうか、助けてください、よろしくお願いします。

    • ベストアンサー
    • Mac
  • CSSについて教えてください。

    CSSについて詳しく学びたいのですが、わかりやすくていい本ないですか？初心者なので初心者用お願いします。知っていたら教えてください。お願いします。 それとJavaはどういうことをするものなのですか？教えてください。 Javaについて詳しく学べてわかりやすい本知っていたら教えてください。初心者用でお願いします。

  • html、cssについて教えて頂きたいのですが

    現在ｈｔｍｌ、cssについて勉強中で、仮想サイトを制作してみました。ですが、ウインドウサイズを変更、ノートパソコンなどで表示するとレイアウトが崩れてしまいます。 解決方法となるとスクリプトを使用するしかないのでしょうか？

  • dreamweaverでCSSを作成したい！

    MacromediaのDreamweaverでWebデザインをしています。 DWの機能を使ってCSSを作成したいのですが、 作ったCSSがCSSスタイルのウィンドウに反映されないのです。 カスタムスタイルを作成したいのですが、 適用したい文字を選択して、CSSウィンドウ上の適用したいスタイル名をクリックすれば適用できる、はずなのに、 CSSウィンドウ上にどうやっても反映されません！ どうすればよいのでしょう…。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する