【初心者必見】一度は見ておきたい!自分のサイトのHTML確認方法!

みなさんは、自分のサイトまたはお気に入りのサイトが、実際にインターネット上で表示している「HTML」を見たことがあるでしょうか?
そもそも、見る方法を知らない!という方もいらっしゃるかと思います。

そんな方に向けて、今回は「HTML」を確認する方法をご紹介したいと思います。

 

HTMLとは

そもそも「HTML」ってなに?って方のために。

既に知っているって方は、この部分は読み飛ばして頂いてかまいません。

あ、ここでの「HTML」は「HTML5」を指すと考えていただければと思います。

まあ、細かいことは気にしない!

 

まずは実物を見てみましょう

HTMLとは

HTMLとは

 

こんなやつです!なんかよくわからんなって感じですよね。

 

けどこれをブラウザで表示してみると。

ブラウザ表示

ブラウザ表示

 

こうなります!

これを見てもらって何が言いたいかというと、

HTMLはブラウザでいい感じに表示してくれる文書を書く言語

ってことです。

人間が見た所で、よくわからない!って感じですけど、HTMLで書かれている内容は、ブラウザからしてみると凄い分かりやすい文書ってことですね。

例えるなら、ブラウザの母国語的な感じでしょうか。

 

Webページを作るための基本的な言語

そうなんです。HTMLって言語なんです。(正しくは違うかもしれませんが、認識としては言語でオッケーだと思ってます。)

上で見ていただいたように、

人間がブラウザさんに手紙を送るときには「HTML」という言語で書いて送りましょうねってこと。

なので、プログラマーになりたい!って人じゃなくても、Webにかかわる人であれば知っておいて損はないと言われている言語です。

そして、HTMLが言語って言うからにはそれなりに文法ってやつも当然あるわけですね。

なので、自分のサイトを作りたい!って人は、文法を間違ってしまわないように、知っておくべき所だけでも勉強しておくと良いと思いますよ!

 

ブラウザでHTMLを表示させる

それではさっそく、「HTMLを確認する方法」を見ていきましょう!

方法としては、2種類あるので1つずつ見ていきましょう。

※今回ご紹介する方法は、ブラウザによって操作が異なる場合があります。この記事内では「Google Chrome」を使用しております。他ブラウザをご利用の方はご注意下さい。

 

「ソースの表示」から見る方法

まずは、見たいサイトのページをブラウザで表示します。

ブラウザで表示

ブラウザで表示

 

表示したら、ページ上どこにカーソルがあっても大丈夫なので、右クリックをしてみましょう!

右クリック

右クリック

 

上のような画面が出てきたと思うので、赤枠内の「ページのソースを確認」を押しましょう。

 

ソース表示

ソース表示

 

はい!出てきましたね!

ちなみにこれ、URLの所に注目すると通常のURLの頭に「view-source:」を付けた形になっていると思います。なので、このURLを直接記入してもオッケーです!!

URLの直接入力でHTMLを表示させることが出来るってことは、スマホから確認しようと思っても、この方法で確認が出来るってことですね!

 

「開発者ツール」から見る方法

実はブラウザには「開発者ツール」なるものが存在します。(呼び方はブラウザによって異なるみたいですが。)

さっそく見ていきましょう!

まずは先ほどと同様、見たいサイトのページをブラウザで表示します。

ブラウザで表示

ブラウザで表示

次に、キーボード上の「F12」ボタンを押してみましょう。

開発者ツール

開発者ツール

 

はい、こんな画面が出てきましたね!!HTMLが表示されていることが分かると思います。

ちなみに、この「開発者ツール」が便利な所は、

この画面を出したまま通常の画面にカーソルを移すと、通常の画面で見えているものと、それに対比するHTMLを表示してくれることです。ちなみに、CSSの内容もだしてくれます。(CSSは、HTMLをデコレーションするための言語)

非常に便利なものなので、気になった方は、調べてみると良いかもしれません。

 




「hタグ」を見てみよう

自分のサイトを作っているみなさんは、お馴染みの「hタグ」。

最初に書いた通り、HTMLってのは言語で、文法もあるんだよってお話をしました。

そう、「hタグ」にも決まりがあったりします。

 

・h1タグは1ページに1度だけ使用する
・数字の小さいものから使用し、数字を飛ばして使用してはいけない

 

こんな感じ。

「h1」タグに関しては、そのページのタイトルに使用するのが一般的。

h1タグ

h1タグ

 

hタグの数字に関しては、見出しの大きさ毎に使い分けるようにする。

 

h2タグ

h2タグ

 

 

h3タグ

h3タグ

 

 

そんな感じですね。

見出しの大きさに関しては、書き手の思いと、読み手の分かりやすさを考えて、決めてあげる必要があるのでちょっと難しいですが、

上手く「hタグ」を使いこなせるようになると、綺麗な文章になると思うので、しっかり使いこなせるようになっていきましょう!

 

まとめ

いかがだったでしょうか?

HTMLを確認するのは非常に簡単に出来ることが分かったと思います。HTMLを読めるかどうかは別にして。

また、「hタグ」に関しては、一応正しい文法がこうですよってお話なだけで、間違っていても実は何ら問題ないと思われます。

日本語だって英語だって、文法が間違っていようが正しく伝わればオッケーですもんね!

まあ、そんなルールもあるんだなって知ってもらえれば嬉しいと同時に、HTML自体にも興味を持ってもらえてたら嬉しいなと思っています。

そんなこんなで。

 

 

それでは、
のらくら でした!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です