未分類

おぼえがきCSS〜スタイルシートの変更が反映されないを解消!書き方編〜

失敗や苦労はあとになって思い出すと、以外と単純で簡単なことってありますよね。
でも、困ったときに誰かにやってもらってしまうと、自分では解決ができていないわけで、同じく困ったときに、また誰かを頼らなくてはならない。

失敗は経験だ!と、昔から言われているけれど、せっかく貴重な失敗をしても、誰かに解決してもらったのではもったいない。
失敗をして、恥ずかしい思いをして、自分で解決をしようと必死になって自分だけの答えを出すことが大切です。

たくさん失敗をして、経験をすれば後がラクダ

1コブも2コブもたくさんのコブを作っていきましょう!

スタイルシートの変更

今回は基礎の基礎。
CSSを書き換えた・追記したけど、反映がされない。という時の対処法についての基礎の書き方編です。

まず、チェックすることは、

  • スペルは正しく打ち込めているか?
  • 英数字が全角になっていないか?

この2点を疑ってみましょう。CSS初心者もコピペで大丈夫!と紹介をしている方のブログからコピペをしてきたのに、変更がされない。ってことがありました。やっぱり僕には無理なのかなーと決めつけて投げ出した時期もありました。

そこで、イチから詳しい友人に打ち直してもらいました。すると、友人がなんだ反映されるじゃん。と。どうやらどこかが間違えていたようでした。違いを見てもまったくわからない。コピペミス?だったのかもしれません。

スタイルシートは、弱酸性の敏感肌です。少しでも入力が間違えていると、反応してくれません。

では、どういうことかというと。。。

スタイルシートを書き換えたときに、

例えば、見出しタグh1,h2,h3・・・の色をラクダカラーに変更したいという場合。

h1{color:#8b4513;}

と、スタイルシートに打ち込みます。

正しく打ち込めていれば、

見出しタグh1の色がラクダカラーなりました。

でも、例えば

h1{colpr:#8b4513;}

と、colorのスペルをcoporと打ち間違えてしまっていた場合。

うわっ全然ラクダカラーじゃない。黒ラクダ?そんなのみたことないよー。となりますね。

そこで、スペルを間違えていることに気付かずに、カラーコードがまちがえているのかなー?とか、書き込む場所が間違えてるのかなー?いや、そもそも自分には無理なんだ・・・と、果てしなく考え込んでしまいます。

が、そこはあきらめずに自分を信じて、まずは、打ち間違えがないかをチェックしてみてください!

次に、英数字の全角半角について

これって、パソコンの知識がない超初心者むけ(僕)なんですけど、

半角の中カッコ={ }と全角の中カッコ={ }があることと、間違えてはいけないことを知りませんでした。

なので最初はh1{color:#8b4513;}と打ち込んでいたんですね。

これでは反応をしない。

半角の{ }はShift+カッコキー「」で入力をすることができます。

なので、さっきのh1{color:#8b4513;}h1{color:#8b4513;}とカッコに注意をして書き直すと

うまく変更することができました。間違いなく、ラクダカラーですね。

こんな感じで基礎知識がないけど、頑張るぞ!って方(僕)は、まずはスペル全角半角に注意をしてやってみましょ!

おまけ〜間違え探し〜

次の入力のうち、間違いがいくつもあります。間違えをみつけ、見出しをラクダカラーに変更してください。

h2{collor:rakudairo;}

うーん、どこが間違えているのかさっぱりですねー。。。