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

関連記事

  1. Web関連

    こんなものもあるの?面白い採用方法

    こんにちは、面白いもの大好きなデザイナーの角田です。以前のコラムで、面…

  2. SEO関連

    ブログを書く時に注目すべきSEO対策まとめ~後編~

    前回の続きで、ブログ×SEO対策後半です。前半は記事作りからブログ…

  3. Web関連

    WEBサイトにおけるセキュリティ対策

    こんにちはサーバーエンジニアの橋本です。先日インターネットで調…

  4. Web関連

    海外のWeb制作会社では主流?Illustratorを使用したWebデザイン制作手法

    この記事を読んでいるデザイナーの皆様、もしくはWeb関連の仕事を毎日頑…

  5. Web関連

    ヤフオク初心者が、ECサイトとは違う気になる点をピックアップしてみた

    こんにちは、デザイナーの角田です。皆さんは、ネットオークション…

  6. Web関連

    それ、時短ツールでもっと早くできるかも!

    年末年始、GW、夏期休暇など長期の休みの前後、Web担当の方はかなり忙…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    動画コンテンツは一般ユーザーには響いてなかった!
  2. AI関連

    音声インターフェース(VUI)ってこれから本当に流行るのか
  3. Web関連

    あなたは大丈夫?就職面接時に気を付けたい4つのポイント
  4. Web関連

    面倒な作業を楽にするCSSフレームワーク -実践編-
  5. Web関連

    Web制作未経験の新卒がシステムエンジニアになるために勉強しておくこと
PAGE TOP