第21回　CSSコーディングでハマったら…テーブルレイアウトを卒業しよう

CSSコーディングでハマったら…

黙々とCSSコードを書いていると、ときどき「正しく書いてるのにちゃんと表示されない！」ということがあると思います。いわゆる「ハマり」状態。

こうなったら書き直してみたり、怪しい場所をコメント化したり、祈ってみたり泣いてみたりといろいろやるっきゃないのですが、人力よりは便利な道具を使うべきです。

CSS Validation Serviceとは

その名前の通り、W3Cが提供する、CSSのValidation（検証）を行ってくれるWebサービスです。

これは何? 私には必要?

W3C CSS 検査サービスは、W3Cによって作られたフリーソフトウェアで、ウェブデザイナーやウェブ開発者が CSS (Cascading Style Sheets; カスケーディング・スタイルシート) をチェックするのに使うことができます。このサービスは、ウェブ上のフリーサービスを通じて使ったり、ダウンロードして Java プログラムとして実行したりウェブサーバー上で Java サーブレットとして使ったりできます。

あなたに必要かどうか? もしあなたがウェブ開発者やウェブデザイナーなら、このツールがとても役立つでしょう。このツールは、あなたのスタイルシートを CSS 仕様と比較するだけではなく、エラーやタイプミス、CSS の誤用などを発見したり、あなたの書いた CSS が使い勝手を悪くするような場合に教えてくれたりします。

"このサービスについて"

CSS Validation Serviceの使い方

使い方は非常にカンタン。まずは、CSS Validation Serviceにアクセスします。

検証手段は、

URLで指定して検証
ソースファイルをアップロードして検証
テキストエリアに直接入力して検証

の3つから選ぶことができます。

W3C CSS Validation Service

タブでいずれかを選択し、入力したら検証ボタンをクリック！

すると、エラーや警告がある場合には該当箇所を教えてくれます。この結果はCSSの仕様にのっとっているため、ブラウザーの表示に問題がなくてもハックなどを使っている場合は指摘されます。

DreamweaverでCSSの使い方を習得: スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。; Dreamweaver CS5 CSSデザイン手法

それは仕様外の記述方法なので仕方ないのですが、表示がうまくいっていないときにも役立ちます。とくにDreamweaverのデザインビューやライブビュー等は、多少のCSSのエラーを無視してしまうことがあるようで、ハマる原因になることがたまにあります。

私はさきほど「Dreamweaverでみるとwidth指定がうまくいってる」しかし「ブラウザでみるとどう見ても幅100%」という状態でハマりかけましたが、あわてずさわがずValidatorを通してみたところ、「@charset」がなぜか「@ charset」になっていました。（@とcの間に半角スペース）初歩的すぎるタイプミスで恥ずかしいですが、ハマるのって得てしてそういうモンですよね！（きっと）

そういうわけで便利なCSS Validation Service、使ったことない方にはオススメしておきます。では次回もお楽しみに。（こう）