個別記事のページです

2014年10月15日(水)
このエントリーをはてなブックマークに追加

CSSが利かない時に見直すポイント

最近自分でコーディングしたり新人さんのコードをチェックしたりする中で、
「CSSを設定したはずなのに利かない...どうして...」という事があるので、
その中で特によく陥る失敗点や注意点などをまとめました。

1.CSSの先頭に付ける「#」と「.」の違いを理解する

CSSで失敗するポイント1 最初によく陥る失敗の1つに、CSS側でid名やclass名がしっかり設定できていないという事がよくあります。

class名に対してスタイルを設定したいのに先頭に「.」が無い、
id名に対してスタイルを設定したいのに先頭が「#」ではなく「.」になってしまっている...など。

CSSではid名の先頭は「#」、class名の先頭は「.」で開始するという事を
しっかりおさえておくのがポイントです。
CSSを始めたばかりの方が特によく陥る失敗のようですので、おかしいな?
と思ったらチェックしてみるのがお勧めです。

2.id名やclass名を正しく付ける

CSSで先頭の「#」「.」の使い分けが正しいにも関わらずCSSが利かない場合は、
htmlでid名やclass名の指定が正しくできているか確認してみます。

例えば以下のように
divに対してclassを2重に設定していたり
CSSで失敗するポイント2
class名を複数設定した時に、全角スペースや2つ以上の半角スペースが入っていたり
CSSで失敗するポイント3
閉じタグ「"」が不足していたりしますと
CSSで失敗するポイント4
ちょっとした事でCSSが利かない、もしくはページが崩れてしまう原因になってしまいます。

正しくclass名が設定されたhtmlの例はこちら 正しくclassが設定されたhtmlの例
また、html側とCSS側でid名class名のつづりが1文字違うだけでもCSSが利かなくなるので注意が必要です。

id名とclass名の使い分けと正しい設定方法をマスターして、快適なコーディングを!
書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。
お問合せ