Web関連

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

0

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

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

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

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

→関連サービス「Webコンサルティングサービス」はこちら

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日本会員会議に参加してみた!

→関連サービス「Webコンサルティングサービス」はこちら

 

0

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

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

ピックアップ記事

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

関連記事

  1. DX関連

    農業のデジタル化・デジタルシフトはどのように進んでいる?

    最近、どんどん進化を見せるテクノロジーの進化。IoTの進展やVRの登場…

  2. Web関連

    最新の情報に敏感…!美容室のIT活用とは?

    最新の情報に敏感な方は結構多いですよね。そんな方は、デザイナー系の方に…

  3. SNS関連

    旅行いきたい!!となること間違いなしのinstagramアカウント5選

    水原希子さんやROLAさん、中村アンさんといった人気モデルをフ…

  4. Web関連

    web担当者必読!注目のLINE@ 企業のビジネス活用まとめ

    日本で大人気のコミュニケーションアプリ「LINE」は、当然皆さんもご存…

  5. Web関連

    部屋の片付け -どうしても後回しになっちゃう人へ-

    こんにちは。2015年こそ旅に出よう!と思っている情報デザイン部門の行…

  6. SNS関連

    WebサービスInstagram(インスタグラム)の恐るべき経済効果!

    しまむらパトロール(しまパト)という言葉をご存知ですか?私がこの言…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    仕事に役立つiPhoneアプリ(上)
  2. Web関連

    コラムのチェック方法 ~一次チェック編~
  3. Web関連

    モバイルフレンドリーについて
  4. Web関連

    最近はオリジナルグッズ制作が流行っているらしい!?
  5. Web関連

    そうだったの!?UI/UXって意外と身近なものだった!!
PAGE TOP