CSSの代表的なValidator「CSS Validation Service」の使い方とは？よくあるエラーコードも解説

CSSコードがきちんと書けているか、心配になることがありますよね。

validator（バリデータ）を使えば、CSSやプログラム言語などの正確さをチェックすることができます。

CSSのvalidatorツールでは、W3Cが公開している「CSS Validation Service」が特に有名です。

今回は、この「CSS Validation Service」について、

以上の項目に沿って、解説していきます。

この記事を読めば、CSSのValidatorである「CSS Validation Service」の使い方やエラーの対処法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

「CSS Validation Service」とは？どんなことができるの？

「CSS Validation Service」はW3Cが提供しているCSS専用のvalidatorです。

他には、HTMLコードをチェックする「Markup Validation Service」というツールもあります。

W3Cとは、「World Wide Web Consortium」の略で、Web技術の標準化を行っている非営利団体のことです。

端末やブラウザなど、別々の環境において互換性を保つために、Web標準規格を定める活動をしています。

現在、多くのブラウザがW3C勧告に準拠しているため、Webサイトを作る際にもこのWeb標準規格が重要となってきます。

W3Cの「CSS Validation Service」は、作成したCSSコードがWeb標準規格に沿っているかどうかを判定します。

CSSのValidatorを使うメリット

CSSのValidatorを使うことで、どのようなメリットがあるのでしょうか？

2つのメリットを紹介します。

気づきにくい文法ミスを見つけられる

セレクタやプロパティなどのスペルミス、使い方の間違いなどをチェックできます。

ブラウザで確認しても思い通りのレイアウトにならない場合に大きな助けになるでしょう。

また、文法があっていても、参考にしたサイトの記述が古い場合や今では非推奨である場合などがあり、Web標準規格としては好ましくない場合もあります。

例えば、imgタグにalt属性は必須となっています。

alt属性とは、画像の代わりとなるテキスト情報で、何かの不具合で画像が表示できないときに、表示されるものです。

タグの中にalt属性が記入されていなくとも、ブラウザ上で画像が表示されてしまうので、こういうミスには気づきにくいですね。

Webページ管理がしやすくなる

W3CのWeb標準規格に沿って記述することは、最初は大変かもしれません。

ですが、正確な文法でコーディングすることは、今後の管理において大切になってきます。

その場のルールでコーディングしてしまうと、後で見た時に構造が読み取りづらくなり、修正などに多くの時間を割くことになります。

複数人でメンテナンスをしている場合はもちろん、1人で管理している場合も注意が必要です。

記憶は薄れていくものなので、いつ見ても理解できるように明確なルールで記述しておきましょう。

「CSS Validation Service」の使い方

「CSS Validation Service」は、以下の3つの方法で使用できます。

それぞれ見ていきましょう。

URLを入力する

「URLを指定」というタブを選択し、入力フォームに調べたいWebページのURLを貼り付けます。

「検証する」をクリックすると、チェックが開始されます。

ファイルをアップロードする

隣の「アップロード」というタブから、CSSファイルをアップロードできます。

CSSファイル以外にも、CSSが書かれているHTMLファイルを読み込むこともできます。

style要素の中にCSSを書き込んでいる場合に、試してみてください。

CSSコードを直接入力する

「直接入力」のタブで、CSSコードの入力ができます。

こちらもCSSが書かれたHTMLコードを読み込ませることができます。

CSSのバージョン設定に気をつける

一般的にHTMLファイルの場合、最初の宣言でバージョンを示します。

CSSファイルにはバージョンを表すコードを記述していないので、検証前に設定する必要があります。

入力フォームの下のオプションから、検証の細かい設定ができますので、ここでのCSSのバージョン設定を忘れないようにしましょう。

よくあるエラーとその対処法

検証した結果、エラーがない場合には、「おめでとうございます！ エラーはありません」と表示されます。

この場合は特に何もする必要はありません。

エラーがある場合には、エラーの行数とエラー内容が記述されます。

1つずつ対処していきましょう。

CSSでよくあるミスやエラーとその対処法を紹介します。

文法解析エラーが発生しました

文法の記述を間違えていて、正確に読み取れないときに表示されます。

以下はエラーが出るコードです。

/*  クラス名に付ける「.」が多い */
..txt-a {
  color: #ccc;
}

/*  クラス名の先頭に数字を使っている */
.01-bg {
  background: skyblue;
}

「.」の重複や付け忘れに気を付けましょう。

クラス名やID名の先頭に数字を使うことはできません。

上記の他に、全角スペースを入れたり、閉じ括弧を忘れてたりすることでもエラーとなります。

プロパティ ○○ は存在しません

プロパティのスペルミスや存在しないプロパティを記述すると、エラーが発生します。

/*  「font-color」というプロパティは存在しない */
.txt-b {
  font-color: red;
}

「font-color」というプロパティは存在しないため、上記コードではエラーになります。

文字の色を変えたい場合は、colorプロパティで指定しましょう。

次のプロパティが正しくありません

プロパティの書き方を間違えていた場合のエラーです。

/* セミコロン「;」とコロン「:」を間違えている */
.bg-b {
  background: green:
}

/* 数字の後に単位がない */
.txt-c {
  font-size: 16;
}

プロパティの最後にはセミコロン「;」が必要になります。この付け忘れやコロン「:」との間違いに注意しましょう。

font-sizeには、pxやemなどの単位が必要となります。

まとめ：CSSのvalidatorツールでエラーチェックしてみよう

今回は、CSSのvalidatorツールとしてよく使われるW3Cの「CSS Validation Service」について解説してきました。

よくあるエラーコードとその対処法も紹介しましたね。

Webサイトを作る上で、Web標準規格に準拠したコードを書くメリットは大きいです。

コーディングやエラーチェックをする際に、今回の記事が参考になれば幸いです。