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

2021.11.10

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

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

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

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

  • 特徴と使い方
  • よく見るエラー構文と対処法

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

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

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

「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を入力する
  • ファイルをアップロードする
  • CSSコードを直接入力する

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

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標準規格に準拠したコードを書くメリットは大きいです。

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5