CSSの記述ミスを無くす方法

webの仕事を始めて約2年。
同僚に(x)html+CSSのサイト構築手順を教えることも多くなりました。
その中で、彼女達が意外にも簡単なミスでつまづくことに気づきました。
私はずっと「まだまだ技術が足りない、足りない」と切に感じていたのですが、意外にも人に教えることで自分がどのくらい技術を持っているかを知りました。
このあたりが独学の恐ろしいところですね。自分ひとりでは、どのくらいの力を持っているのかわからない。

同僚が作ったソースを私は全く触っていないのですが、見ただけですぐにどういう間違いを犯しているかわかったとき、意外に自分ってコードを読めるんだなと感じました。
これは自慢ではなくて、『経験がCSSの記述ミスを減らす』ということが言いたいわけです。
意図しない表示がされてしまった場合、CSSのどこが悪いのか、ということがこれまで蓄積してきたノウハウから瞬時にわかるわけです。

同僚の彼女達はこれまでwebサイトを作ったり学んできたりはしているけれど、CSSを知らなかった人たちです。
私は結構それも驚きました。これだけCSSが普及しているとはいえ、個人サイトレベルではCSSを知らない人たちはまだまだいるという事実を知りました。

彼女達やかつて私自身も多かったミスを挙げてみます。
1. 行末にセミコロン(;)を付け忘れている
2. スペルミスをしている
3. 全角スペースを記述してしまっている
4. 違うファイルに記述している

うっかりミスはこんな感じです。
このあたりを気をつければかなりミスは減ってくると思います。
うまく表示されなかったら、このあたりを疑ってください。

高度なミスになってくるとCSSの優先度がわかっていなかったとか、子孫セレクタの使い方を間違っていたとかあります。
あと、意外に多かったのは、違うファイルを見てたというやつ。ファイルの管理に問題がありそうです。


まず、CSSの記述ミスを減らす方法の大原則は、『高度なエディタ』を使用することです。
windows付属のメモ帳を使ってはいけません。
必要な機能としては、
1. 半角スペースと全角スペースの違いが視覚的にわかる
2. ソースを色で管理できる

3. 行番号が表示できる
4. ルーラー(文字数)が表示できる
5. UnDoやReDo(やり直しや元に戻す機能)ができるだけ無制限
6. 正規表現が使える
7. 置換や検索ができる
8. ファイルをツリー管理やタブ管理できる

これだけあれば十分です。
1と2がCSSの記述ミスを無くすために必要な機能。あとは、能率アップにつながる機能です。

私も最初に彼女達にエディタを与えました。
「webデザイナーなら、やっぱりDreamwerverでしょ!」と言って最初からかなり高度なエディタを使いたがる方もいらっしゃるかもしれませんが、私個人の意見としては、Dreamwerverは使いこなせるようになること自体にスキルが必要ですので、コードを覚えるまでは、使わないほうがよいでしょう。
フリーで出回っているもので十分です。
窓の杜とかで検索すると結構ありますよ。
http://www.forest.impress.co.jp/lib/offc/document/txteditor/

個人的にオススメなのは、EmEditorez-HTMLです。
これらは、上記に挙げた必要な機能を満たします。
EmEditorはシェア版とフリー版があります。
私はEmEditorのシェア版を使用しておりますが、フリー版でも十分だと思います。
ez-HTMLはフリーです。多少バグもあったりするようですが、随時改修しているようです。
意外にCSSを色分けしてくれるフリーソフトはないような気がしますが、これらはCSSも色分けしてくれます。多彩な言語や文字コードにも対応。

高度なエディタを使うことにより、「スペルミス」や「全角スペースの記述してしまっている」ということが視覚的にわかりますので、ミスを見つけやすくなります。

後は、最初に言いましたが、経験です。
記述ミスをしてしまっても次からは同じミスはしなくなります。
私は今は、上記のようなミスは全くしません。(不具合が起こるとすれば、ブラウザの相関性あたりででしょうか。)

あなたも、どんどん経験を積んで、自分なりのノウハウを貯めていってください。


2007年1月12日 追記
CSSチェックは、ミスがないと思ったときにも必ずやりましょう!
もちろん、CSSがうまくできないときにも、どこが文法的に悪いのかわかるので便利です。
オススメはもちろん、W3CのCSS Validator。最近どうやらリニューアルしたらしくJavaScriptが使ってあります。
http://jigsaw.w3.org/css-validator/
投稿日:2006年12月28日

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

top