よくあるCSSの記述ミス

最終プロパティ末尾のセミコロン( ; ) の有無に注意

CSSというのはこんな感じです ↓

.xxx {
  margin: auto;
  font-size: 1.3rem;
  text-align: center
}

ソースをよく見た頂くとわかると思います。最終プロパティの text-align の値である center の後ろに ; が付いていません。

それ以前の margin や font-size の値の後ろにはセミコロンが付いています。最終の text-align にだけ付いていません。これは正しい記述です。 最終プロパティの末尾セミコロンは不要なんです。

ところがそれを知らずに 何かを足した場合。

.xxx {
  margin: auto;
  font-size: 1.3rem;
  text-align: center
  color: red;
}

クラス名 xxx を持つ要素のテキストを赤くしようと color: red; を足しているわけですが、この内容は反映されません。何故なら一つ前の text-align 末尾にセミコロンが無いからです。セミコロンが無い = 同じプロパティへの指定が続いている という解釈になりますので、赤色指定(color: red)のみならず手前のテキスト位置揃え指定(text-align: center)までもが影響を受けて機能しなくなります。

何かを追加する際には最終プロパティのセミコロンの有無を確認しましょう。大抵のテンプレート製作者は全ての末尾にセミコロンを付ける方針で作成していると思います。が、スピード対策などを施す場合には不要なものを極力取り除く傾向にあります。最終末尾セミコロンも「不要なもの」にあたりますので、もしかしたら意図的に省いてあるかもしれません。

media queries のブレイス( } ) の有無に注意

レスポンシブデザインテンプレートの場合、スタイルシート内に @media screen and (min-width: 数値px) という文字列を見つけられます。これは media queries (メディア クエリィズ)と言って、ブレイクポイント(画面幅に応じた装飾の切り替え)を司るものです。以下はサンプルです。

@media screen and (min-width: 768px) {
  .xxx {
    margin: auto;
    padding: 30px
  }  
}

末尾の緑色の } (ブレイス, right curly brace)のつけ忘れが非常に多いです。ここをミスするとそれ以降全ての内容が狂ってしまいます。ブレイクポイント調整のカスタマイズ後にデザインが失われたときには疑ってみると良いでしょう。

これは作者のブログコメント欄で指南を受け、その内容をコピペした場合に多く発生します。コメント欄というのは文頭のスペース(空白)が反映されませんので、以下のような記述提案になります。

@media screen and (min-width: 768px) {
.xxx {
margin: auto;
padding: 30px
}  
}

つまりインデントがつけられないんですね。なので各行の文頭が揃ってしまう。すると最終ブレイスを見逃しやすい、と。

初心者の方は無理にインデントを利用しない方が良いと思います。特にhtmlの方。インデントやスペースが描画に影響することもありますので、そのあたりの知識量によっては避けた方が無難です。インデントや半角スペース(全角のスペース使用はhtml, CSS, JS全てに於いて不可)を用いる場合には最低でもhtml専用エディターで作業を行ってください。

全角と半角を間違える

web言語は英文がデフォルトですから 全角の概念はありません。ところがFC2ブログユーザーの多くは日本人でしょうから、うっかり全角のまま文字や記号を打ってしまうことがあります。アルファベットなどは見分けがつきますが、半角記号やスペースは判別がし難い ですよね。特にスペースは目に見えないのですからなおさらです。

単位のつけ忘れ

例えば以下のようなもの。

.xxx {
  margin: 10 auto
}

上下マージンの指定が 10 とありますが単位が付いていません。px や em など単位を付け忘れないように注意してください。

htmlにはこういう書き方があります。

<img src="" width="300" height="300">

width属性の値が300、height属性の値が同じく300で、いずれも単位がついていませんがこれは px が省略されています。逆にこのhtmlパターンでは単位をつけることがエラーです。が、CSSで単位を省くことはめったにありません。line-heightぐらいではないかな、と思います。

まとめ

的確なCSS指定が出来ない、という場面ももちろん有ります。例えばdisplay値がblockの要素に対して text-alignプロパティでセンタリングをしていたり。(block値を持つ要素のセンタリングはmarginで行います)
あるいはdisplay値inlineの要素に対して width/ heightプロパティを適用していたり。(width, heightはinline値には効きません)

そういうパターンは抜きにして、「なんか知らんがデザインがぐちゃぐちゃになった ｡(ﾟうｪ´ﾟ)ﾟ｡」という場合ほとんどがここに記したようなミスに起因しています。なにせweb言語というのは記号一つ(ry
カスタマイズ時には最新の注意を払うようにしましょう。そしてカスタマイズ前には複製を取ってくださいね。