CSSに設定を追加しても反応がないときは直前の閉じカッコをチェックする

CSSに設定を追加しても反応がないときは直前の閉じカッコをチェックする

CSSに設定を追加しても反応がないときは直前の閉じカッコをチェックする

アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロのCSSを編集してカスタマイズするとき、

「CSSにコピペしましたが反応がありません」

という声が読者さんから寄せられることがよくあるのですが、その原因の第一位は、

最新の情報に更新せずに確認したことによるものです。

そして、第二位が本記事のテーマである直前の設定の閉じカッコがないというミスです。

ですので、CSSに設定を追加して最新の情報に更新しても全く設定が反映されない場合は、まずは、最後に追加した設定の直前の設定の閉じカッコ「}」の書き忘れがないか調べてみてください。

基本的に、CSSに追加する設定は、次のような内容が一つの単位として構成されています。

セレクタ {
  プロパティ : ;
  プロパティ : ;
  プロパティ : ;
}

例えば、CSS編集用デザインのアメブロで、記事本文の文字サイズを14ピクセル、文字色を黒にするためのCSSの設定は、次のようになります。

.articleText {
  font-size : 14px;
  color : #000000;
}

基本と例は、対応する場所の色を同じにしてありますので、どこがどこに該当するのか何となく分かっていただけると思います。

まず、セレクタ(例では.articleText)は、設定の対象となるものを識別するための名前です。

また、プロパティ(例ではfont-sizeやcolor)は設定したい項目の名前、値(例では14pxや#000000)はそのプロパティ項目に設定する値です。

プロパティのセットは、一つの場合もあれば、何十個もある場合もあります。

そして、最初プロパティのセットの開くカッコ「{」があり、最後プロパティのセットの閉じカッコ「}」が必要です。

この閉じカッコがないと、そのセレクタに対する設定がどこで終わりかがわからないからです。

ところが、唯一CSSのファイル内の最後に書いてある設定に限り、閉じカッコがなくても、ファイルの終わりが設定の終わりと判断されて、問題なく設定が反映されてしまいます。

でも、これでうまくいったと思って、さらに続いて設定を追加した時に問題が発生します。

今しがた追加した部分の直前の設定の閉じカッコがないため、その(直前の)設定の終わりがどこかわからず、その部分でエラーが発生し、以降の設定がうまく反映されない状態が発生するわけです。

これが、コメントや問い合わせで、

「できません」

の原因になっているというわけです。

なので、上でも書きましたがもう一度、CSSに設定を追加して最新の情報に更新しても全く設定が反映されない場合は、まずは、最後に追加した設定の直前の設定の閉じカッコ「}」の書き忘れがないか調べてみてくださいね。

ちなみに、閉じカッコがない状態のままどんどん設定を追加していってしまうと、直前に追加した設定だけではなく、もっと上のほうまでチェックしていかなければならなくなり、エラー箇所の発見が非常に困難になってきます。

つまり、CSSに一つ設定を追加する度に、直前の閉じカッコがちゃんとあるかをチェックしておくことが大切ということになります。

なお、別サイトになりますが、自作の閉じカッコ忘れをチェックするツールを公開していますので、もし必要があれば使ってみてください。

ごく簡易なツールなので、まったく完璧ではありませんが、ある程度は閉じカッコ「}」忘れを見つけることができますので。

関連記事

CSSを編集してアメブロをカスタマイズする方法
CSSを編集した後はF5キーでブラウザの表示を「最新の情報に更新」する
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ

2012/11/21 加筆修正しました。
2012/01/29 記事公開。