【コーダー向け】CSSでつまづきやすいポイントと解決法

css コーディング

CSS覚えることいっぱいあって面倒ですよね。
慣れないうちは、セレクタ?プロパティ?宣言?なにそれって感じですよね。
今回は初心者コーダー向けにCSSについてつまづきやすいポイントと解決法を解説していこうと思います。

CSSとは

CSSとはCascading Style Sheets(カスケーディング・スタイル・シート)の頭文字をとったものです。
簡単に説明するならば、HTMLで書いた情報を人が見てわかりやすく、見栄え良く見せる言語です。

CSSの書き方

css
HTMLに対してレイアウトの指示書なので正しい書き方があります。
といっても難しくはないです。どの部分に対してどういう処理を実行するか指示を出すだけです。
例えば下記のようなスタイルがあったとします。

.sample {
  color: red;
  text-align: center;
}

sampleというクラスが指定してある箇所でcolorつまり文字色をredにするという指示とtext-alignをcenter、つまり文字を中央揃えにする指示が書かれています。
そう考えると難しくはないと思います。どの部分に対してどういう処理を実行するかです。

つまるポイント

私も含め新人時代につまったポイントをまとめてみました。

  1. マージンとパディングの違いがわからない
  2. idとclassの違いがわからない
  3. プロパティがわからない
  4. 正しく書いてるはずなのに反映されない
  5. フロートの挙動がおかしい



解決法

マージンとパディングの違いがわからない

私がわかりやすいと思った表現があります。
まず自分を基準に考えます。そして、
マージンは私とあなたの距離、パディングは内臓脂肪。
言いえて妙ですね。

idとclassの違いがわからない

CSSに書く際は#か.の違いですが、実は大きな違いがあります。

id

固有の名前を割り当てる際に使います。
そのため1ページに1度しか使えません。
例)#hader,#footer,#wrapperなど

class

種別での名前を割り当てる際に使います。
こちらはidと違い1ページに何度でも使えます。
汎用的に使うクラスを作って使いまわすときなどに使われます。
例).block,.sec,.boxなど

プロパティがわからない

わからないと不安ですよね。でも安心してください。
私も正直すべてを覚えているわけではありません。
下記サイトなどで調べて記述しています。
スタイルシートリファレンス

正しく書いてるはずなのに反映されない

今でもたまにやってしまうやつです。
同じ記述でも後ろに書いたものが上書きされます。
簡単にですが下記のようなCSSがあったとします。

.sample {
  color: red;
  font-size: 12px;
}
.sample {
  font-size: 15px;
}

実際はすぐ下に書いてたりはしないかもしれませんが、
書く行数が長くなったりしてたまたま同じクラス名の指定をしていた場合後に記述した内容が優先されてしまいます。
上記の場合もともとフォントサイズを12pxで設定していたところ、あとから同じ宣言で15pxのものが上書きされたため.sampleを使ってレイアウトされている箇所はすべて15pxになってしまいます。

また別のパターンもあります。

#wrapper p.sample {
  color: red;
  font-size: 12px;
}
.sample {
  font-size: 15px;
}

上記の場合は細かく設定しているほうが優先されて後から上書きするはずのスタイルが反映されないときがあります。
なぜかというと細かくセレクタを指定しているほうが優先されてしまう仕様のためです。

フロートの挙動がおかしい

今はdisplay:flexという便利なものがありますよね。
でも昔のコーダーはfloatが大好きな人もいます。
かくいう私もflexよりfloatが好きです。
floatってclearで解除しないと次の要素がくっついちゃったりと面倒ですよね。
私の新人時代、からっぽのdivタグにclearってクラスつけて無理やりリセットするやり方が流行りました。
その後clearfixというものでてきました。

今回は違うやり方でやってみます。
下記のような記述で組んであったとします。

<div class="wrapper">
  <div class="box">aaa</div>
  <div class="box">bbb</div>
  <div class="box">ccc</div>
  <div class="content">ddd</div>
</div>

普通にリセットするならばboxの次の要素contentでリセットして組むと思いますが、実は簡単なやり方があるんです。
親要素にoverflow: hiddenを入れることでclearと同じことができるのです。

.wrapper {
  overflow: hidden;
}
.wrapper .box {
  float: left;
  width: 300px;
  margin: 0 20px 20px 0;
}

まとめ

初めのうちは調べながらで全然大丈夫です。

極端な話レイアウトだけならfloatとmarginだけあればサイトは組めちゃうので。
少しずつ成長していけば問題ないですよ。

もっとよく知りたいと思った方はコメントでもツイッターに返信でもいいので是非お気軽にご相談ください。

ではまた。

この記事を書いた人

moga

moga

現役のフロントエンドエンジニア。HTML/CSSはもちろん、JavaScriptも得意。主に初心者コーダー向けに記事を書いています。

タイトルとURLをコピーしました