締切済み

ブラウザ切り替え

2012/04/04 01:29

CSSでブラウザごとにデザインを切り替えることはできますか？

te398e
お礼率0% (0/15)

CSS
回答数5
ありがとう数1

みんなの回答 （5）
専門家の回答

みんなの回答

history0612
ベストアンサー率0% (0/0)

2012/08/16 13:14 回答No.5

他の方たちはCSSハックのことを説明していますが、対応しない場合があります。そこでjavascriptを使用します <script> myBsr = navigator.appName; // getting browser name myAgent = navigator.userAgent; // infomation myTop = myAgent.indexOf("Opera",0); // OP if (myTop == -1){ // OP myTop = myAgent.indexOf("MSIE",0); // IE if (myTop == -1){ // IE myTop = myAgent.indexOf("Mozilla/",0); // NN if (myTop == -1){ // NN myVersion = ""; }else{ // NN myLast = myAgent.indexOf(" ",myTop); myVer = myAgent.substring(myTop+8,myLast); // NN myVersion = " Version " + myVer; } }else{ // IE myLast = myAgent.indexOf(";",myTop); myVer = myAgent.substring(myTop+5,myLast); // IE myVersion = " Version " + myVer; } }else{ // OP myBsr = "Opera"; myLast = myAgent.indexOf(" ",myTop+6); myVer = myAgent.substring(myTop+6,myLast); // OP myVersion = " Version " + myVer; } </script> をhead内に書きます、後の処理は簡単です。 <script> if (myBsr == "Opera") { document.write("<link rel='stylesheet' type='text/css' href='オペラで使うスタイルのURL'>"); } if (myBsr == "Netscape") { document.write("<link rel='stylesheet' type='text/css' href='ファイアフォックスやサファリで使うスタイルのURL'>"); } if (myBsr == "Microsoft Internet Explorer") { document.write("<link rel='stylesheet' type='text/css' href='IEで使うスタイルのURL'>"); } </script> をheadかbodyに入れます。これで使い分けることが出来ると思います

lilillllililili
ベストアンサー率71% (23/32)

2012/04/04 12:07 回答No.4

CSSハックを利用することにより簡単に実現できます。私はよくIEだけに反映させるために、 _color: blue; のようにアンダーバーを入れたりします。たとえば、次のようにするとFireFoxのみスタイルシート（color: red）が反映されます。 <style> #help_me, x:-moz-any-link { color: red; } </style> CSSハックの一覧は次のサイトが見やすいかと思います。 > http://www.webcreatorbox.com/tech/css-hack-list/ ただし、ブラウザの仕様変更などにより利用できなくなる可能性もあります。より確実に切り替えたい場合、JavaScriptでブラウザごとに表示を変えるような仕組みにするべきだと思います。該当するブラウザの出力に document.write('<style>#help_me { color: red; }</style>'); などとすると手軽に切り替えられます。 > http://d.hatena.ne.jp/Naotsugu/20110927/1317140891

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/04/04 08:39 回答No.3

　そもそも【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より　ですから、ユーザーエージェントごとにスタイルシートを変えるのは一般的に行われています。たとえば、『6.13 出力メディア ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#h-6.13 )』にあるように、screen,tty,tv,projection,handheld,print,braille,aural用にスタイルシートを用意しておく。特に印刷用のスタイルシートや携帯電話用のスタイルシートは用意しておくべきでしょう。方法は「14.4.1 メディア依存のカスケード ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.4.1 )」、さらに携帯電話、スマートフォンとか。　ブラウザが、上で言うscreenメディア用のブラウザと言うことでしたら、スマートフォンのブラウザもscreenメディアに分類されますから、ディスプレイの巾に合わせてスタイルシートを切り替えるなども行われています。　さらに、パソコン用のブラウザによって切り替えるなら、サーバーへの要求ヘッダに記載されているHTTP_USER_AGENTを参照してサーバーで動的にHTMLを作成し、<HEAD>内の<LINK>要素を書き換えることや、javascriptを使って<LINK>の内容を書き換えることもできるでしょう。いずれにしても、サーバー側、ないしjavascriptひとつを書き換えれば、すべてのページに適用させることもできます。　代替スタイルシートを用意してユーザー側に切り替えてもらっても良い。　結論は「可能です」かな

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/04/04 06:49 回答No.2

CSSハックを駆使すれば可能ですが、 CSSハック自体、ブラウザのアップデートで使えなくなる可能性の方が高いですから、 Firefox11は独特の表示になっていたのにFirefox12でChromeと同じになった、ということも起こりえます。また、ブラウザバージョンアップでそのバージョン用のハックがなくなる可能性もありますので、 CSSだけで行おうというのは、現実的ではないと思います。