昨日の優先順位を実際にhtmlのタグ書いて試したときのソースコードがこちら。
よくわからなかったときは2番あたりから試していけばいいやってことで自分用。
試した項目は以下。
- 何も属性を指定しない場合のcss
- htmlの要素の属性をwidthで指定した場合とstyle属性のwidthプロパティで書いた場合
- width属性とstyle属性のwidthプロパティの優先順位
- 外部ファイルcssでwidthプロパティを指定した場合
- 同一の外部ファイル内での優先順位
- 記述順による優先順位
- 条件付きセレクタの条件指定の細かさによる優先順位
- 外部ファイル内の指定とhtmlの要素のタグの中で指定した場合の優先順位
- 異なる外部ファイルの間での優先順位
- !importantパラメータについて
- 複数クラスを指定した際の優先順位
1. 何も属性を指定しなかった場合のcss
まずは、何も指定していない場合のスタイルについて調べてみた。
htmlタグ
| <table> | |
| <tr> | |
| <td>あああ | |
| </td> | |
| </tr> | |
| </table> |
このとき、Chromeの開発者ツールでのぞくと、thやtableにはuser agent stylesheetって表示されたスタイルが適用されています。user agent stylesheetはブラウザごとにhtmlの要素に対して決まっているスタイルシートのことなので、何も書かなければブラウザ所定のスタイルシートが適用されます。
2. htmlの要素の属性をwidthで指定した場合とstyle属性のwidthプロパティで書いた場合
htmlタグ
| <table> | |
| <tr> | |
| <td style="width: 300px">あああ | |
| </td> | |
| <td width="200px">いいい | |
| </td> | |
| <td>ううう | |
| </td> | |
| </tr> | |
| </table> |
だと、あああの要素のスタイルのところには、表示画面の右上にelements.styleと入っていて
いいいの要素のスタイルのところには、要素名の後ろにtd[Attributes Style]と入っています。
style属性のプロパティで指定した場合とwidth属性で指定した場合とでは扱いが違うようです。
2.1 width属性とstyle属性のwidthプロパティの優先順位
以下のように同じ要素にwidth属性とstyle属性のwidthプロパティの指定を書いてみます。
| <table> | |
| <tr> | |
| <td style="width: 300px" width="200px">あああ | |
| </td> | |
| </tr> | |
| </table> |
すると、tdの幅は300pxだったので、style属性のwidthプロパティの指定が優先されています。
(この記事だと一つずつ書いているんですが、実際開発者ツールだと一つ一つ外してみたくなったcssを外したり編集したり、適用されなかったcssが打ち消し線引かれていたりして、いくつかまとめて書いたものを試すことができます。)
3. 外部ファイルcssでwidthプロパティを指定した場合
app/assets/stylesheetsディレクトリに以下の内容でファイルを追加してhtml中のタグには何も指定しないで見てみます。
htmlタグ
| <table> | |
| <tr> | |
| <td>あああ | |
| </td> | |
| </tr> | |
| </table> |
app/assets/stylesheets/custom.css.scss
| td { | |
| width: 100px; | |
| } |
すると
media:allとか、custom.css?body=1:2
とかいう表示と一緒にスタイルが適用されています。
前者はRailsでアセットパイプラインでcssを読み込んできているときの指定の内容で、
後者はそのcssが書いてあるファイルの場所です。
いわゆるふつうのcssがこれだと思います。
4. 同一の外部ファイル内での優先順位
同じファイルの中でどの優先順位でcssが適用されるか調べます。
4.1 記述順による優先順位
基本的に同じプロパティや要素について指定した場合、cssは下の方に書いたものが優先して適用されます。
htmlタグ
| <table> | |
| <tr> | |
| <td>あああ | |
| </td> | |
| </tr> | |
| </table> |
app/assets/stylesheets/custom.css.scss
| td { | |
| width: 100px; | |
| } | |
| td { | |
| width: 200px; | |
| } |
この場合、下の方に書いたwidth: 200px;が優先されてtdの幅は200pxになります。
4.2 条件付きセレクタによる指定の細かさによる優先順位
たぶん、ここと親要素のクラスの子要素としてのスタイル指定が入り組んでいるのがBootstrapを使うといろいろな微調整ができなくなる原因の一つだと思われます。
htmlタグ
| <table> | |
| <tr> | |
| <td class="prior">あああ | |
| </td> | |
| </tr> | |
| </table> |
app/assets/stylesheets/custom.css.scss
| td.prior { | |
| width: 100px; | |
| } | |
| td { | |
| width: 200px; | |
| } |
とすると、4.1だと下のほうが優先されましたが、今度は条件付きセレクタの指定条件が細かい上の方のスタイルが優先されます。
スタイルを書いた上下より条件付きセレクタの指定条件の細かさのほうが優先されます。
5. 外部ファイル内の指定とhtmlの要素のタグの中で指定した場合の優先順位
外部ファイルに書いたスタイルとhtml要素のタグの中で指定したスタイルの優先順位について比べます。
htmlタグ
| <table> | |
| <tr> | |
| <td style="width: 300px"> | |
| 外部ファイルtd VS style属性 | |
| </td> | |
| <td width="300px"> | |
| 外部ファイルtd VS width属性 | |
| </td> | |
| <td class="prior" style="width: 300px"> | |
| 外部ファイルtd.class VS style属性 | |
| </td> | |
| </tr> | |
| </table> |
app/assets/stylesheets/custom.css.scss
| td.prior { | |
| width: 100px; | |
| } | |
| td{ | |
| width: 200px; | |
| } |
画像表示するのが面倒なのでテキストで書いてしまいますが、表示された列の幅は◀︎から順に300,200,300でした。
外部ファイルtd VS style属性ではhtmlタグ中のstyle属性のほうが優先されて、
外部ファイルtd VS width属性では外部ファイルのスタイルが優先されているので、
html要素のstyle属性 > 外部ファイルスタイル > html要素のwidth属性
の順に優先されて適用されることが分かります。
で、三つ目の外部ファイルtd.class VS style属性でhtmlタグ中のstyle属性のほうが優先されているので、条件付きセレクタの細かさについての条件は外部ファイル同士を比較した場合の条件である事が分かります。
6. 異なる外部ファイルの間での優先順位
グラフィックデザイナーのためのCSSレイアウトメモTIPS「CSS記述の優先度」 
htmlのヘッダの中で下の行で読み込まれているcssの優先順位が高くなります。
Railsの場合、アセットパイプラインを通してcssを読み込むとアルファベット順に読み込まれ、Bootstrapなどをインポートした場合はimportの行を書いた場所にBootstrapなどのcssが展開されるみたいです。
7. !importantパラメータについて
!importantによる優先度の変更 - スタイルシートの優先順位 - スタイルシート入門 
!importantが書かれたプロパティの指定はいままでの優先順位をとびこして適用されます。
たとえば、
htmlタグ
| <table> | |
| <tr> | |
| <td style="width: 300px"> | |
| 外部ファイルtd VS style属性 | |
| </td> | |
| <td width="300px"> | |
| 外部ファイルtd VS width属性 | |
| </td> | |
| <td class="prior" style="width: 300px"> | |
| 外部ファイルtd.class VS style属性 | |
| </td> | |
| </tr> | |
| </table> |
app/assets/stylesheets/custom.css.scss
| td.prior { | |
| width: 100px; | |
| } | |
| td{ | |
| width: 200px !important; | |
| } |
の場合、5と違って列の幅はすべて200pxになります。
ただ、この!important指定はあまり使われないみたいです。
8. 複数クラスを指定した際の優先順位
ハタさんのブログ : CSSの指定順序による同一プロパティの上書きと優先順序 
classのプロパティの中での指定順序ではなくcssファイル内での宣言順序によって優先順位が決まります。
なので、あまり順番を気にせずにクラスを指定してよいみたいです。
また、idに対する指定はclassよりも優先順位よりも高いそうです。(力つきた)
Bootstrapを使っていたら幅が迷子になっているtableをどうにかしたかったのですが、
基本的にそういう迷子になったtableやdiv要素の幅をきちんと指定したいときはその要素のstyle属性を要素に直接指定してあげるのが一番かんたんかもしれない(親要素にwidth: 100%などが入っていると子要素では合計が親の幅になるように調整が行われるので、子要素だけの指定では上手く行かなくなる事が多いから)。
8を調べているときに似たような事まとめてるブログたくさん見つけたので検索力が低くて泣きたい。css触れる人の間ではけっこう当たり前の話みたいだ。
結構わかった気になったからいいけどさ…とほほ……。
