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

関連記事

  1. Web関連

    マーケティングオートメーションの導入のポイント

    コーダーの須澤です。まだ聞きなれない言葉かもしれませんが、今アメリカ…

  2. Web関連

    最近のIoEとIoT事情について思ったこと

    インターネットを利用したことが無い人は今の日本にいるのでしょうか・・!…

  3. Web関連

    【必見!】時短に便利なブックマークレットまとめ

    みなさん、「ブックマークレット」をご存じですか?❛❛ブックマークレッ…

  4. Web関連

    東京のWeb制作会社が教える失敗しない海外向けサイトの作り方

    今回は、海外向けプロモーションで失敗しないWebサイトの作り方について…

  5. Web関連

    こんなリクルートサイトは困る!就職活動中の学生が避けるサイトとは?

    大企業から中小企業まで数多くのリクルートサイトが存在しますが「この職場…

  6. Web関連

    今が旬!知って得するスマートオフィス

    こんにちは。デザイナーの出口です。最近は暑くなって、仕事効率が下がっ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    アフターコロナの今がチャンス。D2C戦略で顧客獲得
  2. Web関連

    善し悪しが2分されるパララックスデザインってどう思います?
  3. Web関連

    情報設計する上で押さえるべきポイント ~重要な情報はどこに?編~
  4. AI関連

    【人工知能(AI)×フィットネスクラブ】人工知能があなただけの専属トレーナーに
  5. Web関連

    何気ない日常の美しさに気付かされる。おすすめ写真ブログ3選
PAGE TOP