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

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

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

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



最新記事
  • Windows:動画のフレームサイズ等をエクスプローラーに表示 (02/24)
  • エクセル:テーブルの「フィルター」「並び替え」ボタンが消えた (02/22)
  • jQuery:追加した「ボタン」をクリックしてもイベントが発火しない (02/20)
  • PCモニタをWQHD(2560x1440)にしたら便利すぎて戻れない件 (02/17)
  • jQuery Mobile:追加した要素(select等)にスタイルが付かない (02/13)
  • 管理人より
    2100万アクセス突破!ありがとうございます。

    スタイルシート(CSS)の優先順位

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



    こんにちは、さち です!

    今回はスタイルシート(CSS)の適用優先順位について書こうと思います。
    この記事は私の備忘録となっていますが、CSSに関わる方に少しでもお役に立てれば幸いです。

    ■ 1. CSSの種類による優先順位

    CSSの記述の方法には次のような3種類の方法があります。
    • 「style=""によるHTMLタグへの直接記入」
    • 「headタグ内への<style>~</style>への記述」
    • 「外部CSSへの記述」

    各記述方法の優先順位は下記の図のとおりです。
    『CSSを適用させたい場所から近い順』 に優先順位が高いと覚えておくといいかもしれません。





     
     ◇style=""によるHTMLタグへの直接記入
     ◇headタグ内への<style>~</style>への記述
     ◇外部CSSへの記述(metaタグによる外部CSSの読み込み)
     



    ■ 2. 同じタグを複数回スタイル指定した場合のCSSの優先順位

    CSSの指定には次のような優先度のルールがあります。

    【A】 style属性がある場合は、Aに1を加算
    【B】 セレクタに含まれる id 属性の数を加算
    【C】 セレクタに含まれる id 以外の属性と擬似クラスの数を加算
    【D】 セレクタに含まれている 要素,擬似要素の数を加算

    例 )
    各セレクタ文字列の優先順位は下記の図のとおりです。
    『CSSを適用させたい場所から近い順』 かつ 『記述がより詳細である程』 に
    優先順位が高いと覚えておくといいかもしれません。





    セレクタ文字列【A】【B】【C】【D】
    style=""1000
    #x34y {}0100
    li.red.level {}0021
    ul ol li.red {}0013
    h1 + *[rel=up]{}0011
    ul ol+li {}0003
    ul li {}0002
    li:first-line {}0002
    li {}0001
    * {}0000

    最終的には【A】【B】【C】【D】の順に並べた4桁の数字(例:『style=""』なら『1000』)にして
    それぞれを比較し、数字が大きいほどCSSの適用の優先順位が高くなります。
    (【A】~【D】のそれぞれの値は10になっても
    一つとなりの項目(例:【D】なら【C】)に繰り上がったりしません)



    ■ 3. 無条件での最優先順位

    CSSが複雑になってきて
    優先順位の関係が分からなくなってしまった場合に使うと便利なのが「!important」 です。

    この !important を宣言のあとにつけることによってその宣言が無条件に最優先で適用されます。

    例)
    div.class ol li { background-color: #FF0000 !important; }

    この !important は使いすぎると
    あとで修正したいときにどこに !important を設定したかを忘れてしまったりして
    収拾のつかなくなる事態が発生することがあります。

    こうなってしまうと CSS の修正(!important宣言探し)にかなり時間費やすことになるので
    なるべく !important は使わないようにしましょう。


    【この記事を作成するのに参考にさせて頂いたサイト様】

       → !important だらけの CSS にお別れをWWW WATCH様)









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




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





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

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

    ブログパーツ