【Tips】CSS編集がうまくできないとき | CSS勉強中スタッフのブログ

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

アメブロでブログデザイン・ブログ改造・カスタマイズ!

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

おはようございますアップ
CSS勉強中スタッフです
東京は雨で涼しいよ雨


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


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



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

CSSの編集をしたビックリマーク
表示確認もできたチョキ
保存したアップ
・・・
あれ?できてない。。。はてなマーク

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

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

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




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

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


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

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


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





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

NG 上手くいかない例
.sample{
color:red  ←最後に「 ; 」が無い
background black;  ←真ん中に「 : 」が無い
}


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


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

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






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

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






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

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

どこも間違ってなければ、合格になるビックリマーク
ちょっと難しいけど、なんかすごいひらめき電球
参考につかってみる目








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


読者登録してね

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