『css 効かない！！』って人がやるべきこと

はじめに

プログラミングする上で誤字脱字をするのは、仕方のないことです。
ただ、それをしてしまうとコードが正しく読まれなくなります。

自分自身、凡ミスで作業が止まってしまうことが多いのでメモとして書かせていただきます。

今回は、cssがうまくいかない時に何が原因なのか、あるある5選！！

1 .(ドット)がない

main {
 間違ったcssの記述
}

これ意外と気づかないんですよ。
{}はエラー出てくれるんですけど、これ出ないんですよね。

正しい書き方！！！

.main {
 正しいcssの記述
}

2 全角スペースを使ってる

.main {
  padding:　10px;
 間違ったcssの記述(伝われ)
}

多分伝わりませんね。
プログラムは半角でしましょう

正しい書き方！！！

.main {
  padding: 10px;
 正しいcssの記述（伝わらん）
}

3 セミコロン、{}(カッコ)が抜けている

.main {
  padding:　10px
 間違ったcssの記述

これは絶対に読みこれません。
絶対にエラーが出るのですぐ直しましょう。

正しい書き方！！！

.main {
  padding: 10px;
 正しいcssの記述
}

4 親要素、子要素の理解が浅い。

根本的な技術力の問題です。
例えば、こんな感じ。
極端かもしれませんが箱の中の文字を横にしたいのに2番目みたいにできない！
って場合です。
親子関係はしっかり図にしてみるといいかもしれませんね。

See the Pen Qiitaの投稿(css4番) by ユウキ (@_yuki0302_) on CodePen.

5 CSSの指定がかぶっている

指定されたCSSの要素がかぶっている場合、決まっている優先度に従いCSSが解釈されます。
基本的にCSSやHTMLはブラウザが上から順番に読み込んでいくので、指定がかぶっている場合は下部に記述されているものにどんどんスタイルが上書きされていく特徴があります。

1番目
.sanple {
  margin: 500px;
  width: 400px;
}

2番目
.sanple {
  margin: 300px;
  width: 200px;
}

この場合、2番目の記述に上書きされます。
cssの記述が無駄に多くなるだけなので消しましょう。

　終わりに

よくある間違いを5個挙げました！
簡単なミスですがわからないことあるので、ぜひこの記事をご活用ください！