Web関連

web制作会社が紹介するW3Cチェック(validator)の使い方

こんにちは。コーダーの須澤です。

Webに関わる方ならご存知の人が多いと思いますが、W3CというWebに関する技術を標準化する機関があります。

今回はそのW3Cが提供するHTMLチェック、CSSチェックのツールがあるので紹介したいと思います。

このチェックツールを使うことによって、文法の正しいHTMLやCSSを作成することができます。

それにより、軽量化やSEOと親和性を高めることができます。
まだ、使ったことがないという方は是非、参考にしてみてください!

Markup Validation Service

チェックツール1つ目はHTMLの検証ツール「Markup Validation Service」の紹介です。

https://validator.w3.org/

このチェックツールは、昔からリリースされており使用している人も多いと思いますが、
何度かバージョンアップしているようでして、最近ではHTML5にも対応しています。
使い方は、URLを直接入力する方法、ファイルアップロードする方法、ソースを直接記入する方法の3パターンです。

■URL直接入力の場合

赤丸のタブを選択後に「Address」の部分に検証したいURLを入力します。
※「More Options」の部分は特に選択しなくても問題ありません。

■URL直接入力の場合

suzawa_2015_10_1_002.png

赤丸のタブを選択後に「参照」のボタンをクリックし、パソコンに保存してあるHTMLデータを選択します。
※「More Options」の部分は特に選択しなくても問題ありません。

■ソースを直接記入する場合

suzawa_2015_10_1_003.png

赤丸のタブを選択後に検証したいHTMLソースを赤枠部分にペーストします。
※「More Options」の部分は特に選択しなくても問題ありません。

それぞれの方法で、検証したい内容を入力したら、あとは「Check」ボタンをクリックするだけです。
すると、以下の様な画面が表示されます。

suzawa_2015_10_1_004.png

上記の様な結果が表示されるので、Errorという部分を中心に改善を図っていきます。

例えば上記結果の5.であれば、「<body>タグにlinkやvlinkなどは書かずに、CSSに記載すること」
という内容が書かれているので、その内容を修正して再度Checkをすれば、その項目はErrorとして表示されなくなります。

これを繰り返すことで、W3Cに準拠したHTMLを作成することができます。

新規で作成するHTMLであれば、それほど難易度が高くないのですが、作成済みのHTMLを調整し、W3Cに対応させる場合、難易度が高くなる場合があります。

CSS Validation Service

チェックツール2つ目はCSSの検証ツール「CSS Validation Service」の紹介です。

https://jigsaw.w3.org/css-validator/validator.html.ja

このチェックツールは、日本語化が進んでおり、上記で説明したツールと同様、URLを直接入力するか、ファイルをアップロードするか、CSSのソースをペーストすれば検証することが可能です。

suzawa_2015_10_1_005.png

「検証する」をクリックすると、以下の様な画面が表示されます。

suzawa_2015_10_1_006.png

こちらもHTML同様に、各エラーごとに対処方法が表示されますので、その部分を調整し、再度検証を行えばその項目は表示させなくなります。

これを繰り返し行い、W3Cに準拠させて行きます。

まとめ

このようにしてエラーを消しこんだそれぞれのソースは「構文や仕様の仕方が正しい」=「W3Cに準拠した」ことになります。

また、実はそれを表示するブラウザも、W3Cの定義した内容を正しく表示するように作られているため、準拠しているHTMLはブラウザにも優しい事になります。

ここまで解説した、W3Cへの準拠ですが1つ落とし穴があります。

それは、W3Cに対応させることが必ずしもGoogleのロボットに優しいとは限らないということです。

じゃあ、どうすればいい?となるかもしれませんが、基本的には問題なく、Googleは現段階でサイトの高速化(ソースを簡略化すること)を推奨しており、細かいことは記載しませんがこれをW3Cは正しくないと判断してしまいます。

よって、両方に対応させるのは難易度が高く両方が平均的に対応できるようにするか、SEOを重視しているサイト、知名度が高くSEOを重視する必要が無いサイトなどで、対応方法を変えるのが良いと考えています。

以下の項目の関連サービスにはW3Cチェックの事が細かく記載されていますので、そちらも是非、ご確認いただければと思います。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

W3Cチェック

関連コラム

W3C日本会員会議に参加してみた!

数年後には常識!?開発を変える『APIエコノミー』とは前のページ

WEBフォント活用!手軽に使える日本語フォント次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 新しい販売形態であるDtoCについて考えてみる
  3. AIに求められているものは、実は意外な物だった
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    作りっぱなしにNO!PDCAを回して、効果的なWEBサイトにしよう 第2回:PDCAの失敗例と解決…

    PDCAがうまく回らない理由以前のコラムで、WebサイトにおいてPD…

  2. Web関連

    どんどん身近に!話題の3Dプリント

    こんにちは、デザイナーの角田です。何かと話題の3Dプリンター、皆さん…

  3. Web関連

    一石三鳥!?マルチデバイスに対応したブラウザ「Blisk」

    今、ホームページはマルチデバイスに対応しているのが当たり前になってきて…

  4. Web関連

    旅のすすめと使えるフリー画像素材サイト

    こんにちは!デザイナーの勇希です!WEB関係のお仕事をしている…

  5. Web関連

    お財布にも地球にも優しい!余剰食品がゲットできる「食品ロス削減アプリ」

    こんにちは。糖質制限ダイエットに苦しんだり、諦めてマックを食べたり…

  6. Web関連

    アレが欲しい!ときに使いたいファッション通販サイト紹介(第1弾)

    こんにちは。デザイナーのイゲタです。洋服が欲しくなったとき、みなさん…

おすすめ記事

最近の記事

  1. DX(デジタルトランスフォーメーション)・デジタルシフトへの…
  2. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  3. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  4. 非接触がこれからの常識。ウィズコロナ・アフターコロナはIoT…
  5. キャッシュレス決済はウィズコロナでのウイルス対策に繋がってい…

アーカイブ

  1. AI関連

    人工知能が音楽を創る時代!?最新のAIクリエイティブテクノロジーに迫る!
  2. Web関連

    進化する電子マネー
  3. AI関連

    日本のキャッシュレス決済化進展をAIが支える
  4. Web関連

    おいしいインドカレー屋さんを見分けるポイント、五か条
  5. Web関連

    Webマーケティングの効果が劇的に上がる UGC
PAGE TOP