CSSが効かない…よくある原因（バグやミス）と対処方法

サイト制作やテーマ制作をしていて、CSSの記述が適用されていない、レイアウトがおかしい、などなど困った事態にぶつかることがよくあります。
私だけでしょうか？
まだまだ勉強中ですが、HTML・CSS覚えたての頃から現在まで、私が実際に出会ってきた様々なバグ、ミス、トラブルについてその対処方法とともに、年末の大掃除として書いてみます。

1. ページの右側に余計な余白が出来る

原因：内包しているコンテンツの横幅が、親要素のボックスからはみ出ている
写真など親要素を超える幅のサイズのものがある場合など。

対処：コンテンツを#wrapで包含し、overflow:hiddenを効かせる

<div id="wrap">
コンテンツ
</div>

#wrap {
width:100%;
overflow:hidden;
}

imgにはmax-width:100%を効かせる

img {
  max-width: 100%;
}

これで余白は無くなると思います。それでも直らない場合はコンテンツのwidthや「viewport」の設定も見直してみましょう。

2. IEで親要素にdisplay:table-cellを指定したときにimg要素にmax-widthが効かない問題

これはIEのバグだと思いますが、非常に困りました。
具体的にはこの問題は、要素をtable-cellで横に並べた場合や、グリッドシステムをtable-cellで実装している場合に起きました。

対処: display:table-cellを指定している要素のさらに親要素にtable-layout: fixed;を指定する

<div class="parent">
  <div class="child">
    <img src="sample.jpg">
  </div>
</div>

.parent{
display: table;
width: 100%;
table-layout:fixed;/* table-layout: fixed;を指定 */
}
.child {
display: table-cell;
vertical-align: middle;
}
.child img {
max-width: 100%;
height: auto;
}

もっと正確には

親(.parent要素)にtable-layout、display、widthの3要素を必ず設定しないとFirefox、IEでmax-widthが効かない事例が確認されています。
親要素にdisplay:table-cellを指定したときにimg要素に対してのmax-widthが機能しないときに確認すべきことは | 福岡 web・ホームページ制作 Eight

だそうです。

3. floatした要素が親要素からはみ出る

これは単にfloat解除を忘れただけなんですが、具体的には「続きを読む」ボタンをfloat:right;させたときに、エントリーの枠の中からはみ出たときにぶつかった問題です。

原因：float解除しないとfloatした要素は高さを失っているため

対処①：後ろにfloat解除用のdivを置く

<div class="container">
<div class="box-left">box-left(左）</div>
<div class="box-right">box-right(右）</div>
<div class="clear"></div> /* float解除用 */
</div>

.box-left {
 width: 150px;
 height: 150px;
 padding: 10px;
 float:left;
}
.box-right {
 width: 150px;
 height: 150px;
 padding: 10px;
 float:right;
}
/* float解除用 */
.clear {
clear:both;
}

対処②：clearfixを使う

<div class="container clearfix">
<div class="box-left">box-left(左）</div>
<div class="box-right">box-right(右）</div>
</div>

.clearfix:after{
content: "";
clear: both;
display: block;
}

floatさせた要素の親要素に.clearfixというclassを当て、その疑似要素:afterにfloat解除をさせるという方法です。
①よりスマートなのでこちらがおすすめ。

floatバグの詳しい解説はこちらの記事がとてもわかりやすかったです。
【脱初心者！】ふわふわお化け？floatバグで泣かないための3つのヒント！ | geechs magazine

4. 真ん中寄せのmargin: 0 autoが効かない

原因：その要素がblock要素ではない、widthが指定されていない

対処display:block;とwidthを指定する

.center-box {
 width: 300px;
 display: block;
 margin: 0 auto;
}

inline要素の場合はtext-align:centerでOKです。

5. 画像の下に隙間ができる

原因：img要素がvertical-align:baseline;となっている

対処：vertical-alignをbottomに指定する

img{
 vertical-align: bottom;
}

6. CSSの記述ミス

単純なミスに気づかず、問題が空回りしていることが、（私には）よくありました

6－1. セミコロン（;）が抜けている

以下のようにセミコロン；が抜けているとその下のプロパティは指定が効きません。

#sample {
  background: red /* セミコロン抜 */
  width: 300px;
}

6-2. 全角スペースが入っている

これもエラーとなり指定が効かない原因になります。

6-3. class名、id名が間違っている（タイプミス）

タイプミスしてるだけなのに、しばらく気づかず…ということがあります。

6-4. カッコ{}のとじ忘れ、または閉じかっこが多い

以下はどちらもエラーになります。

#sample {
  background: red;
  width: 300px;
 /* カッコとじ忘れ */

#sample {
  background: red;
  width: 300px;
 }}/* カッコ多い */

以上は私が実際に出会ってきたCSSのトラブルです。こう見ると、勉強不足が原因というか、バカみたいというか（笑）
CSSプロパティの性質の理解が足りなかったり、IEバグもありますが、結構単純なミスが原因ということも多い気がします。

不具合やバグとは無縁の年末年始ですっきりと新年を迎えたいですね。

関連記事：

blog.minimal-green.com