CSSのコーディングで陥りがちなミスやトラブル
CSS2013年1月31日
CSSをコーディングする際、人間が行うものなのでミスは当然起きます。
もしろんベテランでもミスをすることもあります。
「正しく書いたつもりがなぜかスタイルが反映されない」
CSSを書いたことがある方であれば、きっとご経験があると思います。
もちろん画面とにらめっこして「どこか間違っているんだろうか...」とにらめっこするのも大事なのですが、ある程度ミスの内容というものは決まっています。アタリをつけて原因を探っていくと意外と簡単に早く見つかるものなので、よくあるミスやトラブルをまとめてみました。
CSSが適用されない
- 外部CSSファイルを読み込み忘れた
- IDとclassの指定を間違えた
- 子孫セレクタの構造を間違えた
- 別のところで詳細度の高いセレクタで書いているのを忘れていた
- ID名クラス名をアルファベットで始めていた（解釈しません）
floatがうまくいかない（背景が表示されない）
- 幅指定を間違えた
- floatを解除（clear）できていない
リスト要素で不明な余白ができる
IE6で頻繁に見られる現象です。
</li>の後ろの改行が、実際に見た目に表れてしまう、というものです。ベターなやり方としては、リストタグを改行を入れずに全て続けてしまうことで解決します。
スペルミスや誤記
- セミコロンがない
- 閉じカッコがない
- ×witdh→〇width
などなど...単純な誤記や、セレクタのスペルミスなど、要は打ち間違いです。
なかなか書いていくと終わりが見えませんが、上記に挙げさせていただいたものがメジャーなトラブルでしょうか。
ちなみにスペルミスや誤記は下記のW3Cのバリデータで容易に発見することができますので、ぜひ使ってみてください。
この記事を読んでいる方にオススメの記事
- CSS画像／テキストレイアウトにて、画像の横サイズ可変に対応したCSS
- CSSfloatさせた要素を簡単にfloat解除させる「clearFix」
- CSS設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」
- CSSテキストの両端を均等にそろえるCSS
- CSSFirefox、Safari、chiromeでテキストエリアのリサイズをCSSで制御
- CSSfont-familyの指定
- ※承認制のため、即時には反映されません。
sakatama さん
> ×width→〇witdh
正と誤が逆です！＞＜
admin さん
>sakatama様
大変失礼いたしました。
修正させていただきました。
この記事にコメントする