キャリアエヌでは、ビジネスライフに役立つビジネスノウハウ情報を発信しております!
4,281view

簡単にHTML/CSSの構文チェックができるサイトをご紹介します!

簡単にHTML/CSSの構文チェックができるサイトをご紹介します!
※本ページにはプロモーションが含まれています

こんばんは!

「キャリアエヌ」の管理人です!

真夜中にご覧いただきありがとうございます!(この記事を読んだらもう寝ましょう!)

今日は、12月4日(水)です!

はじめに


ウェブに携わっている方は、

HTML/CSSでウェブページをコーディングする機会が多いと思いますが、

自分がコーディングした

HTML/CSSの構文は正しいのか?

誤り(エラー)はないのか?

と不安になることがあると思います。

そこで!

今回は、簡単にHTML/CSSの構文チェックができるサイトをご紹介します。


[目次]
HTML/CSSの構文が正しいかの不安!
HTML/CSSの構文チェックができるサイト!
「W3C 統合検証サービス」について!
「W3C」とは?
「W3C 統合検証サービス」でのチェック方法!
URIを指定
ファイルをアップロード
直接入力
構文チェックに合格すると!
最後に


HTML/CSSの構文が正しいかの不安!


HTML/CSSの場合、通常のプログラミング言語とは違い、誤りがあっても明にエラーメッセージが出力されることはなく、

誤りがあっても画面表示はされる!

という特徴があります。

そのため、

自分でコーディングしたHTML/CSSの

誤りに気づきにくい!

ということも多く、

HTML/CSSをコーディングする方は、

構文が正しいのか?

と不安になることがあります。

特に、最近のブラウザは、エラーがあってもそれなりに表示してくれるため、なおさら不安になってしまいます。


HTML/CSSの構文チェックができるサイト!


以下、HTML/CSSの構文チェックができるサイトについてです。


「W3C 統合検証サービス」について!


自分でコーディングしたHTML/CSSの構文チェック(バリデーションチェック)をしたい場合、

最近では、有料、無料の色んな製品やサービスがあります。

そのような中で、僕がおすすめするのは、「W3C」という標準化団体が提供している、

Unicorn W3C 統合検証サービス

というサービスです。

※もちろん無料です。

このサービスを用いることで、簡単にHTML/CSSの構文チェックを行うことができます。


「W3C」とは?


「W3C 統合検証サービス」でのチェック方法の前に、「W3C」について、簡単に説明しておきます。

「W3C」は、「World Wide Web Consortium」の略で、ウェブで使用される各種技術の標準化を推進する為に設立された営利を目的としない、標準化団体です。

「W3C」は、ウェブ技術の標準化団体ということもあり、活動地域は全世界となっており、ウェブの長期的成長を確かにするためのプロトコルやガイドラインの開発などを行なっています。

その一環で、「W3C」は、今回ご紹介する「統合検証サービス」を提供しています。

ということで、

次から、「W3C」が提供する統合検証サービスでのHTML/CSSの構文チェック(バリデーションチェック)をする方法ついて説明します。


「W3C 統合検証サービス」でのチェック方法!


「W3C 統合検証サービス」でHTML/CSSの構文チェック(バリデーションチェック)を行うためには、下記のURLより行います。


Unicorn - W3C 統合検証サービス
https://validator.w3.org/unicorn/

上記のURLをクリックすると、

大きくは、

URIを指定
ファイルをアップロード
直接入力

という3つの方法でHTML/CSSの構文チェック(バリデーションチェック)を行うことができます。

次から、それぞれの方法について説明します。


URIを指定


「W3C 統合検証サービス」でHTML/CSSの構文チェックを行う1つ目の方法は、

URIを指定

という方法です。

「URIを指定」では、構文チェック(バリデーションチェック) したいURIを指定して検証することができます。

URIを指定して構文チェック(バリデーションチェック)する手順は、以下のとおりです。

「URIを指定」の手順!
1.タスクを選択 ※選択すると右側に検証内容の簡単な説明が表示されます。
    ↓
2.検証したいアドレス(URL)を入力
    ↓
3.[チェック]ボタンをクリック
    ↓
4.指定したウェブページ(HTML/CSS)のバリデーションチェック(構文チェック)が行われます。

この方法は、既に公開しているウェブページの構文チェックをしたい場合におすすめします。


ファイルをアップロード


「W3C 統合検証サービス」でHTML/CSSの構文チェックを行う2つ目の方法は、

ファイルをアップロード

という方法です。

「ファイルをアップロード」では、構文チェック(バリデーションチェック) したいHTML/CSSのファイルをアップロードして検証することができます。

ファイルをアップロードして構文チェック(バリデーションチェック)する手順は、以下のとおりです。

「ファイルをアップロード」の手順!
1.タスクを選択 ※選択すると右側に検証内容の簡単な説明が表示されます。
    ↓
2.検証したいファイルをアップロード
    ↓
3.[チェック]ボタンをクリック
    ↓
4.アップロードしたHTML/CSSファイルのバリデーションチェック(構文チェック)が行われます。

この方法は、まだ公開していないウェブページ(HTML/CSSファイル)の構文チェックをしたい場合におすすめします。


直接入力


「W3C 統合検証サービス」でHTML/CSSの構文チェックを行う3つ目の方法は、

直接入力

という方法です。

「直接入力」では、構文チェック(バリデーションチェック) したいHTML/CSSの内容そのものを直接入力して検証することができます。

直接入力して構文チェック(バリデーションチェック)する手順は、以下のとおりです。

「直接入力」の手順!
1.タスクを選択 ※選択すると右側に検証内容の簡単な説明が表示されます。
    ↓
2.検証したいCSSと組み合わせたHTML文書、もしくはCSS単体の文書を入力
    ↓
3.[チェック]ボタンをクリック
    ↓
4.直接入力したHTML/CSSのバリデーションチェック(構文チェック)が行われます。

この方法も、まだ公開していないウェブページ(HTML/CSSファイル)の構文チェックをしたい場合におすすめします。(アップロードが面倒な場合)


このように、「W3C 統合検証サービス」では、上記のいずれかの方法で簡単にHTML/CSSの構文チェック(バリデーションチェック)を簡単に行うことができます。


構文チェックに合格すると!


「W3C 統合検証サービス」での構文チェック(バリデーションチェック)で、エラーやワーニングがある場合は、チェック結果に従ってHTML/CSSファイルを修正することをおすすめします。

そして、

修正後、エラーやワーニングがなくなると、

つまり、

「W3C 統合検証サービス」での構文チェック(バリデーションチェック)に合格すると、「W3C」でのチェックに合格した証として、

W3Cのロゴを使用すること!

ができるようになります。

もちろん任意です。

以前は、色んなサイトやブログのウェブページの下部に、「W3C」のロゴを貼っているページをよく見かけていましたが、最近はあまり見かけないですね!

そういう意味では、僕も「W3C」でチェックして、ロゴを貼っていた時期がありました。

今は貼っていません...


最後に


今回、簡単にHTML/CSSの構文チェックができるサイトとして、

・W3C 統合検証サービス

について色々と説明しましたが、

HTML/CSSでウェブページを作成する機会が多い方は、簡単にチェックできるため、利用してみてください!
ad
ad