サイト運営を行っているとCSSを触ってデザイン変更するのは日常茶飯事です。
cPanel内で使用できるエディターやその他のエディターツールにはCSSLintと呼ばれるソースコードの自動チェック機能が付いています。
そのLinterによって書き込んだスタイルにビックリマーク付きの警告文が出ることがありますが、英語ですので和訳の一覧を作りました。
筆者がよく見る警告文から20個並べています。全てではありません。
この記事の目次
CSSLintの警告文の日本語訳と原因
cPanel内で使用できるlogacy editorでは警告文が黄色のビックリマーク、他の書き方を推奨する場合はiマークがコードの横に表示されます。
無視しても問題ないことが多いですが、意味を理解しておくと役に立ちます。
この記事の中から該当の警告文を探すにはブラウザの検索機能を使うと早いです。
（ChromeとEdgeはCtrl＋Fで立ち上がります。）
よく見るCSSスタイルの警告文
Use of !important.
!importantの使用。
!importantを使うと決められている優先度を無視してスタイルが適用される。
Wordpressでは親テーマや子テーマのスタイルを上書きするときに手っ取り速い。
style直書きには優先度は負けます。
サイト高速化の観点、保守性の観点ではあまり使わない方が良い。
Rule is empty.
ルールは空です。
スタイルの指定が無いと出る。消し忘れに注意。
Fallback background-color (hex or RGB) should precede RGBA background-color.
フォールバックbackground-color（16進数またはRGB）は、RGBAbackground-colorの前に置く必要があります。
訳の通りです。rgbaを使用して透過度を指定する場合、色の指定（background-color: black;など）をこのrgbaの前に記述すると解決します。
Duplicate property 'background' found.
重複するプロパティ'background'が見つかりました。
ん？となりますが、同じスタイルは連続して記述しないと警告文が出ます。
（例の画像では間にcolor:red;が入っているため。）
スタイルの記述順を変えれば解決します。
Element (~.~) is overqualified, just use .~ without element name.
要素（~.~）は過剰修飾されています。要素名なしで.~を使用してください。
必要以上に要素名を付けてしまっている場合にこの警告が出る。
IDやClass名を別途つけて、そのセレクタのみで指定できるようにすると解決する。
（例の画像ではimg要素にスタイルを適用したいので例が悪いかも。）
The properties margin-top,bottom,left,right can be replaced by margin.
プロパティmargin-top、margin-bottom、margin-left、margin-rightはmarginに置き換えることができます。
The properties padding-top,bottom,left,right can be replaced by padding.
プロパティpadding-top、padding-bottom、padding-left、padding-rightは、paddingに置き換えることができます。
長い警告文で一瞬？になりますが、マージンやパディングを上下左右指定するなら、一括で指定できますよ！という内容。
画像の例では、「padding:20px 20px 20px 20px;」及び「margin:10px 10px 10px 10px;」と指定すれば同じ内容が一行で済み、解決する。
Unknown property '○○'.
不明なプロパティ○○。
存在しないプロパティを指定した場合に出る。
（例ではbackgroundをhaikeiにしてみた。）
Expected ( | inherit) but found '○○'.
color継承が期待されます。しかし'○○'が見つかりました。
日本語訳難しすぎる…
意味は簡単で、colorの指定方法にakaなんてないです！という内容です。
Heading (h1) should not be qualified.
見出し（h1）は修飾されるべきではありません。
訳の通りです。見出しタグのH1～H6はサイト全体で使用されているため、CSSスタイルにて再度修飾するのは良くありません。
Heading (h1) has already been defined.
見出し（h1）はすでに定義されています。
訳の通りです。先ほどの内容と被りますが、H1～H6の見出しタグは何度もスタイルに記述する必要がないことを示しています。
どうしても一部のHタグだけに他のスタイルを使いたい場合は、別にクラスを指定してそちらを使用しましょう。
Using width with padding can sometimes make elements larger than you expect.
パディングで幅を使用すると、要素が予想よりも大きくなる場合があります。
paddingにwidthやheightを指定すると意図しないスタイルになることが出るので、一緒に使用しない方が良いよ！というアドバイスが出ます。
Using height with border can sometimes make elements larger than you expect.
ボーダーと高さを使用すると、要素が予想よりも大きくなる場合があります。
先ほどと同じく、一緒に使用しない方が良いよ！というアドバイス。
自分の使用しているブラウザでは問題なしでも、他のブラウザで見ると意図しないレイアウトになっていることがあるので注意しましょう。
float can't be used with display: inline-block.
floatはdisplay:inline-blockでは使用できません。
訳の通りです。使用できませんとなっていますがバグる訳ではなく、そもそもスタイルに反映されません。
height can't be used with display: inline.
heightはdisplay：inlineでは使用できません。
そのままです。
vertical-align can't be used with display: block.
vertical-alignはdisplay：blockでは使用できません。
そのままです。
The universal selector (*) is known to be show.
ユニバーサルセレクター（*）が表示されることが知られています。
ユニバーサルセレクタ（*）を使用すると、すべての要素にスタイルを反映させることができます。
しかし、全要素のチェックをするので重くなります。
少し特殊な警告ですが、警告というよりお知らせですね。
The box-sizing property isn't supported in IE6 and IE7.
box-sizingプロパティは、IE6およびIE7ではサポートされていません。
そのままです。InternetExplorer自体もう古いので現在は気にしなくて良さそうです。
The property -moz-transform is compatible with -webkit-transform and should be included as well.
プロパティ-moz-transformは-webkit-transformと互換性があるため、同様に含める必要があります。
transformは要素に動きを付けれるCSSアニメーションです。
警告の意味はブラウザごとにベンダープレフィクスというものを付けて対応させておいてね！という意味。
Firefoxの場合は「-moz-」、Chromeは「-webkit-」とブラウザで決まっています。
Don't use adjoining classes.
隣接するクラスを使用しないでください。
画像のように要素を連続で指定することでスタイルを当てたい部分に絞り込んで指定できますが、IE6以下では初めの要素.testまでしか読んでくれず、いろいろな要素にスタイルが当たる可能性があるので警告が出ます。
とはいえIE6なのでそんなに気にしないで良いでしょう。
Values of 0 shouldn't have units specified.
値0には、単位を指定しないでください。
「0px」も「0em」も「0rem」も「0%」も0でなら全て同じなので単位不要！
0とだけ指定しておけば良いよ！という内容。
まとめ
20個という数字にこだわってしまったので、後半はあまり見かけないメッセージ文も書いてしまいました。
最後にアレですが、どの警告が出ていてもそのまま保存して有効化できてしまいます。
CSSLintによる自動チェック機能はお節介かもしれませんが、IE6で対応していないことまで教えてくれるので勉強になります。
筆者もある程度CSSは勉強してきたつもりなのですが、一番最後に書いた0pxの指定は0だけでいいというのは知りませんでした。。。
早速手直ししてきます！ではではこの辺で・ｗ・
