この記事では、HTMLコードをWebサイト制作に活かしたいと勉強中の方に、下記のような項目をわかりやすく解説します。
- HTMLをブラウザ上で確認する方法
- 自分で作成したHTMLの表示確認をする方法
- 正しく表示されない原因と対処方法
本記事を読むことで、HTMLコードの確認方法がわかり、自社サイトの作成に役立てられます。
- 目次
HTMLをブラウザ上で表示確認する方法
今見ているWebページのHTMLって、どうやったら確認できるんですか？
ブラウザ上でHTMLコードをチェックする方法があります！
HTMLコードを確認する方法はいくつかありますが、ブラウザのデベロッパーツールを用いると、簡単に確認が可能です。
ブラウザによって表示方法が若干異なりますので、ブラウザ別で確認方法を解説します。
BROWSER 1
Google Chromeで表示確認する
STEP 1
HTMLコードをチェックしたいWebページを開く。
STEP 2
空白の部分で右クリックし、メニューバーを表示する。
STEP 3
一番下の「検証」をクリック。
STEP 4
Webページの右側に「検証」の画面が表示される。
STEP 5
上段はHTML、下段ではCSSのコードを確認できる。
表示位置を変更する場合、右上の「…」のアイコンをクリックし、「Dock side」で表示させたい場所を選択。
「検証」の画面はF12でも開くことができます！
BROWSER 2
Microsoft Edgeで表示確認する
STEP 1
HTMLコードをチェックしたいWebページを開く。
STEP 2
空白の部分で右クリックし、メニューバーを表示する。
STEP 3
一番下の「開発者ツールで調査する」をクリック。
STEP 4
Webページの右側に「開発者ツールで調査する」の画面が表示される。
STEP 5
上段がHTML、下段がCSSのコード。
表示位置を変更したい場合は、右上の「︙」のアイコンをクリックし、「ドッキングの位置」で表示させたい場所を選択する。
日本語で表記されているから、初心者や英語が苦手な方でもチェックしやすいですね！
BROWSER 3
Mozilla Firefoxで表示確認する
STEP 1
HTMLコードをチェックしたいWebページを開く。
STEP 2
空白の部分で右クリックし、メニューバーを表示する。
STEP 3
一番下の「調査」をクリック。
STEP 4
Webページの下部に「調査」の画面が表示される。
STEP 5
左がHTMLコード、中央がCSSコード、右がレイアウト。
表示位置の変更は、右上の「…」のアイコンをクリックし、「ドッキングの位置」から設定が可能。
自分で作成したHTMLコードの表示確認を行う方法
自分で作成したHTMLコードに問題がないか確認するために、記述するたびにサーバーにアップロードするのは非常に面倒です。
アップロードする前に確認できる簡単な方法があります！
こちらでは、自分で作成したHTMLコードを確認できる3つの方法をご紹介します。
METHOD 1
テキストで作成したHTMLをブラウザ上で開く
HTMLを作成する際には、Windowsの「メモ帳」やMacの「テキストエディット」など、テキストエディタを使ってコードを記述する方が多いでしょう。
テキストエディタで作成したHTMLファイルをブラウザ上で開くだけで、簡単に確認できます。
STEP 1
テキストエディタでHTMLコードを記述して保存。
（HTMLを保存する際には、拡張子を「.html」にする。）
STEP 2
URL欄にテキストエディタのHTMLファイルをドラッグ＆ドロップで貼り付け、Enterを押す。
STEP 3
ブラウザ上で反映される。
正しく記述されているかを確認する。
METHOD 2
テキストエディタのプレビュー機能を使用する
プレビュー機能のあるテキストエディタを使えば、ブラウザの表示確認ができます。
プレビュー機能を備えているテキストエディタには、Windows向けの「Visual Studio Code」や「Notepad++」、Mac向けの「Sublime Text」や「Atom」などがあります。
関連記事：「テキストエディタとは？OS別のおすすめも紹介！」
METHOD 3
無料ツールを使用する
HTMLコードが正しく記述できているかは、無料ツールでもチェック可能です。
ほとんどの無料ツールが、URLやコードをコピー＆ペーストするだけで簡単に確認できます。
「CodePen」や「The W3C Markup Validation Service」、「HTML5 バリデーター」や「HTML エラーチェッカー」などのツールがあります。
関連記事：「HTMLコードの基礎知識！書き方・ルール・よく使う基本コード一覧」
HTMLがブラウザで正しく表示されない！原因と対処方法を解説
ブラウザ上でHTMLが正しく表示されない場合、必ず原因があります。
丁寧に一つひとつ記述を見直せば原因が発見できますので、焦らずチェックしましょう。
よくある原因と対処方法を紹介します。
CASE 1
HTMLコードの記述ミス
最も多い原因がHTMLコードの記述ミスです。
1文字間違えただけでも、エラーや表示崩れが生じるため注意しましょう。
① 閉じタグが間違っている
閉じタグが間違っていたり、ルールに沿っていなかったりすると、正しく表示されません。
レイアウトが大きく崩れて表示される場合は、閉じタグが原因の可能性が高いため確認しましょう。
【 正しい例 】
<div>
<p>サンプルページです</p>
</div>
【 誤った例 】
<div>
<p>サンプルページです</div>
</p>
② HTMLコードが全角になっている
タグや属性などのHTMLコードが半角ではなく全角になっている場合も、正しく表示されません。
特に、「 < 」や「 > 」などの記号やスペースは間違いやすいため、注意が必要です。
CASE 2
ブラウザに対応していない
ブラウザに対応していないことも、正しく表示できない原因の1つとして挙げられます。
ブラウザによって画面の大きさや解像度が違ってくるため、別のブラウザ用に作ったコードだと自動的に折り返されたり、変な位置で改行されたりする可能性があるのです。
CASE 3
拡張子が間違っている
HTMLがブラウザで正しく表示されないときは、HTMLファイルの拡張子が間違っていないかもチェックが必要です。
ファイル名は自由につけられますが、拡張子は「.html」でなければなりません。
拡張子が間違っていると、パソコン上で表示されるアイコンも変わりますので、一度確認してみましょう！
CASE 4
キャッシュが溜まっている
Webページを見る側の原因として挙げられるのがキャッシュです。
長期間再起動していなかったり、多くの閲覧記録を残していたりすると、キャッシュが溜まって正しく表示されない場合もあります。
よくある質問
HTMLコードを確認する方法は？
ブラウザのデベロッパーツールを活用して確認できます。
自分で作成したHTMLコードは、テキストエディタや無料ツールを使って表示確認ができます。
HTMLが正しく表示されない原因は？
以下のような原因が考えられます。
- HTMLコードの記述ミス
- ブラウザに対応していない
- キャッシュが溜まっている
- 拡張子が間違っている
まとめ
ご提示いただいた文章は、必要な情報が網羅されていて分かりやすいですが、少し「説明文」としての硬さが目立ちますね。
文末のバリエーションを増やしたり、プロがアドバイスしているような「こなれ感」を出したりすることで、ぐっと自然な印象になります。用途に合わせて3つのパターンを作成しました。
1. 親しみやすく自然なトーン（ブログ・コラム向け）
Webサイトの裏側にあるHTMLコードは、実はブラウザから誰でも手軽に覗くことができます。
たとえば、素敵なデザインの競合サイトがあれば、そのコードを紐解くことで自社サイトのヒントが得られるはず。それは単なるリサーチにとどまらず、あなた自身のプログラミングスキルを磨く生きた教材にもなります。
また、自分の書いたコードが意図通りに動いているかをこまめにチェックする習慣も大切です。ブラウザごとの表示崩れを防ぐことは、ユーザーの使いやすさはもちろん、巡り巡ってSEOの評価アップにも繋がります。美しいデザインを維持して、読者が心地よく滞在できるサイトを目指しましょう。
