XHTML/CSS・トップ | 検証・目次

●CSSの検証をする

 正しくCSSをデザインしたかどうか検証するにはWebの標準仕様、各種仕様の策定を行っているW3Cの提供する「W3C CSS 検証サービス」を利用すると良いでしょう。日本語のサイトがあり、以下のサイトにアクセスすると「URLで指定して検証」「テキストエリアに直接入力して検証」「ソースファイルをアップロードして検証」の3つの検証方法があります。適した方法で検証してください。なお、「URLで指定して検証」以外の「テキストエリアに直接入力して検証」「ソースファイルをアップロードして検証」は純粋にCSSソースのみを入力またはアップロードして検証します。URL指定での検証はCSSを指定しているWebページのURLを入力して検証します。

・「W3C CSS 検証サービス」
 http://jigsaw.w3.org/css-validator/

 検証したいCSSをテキストエリアに入力して検証を選択した場合、ソースが長いと結果が反映(表示)されないことがあります。その際は、ほかの方法を選択してください。ファイルをアップロードして検証する方法はパソコン上のファイルを文字通り、アップロードして検証する方法のことです。1行テキスト入力フォーム横の「参照」ボタンをクリックすると「ファイルの選択」画面が表示されますのでアップロード対象のCSSファイルを選択して、“このCSSソースファイルを検証する”ボタンをクリックします。すでにCSSファイルを指定したXHTML(HTML)ファイルをアップロードしている場合は、「URLで指定して検証」を選択することができます。XHTML(HTML)文書に style要素でCSSを指定している場合でも併せて検証することができます。検証条件は、「一般的なものを出力」「全て出力」「重要なものだけ出力」および、「CSS version1」「CSS version2」「CSS version2.1」「CSS version3」など幾つかのバージョンがありますが、ニーズにあった条件を選択します。(通常は、version2を選択します。また、Mediumはメディアタイプのことなので通常、allを選択します。)検証を開始して、“エラー”が表示されましたら記載されている内容をチェックし、修正します。警告はあまり神経質になることはありません。指定した全面色(color)に対応する背景色(background-color)が指定されていない場合や、またはその逆の場合でも警告として表示されるからです。従って、修正せずそのままでも構いません。「URLで指定して検証」して、正当なCSSと検証された場合、次のようなソースが記載されています。(正当なCSS検証結果を証明するアイコンのようなものです。)

<p>
 <a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</p>

 これでも良いのですが、次のように指定することもできます。(アイコンはダウンロードして自分のサイト上に保存して指定することもできます。ここではW3Cの検証サービスのサイト上にあるアイコンを指定しています。)

【XHTML】↓

<p>
 <a href="http://jigsaw.w3.org/css-validator/validator?uri=あなたのサイトのURL(http://www〜)"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</p>

または、

<p>
 <a href=" http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</p>

※上記の方法は、 HTML/XML 文書のみに有効です。

※referは、引用する。参照する。帰する。〜に属するものとするという意味があり、検証結果を表示させるWebページまたは、アイコンを表示させているWebページのURLを“referer”と置き換えて記載します。

※ソースはすべて編集時点のものです。実際に利用するにあたっては、検証結果に表示される内容およびソースをご参照の上、ご利用ください。

■Q&A

Q1 なんのために検証するのですか
A.自己流でCSSをデザインしていては記載ミス、文法ミスに気が付かない場合が多いし、いつまで経っても上達しません。(CSSをサポートしている)多くのブラウザで正しく表示されるようにするには検証サービスおよび、チェックを受けるのが手っ取り早いのです。

Q2 アイコンは表示させたほうがいいのですか
A.必ずしも付ける必要はありません。サイトの趣旨にもよるでしょう。ただし、CSSの検証そのものは受けたほうが良いでしょう。

Q3 アイコンは正しいCSSデザインの証明になるのですか
A.非常に簡単なCSSソースでも正当なCSSとして検証されてしまう場合がありますので必ずしも高度なCSSを運用している証明とはいえない場合があります。アイコンはサイトの趣旨と必要性に応じて使うべきでしょう。貼り付けるのは自由です。

XHTML/CSS・目次 | 検証・目次

Copyright (C) 2006-2007 http://www.xml.vc/