【Tips】CSS編集がうまくできないとき

おはようございます

CSS勉強中スタッフです
東京は雨で涼しいよ

今日は、CSS編集してみたけど、上手くいかないぞってときの見直し方をまとめたよ

※このブログの記事は、「CSS編集用デザイン」（新CSS）のに関する内容です。「【カスタム可能】ベーシック」のCSS編集には対応していません。

CSSを見直す前に、ブログの画面を最新の情報に更新してみる

CSSの編集をした

表示確認もできた

保存した

・・・
あれ？できてない。。。

ってとき、念のため、自分のブログをもう一回最新の情報に更新してみて。
保存した後、自分のブログを表示しながら、
キーボードの上のほうにある「 F5 」ボタンを押すか
画面の上のほうにある 更新マークのボタンを押してみて

最新の情報になっていないことが原因だったらこれでなおるよ

CSSが「 .xxxx{ 」で始まって「 } 」でちゃんと終わっているかを見直す

良い例

.sample{ 　←これで始まって
xxxx
xxxx
xxxx
}　　←これでちゃんと閉じる

上手くいかない例
閉じる「 } 」を忘れちゃうことが多いかも

.sample{
xxxx
xxxx
　←閉じる「 } 」がない
.sample2{　←閉じてないのに次が始まってる

.sample{
xxxx
xxxx
} 　←ここで閉じてるけど、、
xxxx
}　　←ここでも閉じてる

指定がきちんと書いてあるか、スペルミスが無いか見直す

上手くいかない例

.sample{
color:red 　←最後に「 ; 」が無い
background black; 　←真ん中に「 : 」が無い
}

..sample{ 　←よーくみると「 . 」が一つ多い
color:red;
background:black;
}

.sample{
color:red;
メモメモメモ　← 途中に/* */で囲っていないメモ書きが挟まってる
background:black;
}

※メモ書きは /* */で囲わないと周りが壊れるよ
この記事を参考にしてね

CSS編集デザインを選択しなおして、CSSを初めからやってみる

周りのCSSの文法が壊れてしまっているかもしれないから、もう一度一つ一つやり直してみるとうまくいくかも

CSSの文法をチェックしてみる

CSSをチェックしてくれるページがあるらしい
自分のCSSを全部コピーして、このページに貼り付けると、どこが間違っているか教えてくれる

⇒ CSS 検証サービス

どこも間違ってなければ、合格になる

ちょっと難しいけど、なんかすごい

参考につかってみる

上手くいって、みんな思い通りのカスタマイズができるといいな

※このブログのカスタマイズは、「CSS編集用デザイン」 を使ったものです。
CSS編集用デザイン以外のCSS編集に対応していません。
※画面、仕様は記事が投稿された時のものです。

CSS勉強中スタッフのブログ