見ておきたい!自分のサイトのHTML確認方法!2017/05/04SHAREツイートシェアはてブGoogle+PocketLINEツイートシェアはてブGoogle+PocketLINEスポンサーリンクみなさんは、自分のサイトまたはお気に入りのサイトが、実際にインターネット上で表示している「HTML」を見たことがあるでしょうか?そもそも、見る方法を知らない!という方もいらっしゃるかと思います。そんな方に向けて、今回は「HTML」を確認する方法をご紹介したいと思います。「hタグ」を見てみようまとめスポンサーリンクHTMLとはそもそも「HTML」ってなに?って方のために。知っているって方は、この部分は読み飛ばして頂いてかまいません。あ、ここでの「HTML」は「HTML5」を指すと考えていただければと思います。細かいことは気にしない!まずは実物を見てみましょうHTMLとはこんなやつです!なんかよくわからんなって感じですよね。これをブラウザで表示してみると。「HTMLはブラウザでいい感じに表示してくれる文書を書く言語」ってことです。人間が見た所で、よくわからない!って感じですけど、HTMLで書かれている内容は、ブラウザからしてみると凄い分かりやすい文書ってことですね。例えるなら、ブラウザの母国語的な感じでしょうか。Webページを作るための基本的な言語そうなんです。HTMLって言語なんです。(正しくは違うかもしれませんが、認識としては言語でオッケーだと思ってます。人間がブラウザさんに手紙を送るときには「HTML」という言語で書いて送りましょうねってこと。プログラマーになりたい!って人じゃなくても、Webにかかわる人であれば知っておいて損はないと言われている言語です。HTMLが言語って言うからにはそれなりに文法ってやつも当然あるわけですね。自分のサイトを作りたい!って人は、文法を間違ってしまわないように、知っておくべき所だけでも勉強しておくと良いと思いますよ!ブラウザでHTMLを表示させるそれではさっそく、「HTMLを確認する方法」を見ていきましょう!方法としては、2種類あるので1つずつ見ていきましょう。※今回ご紹介する方法は、ブラウザによって操作が異なる場合があります。Chrome」を使用しております。他ブラウザをご利用の方はご注意下さい。「ソースの表示」から見る方法まずは、見たいサイトのページをブラウザで表示します。表示したら、ページ上どこにカーソルがあっても大丈夫なので、右クリックをしてみましょう!右クリック上のような画面が出てきたと思うので、赤枠内の「ページのソースを確認」を押しましょう。ソース表示はい!出てきましたね!ちなみにこれ、URLの所に注目すると通常のURLの頭に「view-source:」を付けた形になっていると思います。実はブラウザには「開発者ツール」なるものが存在します。(呼び方はブラウザによって異なるみたいですが。)さっそく見ていきましょう!まずは先ほどと同様、見たいサイトのページをブラウザで表示します。次に、キーボード上の「F12」ボタンを押してみましょう。開発者ツールはい、こんな画面が出てきましたね!!HTMLが表示されていることが分かると思います。ちなみに、この「開発者ツール」が便利な所は、この画面を出したまま通常の画面にカーソルを移すと、通常の画面で見えているものと、それに対比するHTMLを表示してくれることです。ちなみに、CSSの内容もだしてくれます。(CSSは、HTMLをデコレーションするための言語)非常に便利なものなので、気になった方は、調べてみると良いかもしれません。「hタグ」を見てみよう自分のサイトを作っているみなさんは、お馴染みの「hタグ」。最初に書いた通り、HTMLってのは言語で、文法もあるんだよってお話をしました。「hタグ」にも決まりがあったりします。・h1タグは1ページに1度だけ使用する・数字の小さいものから使用し、数字を飛ばして使用してはいけないこんな感じ。「h1」タグに関しては、そのページのタイトルに使用するのが一般的。h1タグhタグの数字に関しては、見出しの大きさ毎に使い分けるようにする。h2タグh3タグそんな感じですね。上手く「hタグ」を使いこなせるようになると、綺麗な文章になると思うので、しっかり使いこなせるようになっていきましょう!まとめいかがだったでしょうか?HTMLを確認するのは非常に簡単に出来ることが分かったと思います。HTMLを読めるかどうかは別にして。「hタグ」に関しては、一応正しい文法がこうですよってお話なだけで、間違っていても実は何ら問題ないと思われます。日本語だって英語だって、文法が間違っていようが正しく伝わればオッケーですもんね!まあ、そんなルールもあるんだなって知ってもらえれば嬉しいと同時に、HTML自体にも興味を持ってもらえてたら嬉しいなと思っています。【Windows】デスクトップを「CLaunch」でごみ箱Onlyに!【Excel】たった2つのショートカットで作業効率!【第11話】作って学ぶPHP!初心者による実践録!~追加画面3~【Midworks】正社員とフリーランスの良い所取り!?エンジニアの独立支援サービスとは?技術力ではない!?私が思う優秀なプログラマーの特徴とは。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。【Windows】デスクトップを「CLaunch」でごみ箱On...プロフィールのらくらへっぽこプログラマーとして、日々頑張って勉強をしております。未熟なITエンジニアだった私が、転職して1年でスキルアップしたこと。【リリース】朝が苦手な私が、朝活応援サイトを作りました。5万円だけ入れて半年放置した結果。