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

関連記事

  1. SNS関連

    【オラクルSRM】SNSを活用して自社の売上アップ

    「ソーシャルリスニング」という言葉を皆さんご存知ですか?日本で…

  2. SNS関連

    その投稿、大丈夫?!SNSユーザーが注意すべき著作権とは

    昨今、キュレーションサイトをはじめとする、Webサイトの著作権問題が話…

  3. Web関連

    ウェディングトレンドとマーケティング

    こんにちは。ジューンブライドという言葉がありますが、私は5月・6月と友…

  4. Web関連

    ジャマな広告とはおさらばだ!快適にスマホサイトを閲覧する方法

    スマートフォンでWebサイトを利用していて、「広告がジャマだな~」とイ…

  5. Web関連

    レスポンシブデザインのHTMLコーディングにある落とし穴(Viewport編)

    こんにちは。音楽はCD派、コンサルティングの糸井です。最近は、何も…

  6. Web関連

    スマートフォンサイトの表示速度を上げるには?

    スマートフォンサイトで「ページの表示速度が遅い」、「挙動がおかしい」な…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    最近流行のゴーグルみたいなアイツ
  2. Web関連

    ダイバーシティはビジネス以外でも使える!?
  3. Web関連

    サイト設計で変化するサイトイメージ
  4. AIさくらさん

    【人工知能(AI)×リクルート】海外からの採用志望者を人工知能サービスで集める!…
  5. Web関連

    あなたの日本語、間違ってる!実はおかしい文章表現
PAGE TOP