Produced by career-info
キャリアエヌ(career.n)|サイトマップ
キャリアエヌは「ビジネス」、「IT」、「転職」に関する様々な情報をお届けするWebメディアです。
1,852view

HTML/CSSの構文を簡単にチェックする方法!

HTML/CSSの構文を簡単にチェックする方法!|キャリアエヌ(career.n)


はじめに


ウェブに携わっている方は、HTML/CSSでウェブページを作成する機会が多いと思いますが、自分が作成したHTML/CSSに誤り(エラー)がないのか?と不安になることがあると思います。

そこで、今回は、HTML/CSSの構文を簡単にチェックすることができる、筆者がおすすめの方法について説明します。


HTML/CSSの構文を簡単にチェックする方法!


以下、HTML/CSSの構文を簡単にチェックする方法についてです。


その前に!


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

そのため、自分でコーディングしたHTML/CSSの誤りに気づきにくいということも多く、HTML/CSSをコーディングする方は、構文が正しいのか?と不安になることがあります。

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


筆者がおすすめするのは「W3C」のバリデーションチェックサービス!


自分でコーディングしたHTML/CSSの構文チェック(バリデーションチェック)をしたい場合は、最近では、有料、無料の色んな製品やサービスがあります。

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

総合検証サービス(バリデーションサービス)

というサービスです。

※もちろん無料です。

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

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


「W3C」とは?


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

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

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

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


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


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


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

上記のURLをクリックすると大きくは下記の3つのタブがあり、

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

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

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


URIを指定


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

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

「URIを指定」の手順!

1.タスクを選択 ※選択すると右側に検証内容の簡単な説明が表示されます。

2.検証したいアドレス(URL)を入力

3.[チェック]ボタンをクリック

4.指定したウェブページ(HTML/CSS)のバリデーションチェック(構文チェック)が行われます。

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


ファイルをアップロード


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

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

「ファイルをアップロード」の手順!

1.タスクを選択 ※選択すると右側に検証内容の簡単な説明が表示されます。

2.検証したいファイルをアップロード

3.[チェック]ボタンをクリック

4.アップロードしたHTML/CSSファイルのバリデーションチェック(構文チェック)が行われます。

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


直接入力


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

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

「直接入力」の手順!

1.タスクを選択 ※選択すると右側に検証内容の簡単な説明が表示されます。

2.検証したいCSSと組み合わせたHTML文書、もしくはCSS単体の文書を入力

3.[チェック]ボタンをクリック

4.直接入力したHTML/CSSのバリデーションチェック(構文チェック)が行われます。

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


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


「W3C 統合検証サービス」でのチェックに合格すると!


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

そして、修正後、エラーやワーニングが無くなると、つまり、「W3C 統合検証サービス」での構文チェック(バリデーションチェック)に合格すると、「W3C」でのチェックに合格した証として、「W3C」のロゴを使用することができます。

もちろん任意です。

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

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


最後に


今回、「HTML/CSSの構文を簡単にチェックする方法!」と題して、「W3C 統合検証サービス」について色々と説明しましたが、HTML/CSSでウェブページを作成する機会が多い方は、簡単にチェックできるため、是非!利用してみてください!


■最新記事
出張,持ち物,リスト
出張に行く時の持ち物をリストにまとめてみました!
皆さんも仕事で出張に行く機会があると思いますが、出張に行く時に何を持って行きますか?特に、初めて出張に行く時は悩んでしまうと思います。ちなみに、筆者は、これまで日本全国に数えきれないくらい出張に行ったことがあります。そこで、今回は、筆者の経験を踏まえて、出張に行く時の持ち物について色々と述べたいと思います。 <ビジネス> 1,548view
com,co.jo,jp,違い
よく見るドメイン「.com」、「.co.jp」、「.jp」の違い!
世界中には、数えきれないほどのドメインがあり、日本でよく見るドメインは、「.com」、「.co.jp」、「.jp」だと思います。そのような中で、それぞれの違いが分かる方は少ないかもしれません。そこで、今回は、日本でよく見る代表的なドメインである「.com」、「.co.jp」、「.jp」の違いについて、説明したいと思います。 <IT> 7,154view
ssoとは
SSO(シングルサインオン)とは何か?
皆さんはSSO(シングルサインオン)をご存じでしょうか?全く聞いたことがない方や、言葉だけは聞いたことがあるという方など、様々だと思います。そこで、今回は、SSO(シングルサインオン)とは何か?について説明します。 <IT> 1,484view
遅刻,連絡,マナー
ビジネスでは不可欠な遅刻の連絡マナーについて!
誰にでも、電車遅延などの理由で、会社やお客様との打ち合わせに遅刻してしまうことがあると思います。そのような場合に、皆さんは遅刻する旨を、誰にどのような方法で遅刻の連絡をしているでしょうか?逆にいうと、遅刻する際の連絡マナーを守っていますか?そこで、今回は、遅刻する際の連絡マナーについて、色々と説明したいと思います。 <ビジネス> 2,733view
ノー残業デーとは
働き方改革で再注目の「ノー残業デー」とは?
皆さんの会社には「ノー残業デー」がありますか?会社によっては昔から「ノー残業デー」に取り組んでいる会社も多いと思いますが、一時下火になったかと思いきや、「働き方改革」の一環で、最近、再び脚光を浴びています。そこで、今回は、「ノー残業デー」について色々と説明したいと思います。 <ビジネス> 3,969view
ブラウザ,ie,利用率
PCブラウザにおいて日本でIEの利用率が高いのはなぜか?
皆さんはWindowsのPCでウェブサイトを見る時に何のブラウザを利用していますか?現在、色んなブラウザがある中で、まだIE(InternetExplorer)を利用している方も多いと思います。そこで、今回は、PCブラウザにおいて日本でIEの利用率が高いのはなぜか?ということについて、色々と述べたいと思います。 <ビジネス><IT> 5,644view
殿,様,違い,使い分け
メールにおける 「殿」と「様」の違い、使い分け!
仕事をしていく上で、メールを送受信する機会が多い中で、メール文面の最初に記載する名前の後に「殿」や「様」を付けることも多いと思います。でも、その二つの違い、使い分けをご存知でしょうか?そこで、今回はメール文面の宛名によく使用する「殿」と「様」の違い、使い分けについて説明します。 <ビジネス> 3,158view
転職,初めて,流れ
転職するまでの流れ!(初めて転職する方必見!)
筆者も経験していますが、初めて転職する際に、どのような流れで転職するのか?が分からずに、不安であったことを今でも覚えています。やはり、初めて転職する際は、誰でも流れが分からずに不安になってしまいますよね!そこで、今回は、初めて転職する方に向けて、転職するまでの流れについて説明します。 <転職> 1,512view
カフェ,macbook,何してる
カフェで「Macbook」を使って何をしているのか?
最近、カフェでノートPCを使用している人をよく目にします。そのような中で特に多いのは「Macbook」です。そこで、カフェで「Macbook」を使用して何をしているのか?という疑問を持ったことはないでしょうか?ということで、今回は、カフェで「Macbook」を使って何をしているのか?について、色々と述べたいと思います。 <ビジネス><その他> 3,143view
転職,前の会社,戻りたい
転職してから「前の会社に戻りたい」と思うのは当たり前!
転職した方で、転職してから「前の会社に戻りたい」と思ったことがある方も少なくないと思います。特に、転職してから1年くらいは、そのように思うことが何度かあるのは当たり前のことです。そこで、今回は、転職してから前の会社に戻りたいと思うのは当たり前のことについて、筆者の経験も踏まえて色々と述べたいと思います。 <転職> 2,455view
■記事アクセスランキング
原因,要因,違い,使い分け
「原因」と「要因」の違い、使い分け
「原因」と「要因」という言葉を聞いたり、使用したりすると思いますが、皆さんは「原因」と「要因」の違い、使い分けをご存じでしょうか?今回は、「原因」と「要因」の違い、使い分けについて説明したいと思います。「原因」も「要因」も同じ意味のように捉えられていることも多いようですが、大きな違いがあります。 <ビジネス> 186,388view
asis,tobe
「As-is」と「To-be」の意味と使い方!
皆さんは「As-is(アズイズ)」、「To-be(トゥービー)」という言葉をご存知でしょうか?仕事をしていると「As-is」や「To-be」という言葉を良く耳にします。今回は、「As-is」と「To-be」の意味について説明します。 <ビジネス><IT> 173,479view
以下,未満,含む
「以下」は含む?「未満」は含む?
皆さんも「以下」、「未満」という言葉をよく聞いたり、見かけたりすると思いますが、「以下」、「未満」は含むのか?含まないのか?が分からなくなってしまう時はないでしょうか?今回は、「以下」、「未満」が含むのか?含まないのか?について説明したいと思います。 <ビジネス> 159,177view
以前,以降,含む
「以前」は含む?「以降」は含む?
皆さんも「以前」、「以降」という言葉をよく聞いたり、見かけたりすると思いますが、「以前」、「以降」は含むのか?含まないのか?が分からなくなってしまう時はないでしょうか?今回は、「以前」、「以降」が含むのか?含まないのか?について説明したいと思います。 <ビジネス> 93,368view
適用,摘要,違い,使い分け
「適用」と「摘要」の違い、使い分け
皆さんも「適用(てきよう)」と「摘要(てきよう)」という言葉を見かける機会があるかと思いますが、「適用」と「摘要」の違いや意味をご存知でしょうか?「適用」、「摘要」ともに「てきよう」と読み、漢字も似ているため、違いや使い分けについて悩んだことはないでしょうか? <ビジネス> 88,586view
づらい,ずらい
「づらい」、「ずらい」正しいのはどっち?
皆さんも「づらい」、「ずらい」という言葉をよく使用する機会が多いかと思います。例えば、「考えづらい」、「考えずらい」、「わかりづらい」、「わかりずらい」、「理解しづらい」、「理解しずらい」のように使用しているかと思います。そこで、疑問に思うのは、「づらい」と「ずらい」のどっちが正しいのか?という疑問です。 <ビジネス> 88,201view
よろしくお願いいたします,よろしくお願い致します,違い
「よろしくお願いいたします」と「よろしくお願い致します」の違い
皆さんもよく、メールなどで「よろしくお願いいたします」や「よろしくお願い致します」と書かれたメールをもらったり、メールに書く機会が多いと思いますが、「よろしくお願いいたします」と「よろしくお願い致します」のどちらを使うべきかを考えたことがあるかと思います。 <ビジネス> 76,861view
Excel,PDF化,複数シート
ExcelをPDF化する方法!(複数シートもPDF化)
ExcelをPDF化する方法はとても簡単で、次の手順でPDF化することができます。1.PDF化するExcelを開く、2.[ファイル]タブを開き、[名前を付けて保存]をクリック、3.[名前を付けて保存]のダイアログボックスが表示されるので保存する際に[ファイルの種類]で[PDF(*.pdf)]を選択し保存。 <ビジネス><IT> 67,789view
年末,挨拶,メール,社外
年末のご挨拶メール(社外向け)のポイント!(例文あり)
皆さんも年末になると、顧客や取引先など、社外の方に年末のご挨拶メールを送る機会があると思います。また、実際に会って、年末のご挨拶をすることも多いと思いますが、お世話になった社外の方への年末のご挨拶メールは、ビジネスにおいては不可欠です。そこで、今回は、社外の方に向けた「年末のご挨拶メール」のポイントについて説明します。 <ビジネス><その他> 62,581view
齟齬,そご,意味,使い方
ビジネスでよく使う「齟齬(そご)」の意味と使い方!
今回は、ビジネスでよく使う「齟齬」の意味と使い方について述べたいと思います。まず、「齟齬」という漢字ですが、「そご」と読みます。「齟齬(そご)」の意味は、辞書で調べてみると、「意見や事柄がくいちがって合わないこと」、「物事がかみ合わないこと」、「くいちがい」などの意味となっています。 <ビジネス> 58,294view


■カテゴリー/タグ
■関連コンテンツ

■人気記事

■ご意見・ご感想について

キャリアエヌ(career.n)|HOMEへHOME キャリアエヌ(career.n)|ページ先頭へページ先頭へ
キャリアエヌ(career.n)は「ビジネス」、「IT」、「転職」に関する様々な情報をお届けするWebメディアです。ビジネスライフにおける素朴な疑問や旬の話題について様々な情報を発信しております。
当サイトが皆様のビジネスライフにおいて少しでもお役に立てればと考えております。
キャリアインフォ
career.nについてリンクについて
ご利用規約プライバシーポリシーお問い合わせ
開発者ブログaffibest