このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows:カレンダーのタイルが日付を表示してくれない (10/18)
  • AdBlock:サイト表示の不具合,広告の過剰ブロックを解消する (10/16)
  • LINE:特定の「トーク」を常にトップに表示させる (10/13)
  • Dropbox:25GBのファイルを新PCに高速同期してみた (10/11)
  • LINEモバイル:データ量がやたら余るのでプラン変更してみた (10/09)
  • 管理人より
    2200万アクセス突破しました。ありがとうございます。

    ブラウザ毎に別々のCSSを適用させる

    このエントリーをはてなブックマークに追加
    こんにちは、さち です!


    今回は最近私がお勉強した
    ブラウザごとに異なるCSSを適用する方法(CSSハック)についてまとめようと思います。

    CSSハックについては以前の記事の「CSSを使おう」でも紹介していますが
    前回の方法では Opera だけ別のCSSを適用するということができませんでした。

    今回はOperaを含めたCSSハックの方法について書いていこうと思います!

    実際に IE, Firefox Opera, Safari のそれぞれのブラウザごとに違うCSSを適用するには
    次のようにCSSを記述します。
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    /* 1. IE, Firefox, Opera, Safari に適用 */
    .class {
    width: 297px;
    height: 100px;
    background-image: url(http://xxx/daredemopc/IE_logo.png);
    background-repeat: no-repeat;
    }

    /* 2. Firefox, Opera, Safari に適用 */
    html>/**/body .class {
    background-image: url(http://xxx/daredemopc/Firefox_logo.png);
    }

    /* 3. Opera, Safari に適用 */
    body:first-of-type .class {
    background-image: url(http://xxx/daredemopc/Opera_logo.png);
    }

    /* 4. Safari に適用 */
    html:not(:only-child:only-child) .class {
    background-image: url(http://xxx/daredemopc/Safari_logo.png);
    }

    実際に上のようなCSS(一部サイトに合わせて変更しています)を機能させると次のようになります。
    (今閲覧に使用しているブラウザ名が枠内に表示されていると思います)

    ※ Firefox 3.5 になってから3のCSSハックを適用するようになってしまったようです。

    やっていることは 「1.」 で指定したCSSを
    「2.」「3.」「4.」 でどんどん上書きしていくという感じです。

    「1.」 でまず全てのブラウザに有効なCSSを記述します。

    「2.」 でCSSハックを使い IE以外 のブラウザに有効なCSSを記述するため
    事実上 「1.」 が IE用 のCSSの記述となります。

    同様に 「3.」 でCSSハックを使い Opera, Safari にのみ有効なCSSを記述するため
    事実上 「2.」 が Firefox用 のCSSの記述となります。

    さらに 「4.」 でCSSハックを使い Safari にのみ有効なCSSを記述するため
    事実上 「3.」 が Opera用 のCSSの記述となり
    同時に 「4.」 が Safari用 のCSSの記述となります。

    簡単にまとめると
      「1.」 … IE用 のCSS
      「2.」 … Firefox用 のCSS
      「3.」 … Opera用 のCSS
      「4.」 … Safari用 のCSS
    ということになります。

    ちなみに指定した「プロパティ」と「値」のみが上書きされるので
    「1.」 で指定した 「background-repeat」「width」「height」は
    「2.」「3.」「4.」 の記述を行っても効果は消えることなく働き続けます。
    つまり 「background-repeat」「width」「height」はすべてのブラウザで有効です。


    今回の記事を作成するにあたり下記サイト様を参考にさせて頂きました。
    本当にありがとうございました。

       → CSSハックまとめ[2008年7月版]HiGash.Net 様)
       → いまさら聞けないCSSハックWEBHACKr 様)








    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2017 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ