[CSS]うっかりでは済まないスタイルシートの記述の間違い集
Post on:2009年4月17日
sponsors
スタイルシートが意図した通りにブラウザに表示されない時、ブラウザのバグが原因の場合もありますが、ここでは主に制作者のタイポや勘違いでうっかりやってしまいそうなスタイルシートの記述の間違いをCSS newbieから紹介します。
15 Surefire Ways to Break Your CSS
1. Missing a Semicolon
セミコロン「;」を忘れてしまう。
|
1 2 3 4 5 |
<textarea name="code" class="html" cols="60" rows="5"> body { background-color: #444; color: #eee } </textarea> |
上記の場合は最後のセミコロンは無くても問題はありませんが、うっかりそのまま最後に追加してしまうとミスになります。
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> body { background-color: #444; color: #eee font-family: Helvetica, Arial, sans-serif } </textarea> |
2. Missing a Colon
コロン「:」を忘れてしまう。
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> body { font-family Helvetica, Arial, sans-serif; } </textarea> |
3. Missing a Brace
ブレース「}」を忘れてしまう。
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> body { font-family: Helvetica, Arial, sans-serif; #wrap { width: 960px; } </textarea> |
4. Misspelled Properties
プロパティの綴りを間違えてしまう。
誤：bototm
正：bottom
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> div { border-bototm: 5px; } </textarea> |
5. Misspelled Values
バリューの綴りを間違えてしまう。
誤：pz
正：px
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> #wrap { padding: 10px 20pz 25px 20px; } </textarea> |
6. Misspelled Classes and IDs
セレクタの綴りを間違えてしまう。
誤：navigaiton
正：navigation
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> #navigaiton { float: left; } </textarea> |
7. Improperly Ordered Values
ショートハンドの順番を間違えてしまう。
誤：font: "Times New Roman", serif 1.5em;
正：font: 1.5em "Times New Roman", serif;
|
1 2 3 4 |
<textarea name="code" class="html" cols="60" rows="5"> div { font: 2em Helvetica, Arial, sans-serif; } a { font: "Times New Roman", serif 1.5em; } </textarea> |
8. Measurement Values Without Units
プロパティの値の単位を忘れてしまう。
誤：3
正：3px など
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> #wrap { margin: 3; } </textarea> |
9. Competing Identical Rules
同じセレクタに異なる指定をしてしまう。
※同じ場合は後の指定が優先されます。
|
1 2 3 4 5 |
<textarea name="code" class="html" cols="60" rows="5"> ul li { margin: 0 2em; } ... 300 lines later ... ul li { margin: 0; padding: 10px; } </textarea> |
10. Unintentionally Competing Rules
同じ要素のidとclassに異なる指定をしてしまう。
※この場合は、idの指定が優先されます。
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <ul class="nav" id="navigation"> .nav { width: 50%; } ... later in the code ... #navigation { width: 500px; } </textarea> |
11. Calling a Class an ID (or vice-versa)
id属性なのに、classで指定をしてしまう。
誤：.navigation
正：#naviagtion
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> .navigation { float: left; width: 100%; height: 4em; } </textarea> |
12. Using a Nonexistent Property
存在しないプロパティを使用してしまう。
誤：text-size
正：font-size
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> body { text-size: 3em; } </textarea> |
13. Using a Nonexistent Value
存在しない値を使用してしまう。
誤：center
正：middle
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> td { vertical-align: center; } </textarea> |
14. Improperly Matching Properties and Values
プロパティと値の組み合わせを勝手に作りだしてしまう
誤：text-transform: italic;
正：font-style: italic;
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> a { text-transform: italic; } </textarea> |
15. Not Closing Comments
実はコメントが終わってない。
誤：/*
正：*/
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> /* Navigation goes here. /* #nav { float: left; width: 100%; height: 3em; } </textarea> |
sponsors
