woshidan's blog

そんなことよりコードにダイブ。

widthプロパティの適用優先順位について調べてみた

cssの指定が苦手なのだけど、

webアプリケーションがきちんと動いているように見える、という意味ではきっちりcssのプロパティを指定できる事が大事なので、

ちょっと気合い入れて調べてみました。

 

影響ないと思うけど外部ファイルcssの読み込みは

Rails4.0のapps/assets/stylesheetsディレクトリに入っている自作のcssファイルをapplication.css.scssの設定そのままで読み込ませています。

インターン先の環境がそれなので。

 

たぶん、普通に

< link rel="stylesheet" type="text/css" href="test.css" />

で、読み込んでも基準は変わらないと思いますが、変わっていたら追記します。

この記事で出てくるhtmlタグの一部<とelement_nameの間に半角スペースが入っているものがありますのでご注意ください。

スペース入れないとコードが表示されてくれなかったので……。

 

まとめ

長くなったので、先に結論を。

主にwidth属性について検討した結果、以下の優先順位でcssが適用される事が分かりました。

値が同じであることは書式を示す以外に意味は無いです。

 

プロパティの適用優先順位

優先順位(高)

  • htmlタグの中に書いた <th style="width: 300px !important">
  • 外部ファイルの中に書いた th.aaa { width: 300px !important; }
  • 外部ファイルの中に書いた th { width: 300px !important; }
  • htmlタグの中に書いた <th style="width: 300px"> 
  • 外部ファイルの中に書いた th.aaa { width: 300px; } (条件付きセレクタの条件が細かい)
  • <head>の内部で下の方の行で読み込まれているcss中の th { width: 300px; }
  • 外部ファイルの中で上の方に書いた th { width: 300px; }
  • 外部ファイルの中で下の方に書いた th { width: 300px; }
  • htmlタグの中に書いた <th width="300px">
  • デフォルトでブラウザごとに設定されているcss (開発者ツールで見るとuser agent stylesheetsって名前で出てくる)

優先順位(低)

 

優先順位を決める法則の優先順位は

優先順位(高)

  • プロパティのパラメータに!important指定が入っている
  • HTML中の要素のタグの中にstyle属性として書いてある>外部ファイルから読み込んでいる

         (外部ファイル同士)

  たぶんここらへんがBootstrapを使うとtableの幅が〜ってなる原因かも……

  • 外部ファイルの読み込み順が遅い>早い

  =html内で下の行のlink relで読み込まれているcssが優先

  • 同一ファイル内で、下の方の行に書いてある
  • HTML中のテーブルの要素のstyle属性 > width属性
  • ブラウザのデフォルト設定

優先順位(低)

 

だいたいこんな感じ。間違っていたら、適宜修正予定(いつもの通り)。複数のcssとかは

グラフィックデザイナーのためのCSSレイアウトメモTIPS「CSS記述の優先度」

からの引用です。

background-colorで試したら、警告マークが出て挙動が違ったので、

プロパティによってなにか違うのかもしれません……。

属性とかプロパティとか用語も若干怪しいですが……。

あと、head内に< style></ style>ではさんでhtmlファイル内の直接書く方法もあるのですが、これは外部ファイルから読み込んだ場合と変わらないと思います。

使わないと思ったのできちんと調べてないですけど。

 

検証に使ってたコードのまとめは長くなったので、明日にします。

 

Bootstrapは子要素にたいする指定、この属性の子要素に対する指定……

などでわたしにはややこしいので、 

table周りだけでも明日中に一度検証できればいいな……。