- ベストアンサー
ブラウザによってcssを分けることは可能なの？
レスポンシブウェブデザインの様に ブラウザによってcssを分けることは可能なのでしょうか？ IEなら１００px、ファイアフォックスなら５０pxなど。
- RDOROSKBAQ
- お礼率89% (146/164)
- CSS
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
CSSだけでは無理ですね。 JavaScriptを使って読み込む外部ファイルを変えるとかする必要があるでしょう。
その他の回答 (3)
- tracer
- ベストアンサー率41% (255/621)
レスポンシブ実装時と同じ要領で、mediaQueryにcssハックを記述することでブラウザを分けることができます。ただ、ブラウザを分けるということは、ブラウザのバージョンを分けることでもあり、もっといえば、今後出てくる新しいバージョンにも追随する必要もあるなど、いいことばかりではなく、世間的には悪手とされます。ご利用は計画的に。 http://qiita.com/katsunory/items/0cbb26bf23d961161642
お礼
ありがとうございました。
- dezimac
- ベストアンサー率56% (2365/4208)
100%完璧にというのは無理がありますが、 ブラウザというかレンダリングエンジン毎に癖があるので、それを逆手にとれば可能です。 「CSSハック」で検索すればいくらでも見つかります。 SafariとOpera,ChromeはWebKit（同じエンジン）をベースにしているから同じような動作をするし、FirefoxやIEは独自のエンジンなので動作は異なります。 また同じブラウザでもバージョン毎に異なることもあります。 一例） http://nelog.jp/css-hack-major-4-browzers JavaScriptでブラウザの種類を認識して適用するCSSを変える方法もあり。 一例） http://www.tam-tam.co.jp/tipsnote/html_css/post388.html
お礼
ありがとうございました。
関連するQ&A
- cssの今、一番旬なブラウザごとに違うcssをかける方法
現在４つのブラウザでほぼ同じような動作・見栄えをするサイトを制作しております。 ４つのブラウザとは（opera ie6 ie7 firefox）です。 そこで、現在、ie6だけで生じる表示崩れがあり、 そのcssの解決方法も発見したのですが、 それを解決すると今度は逆に、opera,ie7,firefoxでエラーが起きてしまいます。 読み込んでいるのは、一つの外部cssファイル、main.cssです。 現在考えられる解決方法としては、 １．ie6だけにcssを掛けるハック？ この場合、どのようにハックをかければいいのでしょうか。 色々しらべましたが、スターハックなど、現在使って良いハックというのは何になるのでしょうか。 具体的なcssコードは、以下です。 #pull a:hover{ display:block; /*以下ie6だけに指示したい命令 現状コメントアウトしています*/ /*margin-bottom:-20px;*/ } ２.ie6だけ別の外部cssファイルを読み込ませる。 ブラウザ毎に違うcssファイルを読み込ませることってできるのでしょうか。 （javascriptで判別するのでしょうか？） ie6 なら、main_ie6.cssを読み込み、 それ以外のブラウザなら main.cssを読み込ませる 一番ベストな方法を教えていただければと思います。
- ベストアンサー
- HTML
- CSSでブラウザ毎のフォントサイズを統一するには
IEとFireFoxなど、ブラウザによりフォントの初期サイズが違います。 IEのMideumがFireFoxではSmallに該当するようです。 pxなどの絶対サイズを利用せず、相対サイズで初期サイズをMidiumに統一対応したいと考えています。 何か良いcssハック方法はありませんでしょうか。
- ベストアンサー
- HTML
- CSSに関する初歩的な質問です
CSSを作成したのですが、１つのセレクタだけIEとFirefoxで表示にズレが生じてしまいました。 padding:0px 0px 0px 2px ; とするとこのセレクタのDIVタグがIEでは1px左へずれてしまいます。 padding:0px 0px 0px 3px ; とするとこのセレクタのDIVタグがFirefoxでは1px右へずれてしまいます。 １つのCSSファイル内で、同じセレクタが両方のブラウザに対応できるようにすることはできませんでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- 全てのブラウザで崩れないCSS
XHTML+CSSでウェブサイトを構築している者です。 サイトがある程度出来上がってきて各ブラウザでチェックをしていたのですが、検索エンジンのキャッシュで崩れていた事に気づきました。 崩れた原因を調べ、なんとか対応したのですが、FirefoxのGoogleキャッシュは崩れずIE7のGoogleキャッシュでは崩れています。 そこで、ブラウザ、OS、検索エンジンキャッシュで見ても崩れない(ブラウザごとの多少の違いはあると思いますが)CSSの決まりがあれば知りたいと思いました。 無料ブログサービス(アメーバ等)のデフォルトテンプレートはどんな環境でみても崩れないと聞いたことがありますが、可能なのでしょうか… ■作成したサイトをチェック→ブラウザ XHTML 標準モード+CSSハック使用 ・Win Firefox 2 3 ○ ・Win IE 6 7 ○ ・Win IE 5以下 CSS無効 ・Mac IE 5 CSS無効 ・Win Opera 9 ○ ・Win Safari 3 4 ○ ■作成したサイトをチェック→キャッシュページ 後方互換モード ・FireFox3でGoogleキャッシュを見たとき→○ ・IE7でGoogleキャッシュを見たとき→崩れる 原因はIE7の後方互換モードに対応できていないことだと思います。 IE7後方互換モードに強いサイト等を紹介してもらえたら嬉しいです。 よろしくお願いします！
- 締切済み
- ブログ
- CSSでmarginを指定すると、表示の仕方がブラウザによって変わってしまいます。
はじめまして、CSS初心者です。 お聞きしたいことがあります。 ---CSS--- body{ margin:0px; padding:0px; } #formbox{ width:750px; height:155px; } #box01{ margin-left:30px; width:280px; height:50px; } ---HTML--- <div id="formbox"> <div id="box">ほげほげ</div> </div> というHTMLをIE6.0とfirefox1.5で表示させたときに、 <div id="box">のmargin-leftがIE6.0だと60pxぐらいになってしまいます。firefoxでは、30pxとられているようなのですが…。 IE6.0とfirefox1.5で誤差が生じしてしまうのはなぜなのでしょうか。 どなたかご教授お願いできないでしょうか。 よろしくお願い申し上げます。
- ベストアンサー
- HTML
- 各ブラウザにおいて、表示できるCSSとできないCSS
こんにちは。はじまして。 現在ブログを製作しております。 先日、http://www15.ocn.ne.jp/~mksozai/design/line.html こちらのサイトで、変わったＣＳＳを見つけ早速ブログのデザインに生かしてみようと導入しました。 ＩＥでは問題なく表示されるのですが、Firefoxでは効果が適用されません。。。 そのCSSは filter:alpha(opacity=100,finishopacity=0,style=1); こちらになるのですが、これをIE以外のブラウザにも効果を適用させる方法はないでしょうか？ これはIEのみ表示できるCSSだと解釈するべきなのでしょうか？ ご存知の方がおられましたら、教えていただけると幸いです。 よろしくおねがいします
- ベストアンサー
- HTML
- cssで指定した文字の大きさがIE6とIE7で違う
cssでレイアウトを指定したサイトを作りました。 IE6、Opera9、Firefox2でうまく表示ができました（微妙にFirefoxだけ文字の大きさが小さいですが、ほぼレイアウトにあっています）。 が、先日IE7で確認するとフォントサイズが大きくなっていました。 cssではfont-sizeを、bodyが12px、各id、classはそれぞれ11px、10pxとしました。 IE7だと13pxくらいに見えてしまい、レイアウトをはみ出て表示されています。 IE7をIE6と同じフォントサイズにするにはどのように指定すればよいのでしょうか？ ちなみに文字の大きさは固定でブラウザで大きさを変更できないようにしたいのです。 すみませんがよろしくお願いします。
- 締切済み
- HTML
- CSSハックの使い方を教えてください
CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・ そこで、この際CSSハックを使おうと思っています。 といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・ など個別のブラウザに異なったCSSを指定することができるのでしょうか？ 実際の記述方法を教えていただけないでしょうか？ 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・ ちなみに、この現象のほかの解決方法ってあるのでしょうか？ #wrapper{ position:relative; width:870px; margin:0px auto; text-align:left; } #foot{ position:relative; width:100%; height:auto; clear:both; }
- ベストアンサー
- HTML
- ＣＳＳレイアウト＝firefox3.0とfirefox3.5のブラウザ
ＣＳＳレイアウト＝firefox3.0とfirefox3.5のブラウザ表現の違いについて教えてください。 firefox（以下。ＦＦ）3.0と、3.5ブラウザの見え方の違いが発生してしまいました。 ＦＦ3.5基準だと、ＩＥ（6.0。7.0。8.0）でも問題なくみえますが、 なぜかＦＦ3.0だけ ＣＳＳレイアウトが 崩れています。 基本 ＦＦは準拠しているものとして 3.5基準で作っていましたが、 仇となってしまいました。（私の勉強不足ってのもありましたが） これは ハック等で問題は解決できるのでしょうか？ それとも、margin等の規格がＩＥバグのように 違うものになっているのでしょうか？ ご回答よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSのブラウザごとの表示の違い
ホームページを作った時に、IEで見たときと、Firefoxで見たときに、同じように見えるようにしたいと思っています。 ですが、CSSの解釈がブラウザによって違うため、そう簡単にはいかないと思います。（当然レイアウトをすべてCSSで記述した場合の話） 現在は、CSSでページレイアウトは出来るのですが、複数のブラウザで完全に一致したデザイン（段組み）を作るのは私の実力ではまだ無理です。 IE6はCSS関連のバグも多いですし、HACKと呼ばれるバグ回避方法があるのは知っています。 という訳で、フルCSSレイアウトで複数のブラウザで崩れないデザインを作れるようになるために、バグ情報やHACKなどの必要な知識を解説した本またはサイトを教えて下さい。
- 締切済み
- その他（プログラミング・開発）
お礼
ありがとうございました。