Title: テーマ内のstyle.cssと記事内のstyle記述の優先順位について
Last modified: 2016年7月30日

---

# テーマ内のstyle.cssと記事内のstyle記述の優先順位について

 *  解決済 [jinchan](https://ja.wordpress.org/support/users/jinchan/)
 * (@jinchan)
 * [14年、 7ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%86%e3%83%bc%e3%83%9e%e5%86%85%e3%81%aestylecss%e3%81%a8%e8%a8%98%e4%ba%8b%e5%86%85%e3%81%aestyle%e8%a8%98%e8%bf%b0%e3%81%ae%e5%84%aa%e5%85%88%e9%a0%86%e4%bd%8d%e3%81%ab%e3%81%a4%e3%81%84/)
 * WordPress初心者です。よろしくお願いします。
 * １）Twenty-ten　の　style.css に
 * 　#content tr th,
    #content thead th { ・・・ line-height: 1em; ・・・ } #content
   tr td { ・・・ line-height:1em; ・・・ }
 * ２）投稿記事のHTML入力欄で<head>内に
 * <style TYPE=”text/css”>
    <!– td { line-height:3em !important; }
 *  th {
    line-height: 3em !important; } –> </style>
 * とした場合、td セレクタの場合は、１）が優先し、２）のtd内を変えても、画面上変化
   しません。つまり、反映されません。
 * ところが、th セレクタの場合は、２）が優先し、２）のth内を変えれば、画面上もちゃんと
   変化し、反映されます。
 * 同じように書いているのですが、なぜ、th の方だけ、有効に動作するのでしょうか？
   
   なお、２）の投稿記事欄の方HTML内では、<thead> は、使っていません。 わかりにく
   くて恐縮ですが、どなたかお分かりの方、ご教示よろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)

 *  [nobita](https://ja.wordpress.org/support/users/nobita/)
 * (@nobita)
 * [14年、 7ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%86%e3%83%bc%e3%83%9e%e5%86%85%e3%81%aestylecss%e3%81%a8%e8%a8%98%e4%ba%8b%e5%86%85%e3%81%aestyle%e8%a8%98%e8%bf%b0%e3%81%ae%e5%84%aa%e5%85%88%e9%a0%86%e4%bd%8d%e3%81%ab%e3%81%a4%e3%81%84/#post-146622)
 * こんにちは
 * > 同じように書いているのですが、なぜ、th の方だけ、有効に動作するのでしょうか？
 * CSSには、Specificity（　詳細度　）という指定ができます。
 * 詳細度は、スタイルルールの重要度を指定する書き方です
 * CSS2と、CSS2.1で詳細度の計算の仕方は異なります。最新のブラウザは、CSS2.1の計算
   で動作します
 * 同じ詳細度なら、外部CSS　<　head 埋め込みスタイル　<　インラインスタイルの順で
   ルールが適用されますが、詳細度を使う事で、インラインスタイルを強制的に、外部スタイル
   シートのルールを適用するといったことが可能になります。
 * ルールの重要度は、id class elementの組み合わせの仕方で決定されます。
    important
   ルールは、1000で計算すればいいと思います。
 *  トピック投稿者 [jinchan](https://ja.wordpress.org/support/users/jinchan/)
 * (@jinchan)
 * [14年、 7ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%86%e3%83%bc%e3%83%9e%e5%86%85%e3%81%aestylecss%e3%81%a8%e8%a8%98%e4%ba%8b%e5%86%85%e3%81%aestyle%e8%a8%98%e8%bf%b0%e3%81%ae%e5%84%aa%e5%85%88%e9%a0%86%e4%bd%8d%e3%81%ab%e3%81%a4%e3%81%84/#post-146638)
 * nobita さん、はじめまして。
 * ご回答ありがとうございました。
 * 『詳細度』、はじめて伺いました。
    で、早速調べたところ 『CSSにおけるセレクタの
   優先順位』 [http://refluxflow.net/2006/08/css_selector_specificity.html](http://refluxflow.net/2006/08/css_selector_specificity.html)
   がありまして、引用させていただきますと、 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
   優先順位の計算方法
 * CSS2の仕様では、セレクタの優先順位の計算方法が以下のように決められています（参考:
   6.4.3 Calculating a selector’s specificity）。
    [http://www.w3.org/TR/CSS2/cascade.html#specificity](http://www.w3.org/TR/CSS2/cascade.html#specificity)
 * セレクタの優先順位は詳細度によって決められます。詳細度の大きいセレクタほど優先
   順位は高くなります。
 * セレクタ中のID属性の数をaとする
    セレクタ中のID属性以外の属性と疑似クラスの数
   をbとする セレクタ中の要素名の数をcする 疑似要素は無視する この3つの数字をa, 
   b, cの順に連結して詳細度とします。
 * /* 詳細度の計算例 */
    * {} /* a = 0, b = 0, c = 0, 詳細度 = 0 */ p {} /* a = 
   0, b = 0, c = 1, 詳細度 = 1 */ p a {} /* a = 0, b = 0, c = 2, 詳細度 = 2 */ .
   class {} /* a = 0, b = 1, c = 0, 詳細度 = 10 */ p.class {} /* a = 0, b = 1, c
   = 1, 詳細度 = 11 */ p a[href] {} /* a = 0, b = 1, c = 2, 詳細度 = 12 */ a[href]:
   link {} /* a = 0, b = 2, c = 1, 詳細度 = 21 */ #id {} /* a = 1, b = 0, c = 0,
   詳細度 = 100 */ #id p {} /* a = 1, b = 0, c = 1, 詳細度 = 101 */ 例えば、「p 
   a[href]」と「a[href]:link」の両方の条件を満たすa要素の場合、後者のスタイルが優先
   されます。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
   これから、前回質問内容の詳細度を計算しますと、
 * １）の場合
 * 　　　td: #content tr td{} →　a=1, b=0, c=2 →　詳細度=102
    th: #content tr th,#
   content thead th {} →　a=2, b=0, c=4 →詳細度=204
 * ２）の場合
 * 　　　td: td{･･･ !important} →　c=1 !important=1000 →　詳細度=1001
    th: th{･･･!
   important} →　c=1 !important=1000 →　詳細度=1001
 * となり、td, th いずれも２）の詳細度が大きいため、２）のスタイルが
    反映される
   はず、となりましたが、実際には
 * 　　　td: １）（twentyten の　style.css）
    　　　th: ２）（投稿記事内のcss）
 * が反映されてしまいます。
 * 『詳細度』について、まだまだ、勉強不足ですみませんが、
    ①　どこがおかしいのか、
   ②　また、２）を反映させるには、どうすれば良いのか ご教示いただければ幸いです。
 *  [popup](https://ja.wordpress.org/support/users/popup/)
 * (@popup)
 * [14年、 7ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%86%e3%83%bc%e3%83%9e%e5%86%85%e3%81%aestylecss%e3%81%a8%e8%a8%98%e4%ba%8b%e5%86%85%e3%81%aestyle%e8%a8%98%e8%bf%b0%e3%81%ae%e5%84%aa%e5%85%88%e9%a0%86%e4%bd%8d%e3%81%ab%e3%81%a4%e3%81%84/#post-146645)
 * この場合通常は２）の方が優先されるはずですので、プロパティ、!important、あるいは:
   や;の記述ミス、style.cssでの!important指定を見落としていないかなど、ケアレスミス
   をしていないか確認するしかないと思います。
 * 記事のHTML入力欄で<head>内に記述しているということですが、記事の入力欄の記述を
   <head>内に出力することはできません。
    <head>は1ページに一つだけと決まっています
   ので、複数出力するのはW3Cに違反しています。 あらかじめstyle.cssに特定のtable用
   のクラス名（あるいはID）のCSSを追加しておいて、記事投稿時にtableにそのクラス名(
   またはID)を付与するのはどうでしょうか？ 記事投稿ごとにCSSを変更する必要がある
   場合は、カスタムフィールドを使用するといいかもしれません。 header.phpのhead内
   の適当な位置に次のコードを追加して置きます。
 *     ```
       <?php
       $post_id = $post->ID;
       if($style = get_post_meta($post_id, 'カスタムフィールド名', true)) {
       echo $style."\n";
       }
       ?>
       ```
   
 * カスタムフィールドには<style type=”text/css”>～</style>まで記述します。
 *  トピック投稿者 [jinchan](https://ja.wordpress.org/support/users/jinchan/)
 * (@jinchan)
 * [14年、 7ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%86%e3%83%bc%e3%83%9e%e5%86%85%e3%81%aestylecss%e3%81%a8%e8%a8%98%e4%ba%8b%e5%86%85%e3%81%aestyle%e8%a8%98%e8%bf%b0%e3%81%ae%e5%84%aa%e5%85%88%e9%a0%86%e4%bd%8d%e3%81%ab%e3%81%a4%e3%81%84/#post-146650)
 * popup さん、はじめまして、おはようございます。
 * ２つのご提案、ありがとうございました。
 * １つ目は、私でも何となく理解できましたが、
    ２つ目の方が、魅力的なので、これまた、
   はじめてですが、早速調べましたら、投稿画面の下に
 * 『カスタムフィールドは投稿に特別なメタデータを追加するために使うものです。追加
   されたカスタムフィールドはテーマの中で利用できます。』
    [http://wpdocs.sourceforge.jp/Using_Custom_Fields](http://wpdocs.sourceforge.jp/Using_Custom_Fields)
 * とあって、これ見たら、なんと、奥行きが深くて、短時間では、到底理解できないと思い
   ました。
 * で、勉強の方は、後回しにすることとして、とりあえず、ご提案の方法を、わけもわから
   ずにまねしてみようと思い、やってみたところ、うまくいきましたので解決！！しました。
   
   どうもありがとうございました。
 * で、popup さんは簡潔に書かれていたので、私の備忘録もかねて、初心者の方にも参考
   にしていただけたらと思い、以下手順をまとめました。
    何か、不要なこととか、もっと
   こうした方がいい、とかアドバイスがあれば、お願いします。
 * １）ご提案どおり、テーマ内の header.php の <head>タグ内に
 *     ```
       <?php
       $post_id = $post->ID;
       if($style = get_post_meta($post_id, 'style', true)) {
       echo $style."\n";
       }
       ?>
       ```
   
 * を追加。この場合、style　は、カスタムフィールド名で、カタカナでもいいと思います
   が、ここでは英字にして、style指定なので、<head>内の最後の部分に追加。
 * ２）投稿＞新規追加、もしくは、固定ページ＞新規追加　画面で、右上の　表示オプション
   の　カスタムフィールド　にチェックを入れる。
 * ３）画面下に　カスタムフィールド　欄ができるので、新規追加　ボタンを押して
 * 　　　名前：　style
    　　　値　：　<style type=”text/css”>～</style> 　　　　　　　（
   この　～　に自分の好きな style仕様を書く）
 * ４）本文記事欄のHTML欄に、html文を書く
 * 以上で、第Ⅰラウンドは終了。３）で書いたstyle仕様が反映される。ただし、やってみ
   て、反映されていないセレクタやクラスがあれば、テーマの style.css 内の style と
   競合していることが考えられるため、反映されていなかったstyle指定の後に、
 * 　　半角スペース + !important;
 * という優先指定をする。
 * 次回からは、１）～　３）は、不要で、
 * １）新規追加画面の下部のカスタムフィールド欄の中の、名前欄のプルダウンメニュー
   から、style を選択して、値欄に、必要な style仕様を入力する。
    ２）本文記事欄の
   HTML欄に、html文を書く
 * というだけでＯＫ！。
 * 以上で、投稿記事も固定ページ記事も、style仕様が自由自在！ということになりました。

4件の返信を表示中 - 1 - 4件目 (全4件中)

 トピック「テーマ内のstyle.cssと記事内のstyle記述の優先順位について」には新たに返信
することはできません。

## タグ

 * [スタイルシート](https://ja.wordpress.org/support/topic-tag/%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88/)
 * [CSSファイル](https://ja.wordpress.org/support/topic-tag/css%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab/)

 * フォーラム: [使い方全般](https://ja.wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4件の返信
 * 3人の参加者
 * 最後の返信者: [jinchan](https://ja.wordpress.org/support/users/jinchan/)
 * 最後の活動: [14年、 7ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%86%e3%83%bc%e3%83%9e%e5%86%85%e3%81%aestylecss%e3%81%a8%e8%a8%98%e4%ba%8b%e5%86%85%e3%81%aestyle%e8%a8%98%e8%bf%b0%e3%81%ae%e5%84%aa%e5%85%88%e9%a0%86%e4%bd%8d%e3%81%ab%e3%81%a4%e3%81%84/#post-146650)
 * 状態: 解決済

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック