HTMLのソースコードの確認方法や文法チェックに役立つツールを紹介
執筆者
マーケティングサポート「バンソウ」のメディア管理人
株式会社クリエイティブバンクのマーケティングサポート「バンソウ」のメディア管理人。得意分野は、SEO全般・サイト分析・オウンドメディア・コンテンツマーケティング。バンソウはクライアント様のBtoBマーケティングをサポートするサービスです。詳しい内容はこちらをご覧ください。
HTMLとは
HTMLとは、Webサイトやページを作成する際に用いるマークアップ言語です。HTMLでは、<h1>などのタグを使用してコードを記述することで、Web上に文章や画像を反映できるようになります。
なお、HTMLと似た役割を持つものに「PHP（Hypertext Preprocessor）」「CSS（Cascading Style Sheets）」があります。
PHPはHTMLに埋め込むことで、Webサイトに訪れた人ごとに表示内容を変えるなど、動的な処理を行えるプログラミング言語です。また、CSSはHTMLと同じマークアップ言語のひとつで、HTMLで記述した文章に色をつけたり、文字の大きさやレイアウトを変えたりするといった装飾が行えます。
親要素と子要素とは
HTMLは、以下のように<body>～</body>、<h1>～<h1>といったタグでテキストを囲んで要素を分け、階層を作ります。
<body>
<h1>見出しタイトル</h1>
<p>本文</p>
</body>
このとき、<h1>タグや<p>タグを囲んでいる<body>タグは親要素（親タグ）、親要素に囲まれている<h1>タグや<p>タグは子要素（子タグ）となります。
親要素に指定された文字色などの装飾は、親要素の中に含まれる子要素にも反映されるため注意が必要です。例えば、上記の<body>タグの文字色をCSSで青に指定した場合、<h1>タグや<p>タグのテキストがすべて青色で表示されます。
記述を1文字でも間違えると反映されない
HTMLは、記述が長くなるとタグの階層構造などが複雑になりわかりにくくなるものの、誤字脱字などの入力ミスがあると正常に反映されません。よく生じる入力ミスでは、次のようなものがあげられます。
- 不要な半角スペースが入っている
- 記号を全角で入力している
- 大文字・小文字を間違えている
- アルファベットのつづりを間違えている
- タグで囲む範囲を間違えている
「記述した内容が反映されていない」「指定した範囲以外にも装飾が反映されてしまった」などの場合は、上記のような入力ミスがないか確認しましょう。
HTMLをブラウザ上で確認する方法
ここまで、HTMLの概要についてご紹介しました。実際にHTMLを記述し、自社のWebサイトやページを作る際に、他社のページがどのように作られているのか参考にしたくなるときもあるでしょう。各WebページのHTMLは、ブラウザ上からソースコードを確認できます。
各ブラウザでの確認方法は、次のとおりです。
Google Chrome
１．ソースコードを確認したいページを開き、ページ上で右クリックする
２．「検証」をクリックする
３．画面右側に表示されるソースコードを確認する
なお、ソースコード画面の表示位置を変えたい場合は、ソースコード画面右上の縦に並ぶ三点リーダをクリック＞「Dock side」から変更できます。
Microsoft Edge
１．ソースコードを確認したいページを開き、ページ上で右クリックする
２．「開発者ツールで調査する」をクリックする
３．画面右側に表示されるソースコードを確認する
なお、ソースコード画面の表示位置を変えたい場合は、ソースコード画面右上の「…」をクリック＞「ドッキングの位置」から変更できます。
Google Chromeではメニュー項目が英語表記のため、ツールの扱いに慣れていない方や英語に自信がない方は、メニュー項目が日本語表記されているMicrosoft Edgeや、後述するMozilla Firefoxでの確認がおすすめです。
Mozilla Firefox
１．ソースコードを確認したいページを開き、ページ上で右クリックする
２．「調査」をクリックする
３．画面下部に表示されるソースコードを確認する
なお、ソースコード画面の表示位置を変えたい場合は、ソースコード画面右上の「…」をクリックすることで変更できます。
どのブラウザ上でも表示内容は変わらないものの、各項目の表記の違いや細かな操作性などが異なるため、自身に合ったブラウザから行うとよいでしょう。
「Web検索にはGoogle Chromeを使用し、ソースコードを調べる際はMozilla Firefoxを使用する」といったように、用途に合わせてブラウザを使い分けるのもおすすめです。
自身が記述したHTMLをブラウザで確認する方法
ここまで、ほかのWebサイトのHTMLをブラウザ上で確認する方法をご紹介しました。自身でHTMLを記述し、どのようにブラウザで表示されるかを確認したいときは、その都度サーバーにアップロードせずとも、テキストエディタなどを使用することで手軽に確認できます。
テキストエディタのプレビュー機能
Sublime TextやVisual Studio Codeといったテキストエディタには、プレビュー機能が付属しているものもあります。今回は一例として、Visual Studio Codeの拡張機能である「Live Preview」を使用した確認方法をご紹介します。
１．Visual Studio Codeを起動し、画面左端のメニューから「拡張機能」をクリックする
引用：Visual Studio Code 拡張機能のインストール｜Microsoft
２．検索ボックスに「Live Preview」と入力し、「インストール」をクリックする
３．編集画面右上の「プレビューの表示」アイコンをクリックし、プレビュー画面を起動する
「Live Preview」では、編集画面とプレビュー画面の2画面表示となり、リアルタイムで編集した内容がどのように表示されるかを確認できるようになります。
ブラウザにHTMLファイルをドラッグ＆ドロップする
Google ChromeやMicrosoft Edge、Mozilla FirefoxといったブラウザにHTMLファイルをドラッグ＆ドロップすることで、簡単にHTMLファイルの内容をブラウザ上で表示できます。
以下の例ではGoogle Chromeを使用していますが、Microsoft EdgeやMozilla Firefoxでも手順は同じです。
１．エクスプローラーを開き、該当のHTMLファイルが保存されているフォルダを開く
２．ブラウザ（今回はGoogle Chrome）を起動し、HTMLファイルをドラッグ＆ドロップする
３．HTMLのプレビューを確認する
オンラインのコードエディタを使用する
Web上で使用できるオンラインのコードエディタを使用することで、ブラウザに読み込むなどの手間なくHTMLを確認できます。
現在使用しているコードエディタの操作に慣れている場合は、ソースコードをコピーして、これらのオンラインのコードエディタに貼り付けて表示を確かめるのもよいでしょう。
なお、ソースコードの入力ミスがあるかを確認したい場合は、エラーチェック専用のツールを使用するのもおすすめです。具体的なおすすめツールは、次でご紹介します。
HTMLの文法チェックが行えるツール一覧
ここまで、自身で記述したHTMLが正常にWeb上で表示されるか確認する方法についてご紹介しました。
HTMLでの入力ミスがある場合はその都度修正する必要があるものの、ソースコードが長く複雑な構造な場合、どこを間違えているのかすぐに見つけることは難しいでしょう。
このとき、次のようなHTMLの文法チェックツールを使用することで、どこの記述を間違えたのかを素早く見つけられるため、ぜひあわせてご活用ください。
HTML バリデータ(Google Chromeの拡張機能)
HTML バリデータは、Google Chromeの拡張機能です。
Google Chromeの「検証」からソースコードを開いた際に、「HTML validator」をクリックすることで、ソースコードのエラーを素早くチェックできます。
「HTML validator」をクリックすると、以下のような検証結果画面が表示されます。「Warning」など表示されている箇所を確認し、必要に応じて修正を加えましょう。
W3C Markup Validation Service
引用：W3C Markup Validation Service
W3C Markup Validation Serviceは、Web技術の標準化を目的に活動する非営利団体であるW3C（World Wide Web Consortium）が提供するHTMLの文法チェックツールです。URLやファイルアップロード、直接入力などさまざまな形式でHTMLを読み込めます。
W3Cの規格はWebでの標準規格とされているため、検証結果の信頼性が高く、操作方法も簡単な点が特長ですが、Webサイト内の言語は日本語に対応しておらず、英語で検証する必要があるためご注意ください。
Another HTML-lint 5
Another HTML-lint 5は、ハートコア株式会社によって提供されている文法チェックツールです。W3C Markup Validation Serviceと同様に、URL・ファイルアップロード・直接入力でHTMLを読み込めます。
なお、HTMLを読み込んだ後の検証結果は、上図のように表示されます。エラーの個数や記述内容に対する点数、エラー内容ごとの解説ページなども用意されているため、HTML初心者の方にも理解しやすい点が特長です。
Validator.nu (X)HTML5 Validator
引用：Validator.nu (X)HTML5 Validator
Validator.nu (X)HTML5 Validatorは、軽い動作と簡単な操作での文法チェックが可能なツールです。W3C Markup Validation Service同様に日本語対応しておらず、英語でエラー内容を確認する必要があります。
引用：Validator.nu (X)HTML5 Validator
なお、HTMLを読み込む際は、「Check by」から、URL（address）、ファイル（file upload）、直接入力（text input）が選べます。
HTML5バリデーター
引用：HTML5バリデーター
HTML5バリデーターは、ラッコキーワードなどさまざまなWeb用ツールを開発するラッコ株式会社が提供するHTML文法チェックツールです。
引用：HTML5バリデーター
エラーや警告箇所はエラー内容だけでなく、何行目に問題が生じているかを示してもらえます。
引用：HTML5バリデーター
なお、検証開始前に「ソースを表示」にチェックを入れると、指摘した行数がソースコードのどの位置にあたるのかをリンクで示してくれます。
Dirty Markup
引用：Dirty Markup
Dirty Markupは、10 Best Design社によって提供されているHTML文法チェックツールです。
画面右側のコード入力画面に作成したHTMLのソースコードをコピー＆ペーストし、「Clean」をクリックすることで、エラー箇所をチェックできます。なお、Dirty Markupではエラーのチェックとあわせて、見やすいかたちにコードを整形できる点も特長です。
まとめ
この記事では、WebサイトのHTMLのソースコードを確認する方法や、自身が記述したソースコードのプレビューを見る方法、ソースコードの文法チェックに役立つツールなどをご紹介しました。
HTMLのソースコードは、Google ChromeやMicrosoft Edgeなど各ブラウザから簡単に確認できます。
自身で作成したソースコードが思ったとおりに表示されず、どこに入力間違いがあるかわからない場合は、記事内でご紹介した文法チェックツールをぜひご活用ください。
