個別記事のページです

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の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ