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

ブログ制作には、他所のサイトのソースを見ると勉強になると言われたのですが、ソースってなんでしょうか？？

Taka

サイトのソースとはHTMLやCSS等のソースコードのことですね。ブラウザのソースを表示する機能は、サイトのカスタマイズにとても役立つのでぜひ使ってみましょう。

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

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

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

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

HTMLソースコードとは

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

ブラウザで表示されているWebページの大部分は、この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

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

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

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

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

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

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

Safari（サファリ）の場合

バージョン：14.0.2 (16610.3.7.1.9)

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

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

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

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

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

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

Firefox（ファイヤーフォックス）の場合

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

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

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

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

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

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

まとめ

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

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

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

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