面倒なCSS!？

面倒なCSS!？

Web プログラミングには基本的に HTML/CSS/Javascript が必要です。この中でも意外に面倒なのが CSS です。この記事ではなぜ CSS が面倒なのか考えてみました。

HTML と Javascript は意外にシンプル

HTML と Javascript の方が、学習することは多いのはあきらかで。 しかし、HTML の場合は、記述が誤っていると目で見てわかりまし、間違いの箇所は比較的簡単に特定できます。

Javascript の場合は、少し事情が変わってきます。 Javascript の問題は、大きく二つあります。

＊　Javascript の記述上の誤り（文法のエラー）

＊　プログラムの論理的な誤り（バグ）

Javascript の記述上の誤りは、その箇所を実行した場合はエラーメッセージがコンソールに表示されるので間違いの場所の特定は簡単です。 プログラムの論理的な誤り（バグ）の場合は、場所の特定は少し難しくなります。しかし、デバッガーなどを使って、データの中身を見たりして工夫することで、バグを見つけることができます。

いずれにしても、プログラミング言語でプログラミングをする場合、バグを見つけて修正するのはプログラミング開発の一部です。

CSS は何が違う？

CSS が特別というわけではありませんが、CSS の場合、問題の箇所を見つけるのが意外に難しいという事情があります。 HTML と同様に目に見えるという点では、想定通りに動作しない場合は、思ったような表示になりません。

そいう点では簡単に問題が見つかりそうです。

しかし、実際は表示が思うようにされないけれども、何が原因か特定しにくい場合が多いのが CSS の世界です。 CSS の記述があるにもかかわらず、その記述が反映しないケースがたくさんあります。

もう一つは、CSS の場合はエラーが表示されないという問題があります。 CSS の記述が間違っていても、特にエラーメッセージが表示されないので場所の特定が難しいという問題があります。 誤った記述があった場合は厄介で、それが原因で他の記述も有効にならない場合もあったりします。

そういう意味では、CSS は無言で何も言わないのでなかなか修正するのが一番難しいと言えます。

CSS のデバッグはどうやる？

では、CSS のデバッグはどうやれば良いかという事になります。 Google の Chrome などのデバッグモードを利用して、どの記述が有効になっているかを確認しながら問題の箇所を特定するのが一般的な方法です。 そういう意味では、問題の場所の特定の方法はあります。 また、最近のエディタは CSS の記述をチェックできるようになっています。CSS を入力しながらエディがチェックできれば、ほとんどの記述上のエラーは回避できます。

そう考えると、デバッグする方法があるので実はそんなに厄介ではないという見方もできます。

なぜ面倒に感じるか？

実際は、HTML と Javascript の方に目が行きがちで、CSS は軽く見られている場合が多いのではないかと思います。 CSS はどちらかというと、オマケのイメージで、学習の中心も HTML や Javascript の方に集中するケースが多いという事なのだと思います。

面倒に思えたり、難しいと思うのは「想定外」の CSS でつまずからだと思います。

特に、CSS は開発の仕上げというか、最後の段階で調整を行う場合も多く、ほとんどの基本機能ができた後で、思うような表示にできないということになります。限られた時間で問題を解決しなければならない環境で対応するため、難しく感じる事が多いのだと思います。

まとめ

CSS は面倒、難しいようなイメージを持つ方も多いと思います。 しかし、冷静に考えてみると、Javascript や HTML と同じ程度の、デバッグのツールや方法があります。 また、最近のエディタは入力の際にほとんどの記述上のエラーは指摘してくれるので、現実には Javascript/HTML と CSS の差は殆どありません。それでも、面倒に感じる事が多いのは、CSS がオマケのようなイメージがあるからだと思います。

簡単だと思っていたところで躓くというのは、「想定外」のできことで、「こんなはずではなかった」と思いがちです。 そういう場合には、印象として実際の問題より難しくて面倒な問題と思い込みやすくなります。

Web 開発では、HTML と Javascript に並んで、CSS も大きな要素で、決してオマケではありません。

開発では、CSS の記述とその調整・デバッグにも十分な時間を確保することで対応できるようになります！