すぐにわかる!ブラウザでWEBサイトのHTMLソースコードを表示する方法

WEBサイトのHTMLソースコードを表示する方法|TakaBlog

本サイトはエフィリエイト広告を利用しています。

ブログ制作には、他所のサイトのソースを見ると勉強になると言われたのですが、ソースってなんでしょうか??
Taka
サイトのソースとはHTMLやCSS等のソースコードのことですね。ブラウザのソースを表示する機能は、サイトのカスタマイズにとても役立つのでぜひ使ってみましょう。

WordPressで、文字サイズやカラー、様々な装飾などの外観を変更したい場合、「class」や「id」を指定しCSSを記述します。

該当する「class」や「id」を知るには、ページのHTMLソースコードを見るとわかりやすいです。

主要なWebブラウザであれば、HTMLソースコードを表示する機能があらかじめ備わっています。

今回はその方法を説明します。

目次

HTMLソースコードとは

HTMLとは、Hyper Text Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)の頭文字をとったもので、Webページを作るための最も基本的なマークアップ言語のひとつです。

ブラウザで表示されているWebページの大部分は、このHTMLで作られています。

このHTMLの一連の記述のことをHTMLソースコードと呼んでいます。

もちろん、このブログに使われているのもHTMLです。

HTMLソースコード

このように、WebページはHTMLタグを使って記述されています。

どのブラウザもこのHTMLソースコードを読み込んでWebページを表示しています。

ソースコードはすべてのWebページで見ることができるので、気になるWEBサイトのHTMLソースコードを見てみることをおすすめします。

ソースコードの確認が必要になるとき

HTMLソースコードを確認するタイミングは様々です。

WordPressでclassやidを指定して外観をカスタマイズしたい場合や、プラグインなどを使って挿入したHTMLタグが正しい位置に挿入されているかをチェックする場合などです。

また、HTMLやCSSの知識をこれから身につける方の学習用としても、HTMLソースを読むことはとてもためになります。

ソースコードの表示のさせ方

「Chrome」や「Safari」などのWebブラウザには、HTMLソースコードを表示する機能が準備されています。

ブラウザによって若干異なりますので、それぞれの場合で解説します。

バージョンによって外見やメニューの名称に若干の違いがある場合がありますが、基本的な操作に変わりはありません。

Chrome(クローム)の場合

バージョン:87.0.4280.88

WEBサイトのHTMLソースコードを表示する方法|TakaBlog

HTMLソースコードを表示したいページを開いた状態で、「右クリック」>「検証」をクリックします。

WEBサイトのHTMLソースコードを表示する方法|TakaBlog

これでHTMLソースとCSSが見れるようになります。

右上の✗ボタンで閉じれば元の画面に戻ります。

chromeのメニューからも同じ事ができます。

WEBサイトのHTMLソースコードを表示する方法|TakaBlog

ウィンドウの右上のメニューボタンをクリックし、その他のツール>デベロッパーツールを選択。

そうすると、先ほど紹介した方法と同じ用意にHTMLソースを見られるようになります。

Safari(サファリ)の場合

バージョン:14.0.2 (16610.3.7.1.9)

SafariでHTMLソースを表示させるためには設定が必要です。

デスクトップ上部の「メニュー」>「環境設定」をクリックします。

WEBサイトのHTMLソースコードを表示する方法|TakaBlog

「詳細」タブをクリックし、一番下にあるメニューバーに”開発”メニューを表示にチェックを入れましょう。

WEBサイトのHTMLソースコードを表示する方法|TakaBlog

先程の設定により出現した「開発」メニューから、「ページのソースを表示」をクリックします。

WEBサイトのHTMLソースコードを表示する方法|TakaBlog

これでHTMLソースとCSSが下部に表示され見れるようになります。

左上の✗ボタンで閉じれば元の画面に戻ります。

Firefox(ファイヤーフォックス)の場合

バージョン:84.0.2 (64 ビット)

WEBサイトのHTMLソースコードを表示する方法|TakaBlog

アプリの右上のメニューをクリックし「ウェブ開発」を選択します。

WEBサイトのHTMLソースコードを表示する方法|TakaBlog

ウェブ開発のメニューから「開発ツールを表示」を選択します。

WEBサイトのHTMLソースコードを表示する方法|TakaBlog

これでHTMLソースとCSSが下部に表示され見れるようになります。

左上の✗ボタンで閉じれば元の画面に戻ります。

WEBサイトのHTMLソースコードを表示する方法|TakaBlog

デスクトップ上部のメニューから「ツール」>「ウェブ開発」>「ソースを表示」でも同じようにHTMLソースを表示させることができます。

まとめ

今回の記事で説明したように、主要なWEBブラウザには開発者用の機能が備わっています。

ソース表示させ実際に変更箇所を見ながら実際に設定値を変えて見栄えを確認することができます。

ソースを自分で書くことはできなくても、見ればなんとなく何をしているのかわかるようになれば、ブログ運用に役立ちます。

HTMLやCSSなどは最初は何が書いてあるのかわからないと思いますが、一部の箇所の色を変える、サイズを変えるなど、小さなカスタマイズから挑戦してみましょう。

  • URLをコピーしました!

この記事を書いた人

ブログ初心者の方にもわかりやすい記事作成を心がけています。
副業ブログでコツコツと収益を積み重ねながら地道にサイトを作っています。

目次