[CSS]うっかりでは済まないスタイルシートの記述の間違い集

スタイルシートが意図した通りにブラウザに表示されない時、ブラウザのバグが原因の場合もありますが、ここでは主に制作者のタイポや勘違いでうっかりやってしまいそうなスタイルシートの記述の間違いをCSS newbieから紹介します。

15 Surefire Ways to Break Your CSS

15 Surefire Ways to Break Your CSS

1. Missing a Semicolon

セミコロン「;」を忘れてしまう。

上記の場合は最後のセミコロンは無くても問題はありませんが、うっかりそのまま最後に追加してしまうとミスになります。

2. Missing a Colon

コロン「:」を忘れてしまう。

3. Missing a Brace

ブレース「}」を忘れてしまう。

4. Misspelled Properties

プロパティの綴りを間違えてしまう。

誤:bototm
正:bottom

5. Misspelled Values

バリューの綴りを間違えてしまう。

誤:pz
正:px

6. Misspelled Classes and IDs

セレクタの綴りを間違えてしまう。

誤:navigaiton
正:navigation

7. Improperly Ordered Values

ショートハンドの順番を間違えてしまう。

誤:font: "Times New Roman", serif 1.5em;
正:font: 1.5em "Times New Roman", serif;

8. Measurement Values Without Units

プロパティの値の単位を忘れてしまう。

誤:3
正:3px など

9. Competing Identical Rules

同じセレクタに異なる指定をしてしまう。

※同じ場合は後の指定が優先されます。

10. Unintentionally Competing Rules

同じ要素のidとclassに異なる指定をしてしまう。

※この場合は、idの指定が優先されます。

11. Calling a Class an ID (or vice-versa)

id属性なのに、classで指定をしてしまう。

誤:.navigation
正:#naviagtion

12. Using a Nonexistent Property

存在しないプロパティを使用してしまう。

誤:text-size
正:font-size

13. Using a Nonexistent Value

存在しない値を使用してしまう。

誤:center
正:middle

14. Improperly Matching Properties and Values

プロパティと値の組み合わせを勝手に作りだしてしまう

誤:text-transform: italic;
正:font-style: italic;

15. Not Closing Comments

実はコメントが終わってない。

誤:/*
正:*/

top of page

©2017 coliss