CSSが効かない時の...|独学でWebデザインの勉強をする人のためのまとめサイトです。


WordPressの準備・導入パターンとレンタルサーバー費用相場・比較表
WordPressの始め方、導入パターン・レンタルサーバーの費用相場、おすすめのレンタルサーバーを紹介

マンダラ塗り絵ダウンロードサイト
マンダラや幾何学模様、花、ボタニカルアートの塗り絵を配布中。





CSSが効かない時のエラーの探し方


  • CSSで困った!

CSSが効かない時のエラーの探し方 4分13秒

Webクリオンライン Webデザイン講座の受講生の方から

CSSの記述がどこも間違っていないのに、上手く反映されない。

とのご質問をいただいた際のサポート内容です。

Webクリオンライン Webデザイン講座

データをお送りいただき、内容を確認して、すぐに間違いの箇所を見つけました。

この時、「ここが間違っています。」というように、直接、記述ミスの部分をお伝えしてもよかったのですが、ここで、問題が解決しても、また次に躓いた時、解決できずに止まってしまうでしょう。

「答えを知る」よりも、「答えの探し方」を身につけたほうが、格段にスキルアップのスピードが違ってきますね。

そこで、受講生の方には、今回の質問内容を例に、「答えの探し方」のヒントを動画にしてお伝えしました。

通常、有料版講座のサポート内容は、非公開ですが、この動画は、CSSが反映されずお困りの方にも役立つと思いますので、今回は一般公開いたします。

このページでは、以下にテキストや画像でも説明していますが、動画をご覧になった方がよりわかりやすいと思います。

4分程度でご覧になれますので、ぜひご覧ください!

それでは、どうぞ!

CSSの記述は間違っていないのに、CSSが効かない。

そんな時は、Google Chromeのデベロッパーツールが便利です。

CSSが反映されない部分の上で右クリック⇒検証をクリックします。

Google Chromeのデベロッパーツールが開きます。

 

確認してみると黄色いアイコンでエラーが見つかりました。

マウスオーバーすると何やら英語でエラーメッセージが出ています。

Google Chromeのデベロッパーツール

invalid property value

何の意味かわからないので、この言葉をそのまま検索して調べてみます。

調べてみると、どうやらこのエラーはCSSに全角スペースが含まれる時に出るエラーのようです。

CSSに戻り、該当箇所の記述のスペースをすべて詰めてみたところ、解決しました。

今回はCSSの記述が少ないので、すぐに解決しましたが、大量の記述がある場合は困ります。

簡単に全角スペース部分を調べる方法はないかと思い、

今度は、

dreamwerver 全角スペース

という言葉で調べてみました。

すると、とても親切に解決方法を記載しているサイトがたくさんありました。

おかげさまでDreamweaver でタブやスペースを見つけ出す方法がわかりましたので、やってみました。
Dreamweaver cc 2017使用

「表示」–>「コードビュー」–>「非表示の文字」にチェックを入れます。

以下の部分が、半角スペース、タブです。

Dreamweaver でタブやスペースを見つけ出す方法

この状態でコードを眺めてみると、以下部分の記述に全角が見つかりました。

Dreamweaver で全角を見つけ出す方法

この全角スペースを半角スペースに修正したら、CSSが適用されるようになり、解決しました。

 

CSSの記述に関わらず、何かのスキルを身につけようとして。上手くいかない時は、こんな風にわからないこと、知らない言葉を検索して調べていくと、解決方法が見つかることがほとんどですし、自分自身のスキルアップになりますね!

Web業界で生き抜けるフリーランスのWebデザイナーになるには、「自分で調べて突き進む!」が一番大切な「スキル」であります。

参考サイト

DREAMWEAVER 全角スペース、タブをなくす方法

 

今回、ご質問いただいた受講生の方からのご感想です。

ご回答いただき有難う御座います。
まさか、全角スペースが入っていることで、CSSが効かなくなっていたとは予想もしませんでした。
本当に有難う御座いました。
また、動画も見させていただきました。
このような方法で不具合を対処していけばいいのですね。
解説もわかりやすく、今後参考にしていきたいと思います。




Facebookページに「いいね!」をクリックしていただくと、当サイトの更新情報を受け取ることができるようになります。
ぜひ、「いいね!」していただけると嬉しいです!



Pagetop