質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • CSS

    5592questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

各ブラウザでCSSを切り替えるには?

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 695

ryointhesky

score 54

利用するブラウザ(IE, Safari, Chrome等)によって、Webページのデザインを変えようと思っています。
CSS側でユーザーのブラウザを判断して、適用するパラメータを切り替える事は可能ですか?
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

CSSハックを使えばよいと思います。
どのブラウザのどのバージョンかは、ユーザエージェントで確認することができます。

以下はCSSのハックリストです

/***** セレクターのハック ******/

/* IE6 以前のもの */
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, Firefox, safari, Opera */
html>body #tres { color: red }

/* IE8, Firefox, safari, Opera ( IE 6,7以外のすべてのもの) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, Firefox 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, Firefox 3.5+ */
body:first-of-type #ocho { color: red }

/* safari3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}


/* safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* IE6-8以外のすべてのもの */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }



/***** アトリビュートのハック ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* IE6以外のすべてのもの */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- !importantとして作動します */
#veintesiete { color: blue !ie; } /* !のあとの文字列はなんでもいいです */
ソース(海外のリンクです): http://paulirish.com/2009/browser-specific-css-hacks/


プラグインを使いたければ海外のURLですが、これを参考にしてみてください。

http://rafael.adm.br/css_browser_selector/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    bootstrapでグリッドサイズの変更が効かない

    グリッドにcol-md-を指定しページが構成され、その後に、col-lg-を指定したのですが、まったく見た目が変わりません。 これは、特に変わらないものなのでしょうか。

  • 受付中

    スマホでユーザースタイルシートを適用することは出来ますか?

    スマホにユーザースタイルを適用したいです スマホでよく見るサイトが非常に見辛いのでそのサイトのみスタイルシートを変えることは出来るでしょうか? AppStoreでユーザースタイ

  • 受付中

    ヘッダーの色の変更 困ってます

    wordpressのcista テーマでホームページを作成してるのですが、ヘッターの色の変更の仕方がわかりません。

  • 受付中

    CSSでfloatしたもの同士、高さを合わせたい

    floatをleftとrightをしたdiv要素の高さを揃えたいのですが、どのようにしたら高さを揃えることができるでしょうか。 例として以下のようなhtmlがあったとします。

  • 解決済

    CSS適用したときにブラウザが重くなる

    ボックス全体をリンクにしたのですが、ボックスの中にある文字とその左右しかクリックが反応しないことがわかりました。 つまりボックスの中の文字をクリックすれば正常に動作します。

  • 解決済

    cssの読み込み方がわかりません

    cssの読み込み方がわかりません。 どなたかご教授お願いいたします。 エクリプスでjspファイルを作りcssを読み込もうとしているのですが、読み込みません。 二つともweb-i

  • 解決済

    apacheのReverseProxyについて

    環境 VPS OS:CentOS7 apache:2.4 実現したいこと 現在稼働中のサイト(https://example.com)で、"https://example.co

  • 解決済

    ドロップダウンメニューの横にならべたい

    要はQiitaのヘッダーをモロパクリしたいんですけど、どうしても縦に並んでしまうです。 新規登録とドロップダウンメニューを並列に並べたいんです。 ruby on rails でやっ

同じタグがついた質問を見る

  • CSS

    5592questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。