簡単ホームページ作成ツールならAMS - まずはお試し

全国対応!まずはご相談ください 電話番号0120-55-4682

【初心者向き】ホームページのhtmlソースを表示させる方法

2021/7/21

【初心者向き】ホームページのhtmlソースを表示させる方法

ホームページを制作するときに使うプログラム言語のことをhtmlといいます。

ライバルサイトやきれいなレイアウトのホームページをみていると、どのようなhtmlソースで書かれているのか調べてみたいことがありますよね。

初心者のかたでも簡単に、そのhtmlソースをサクッとみることができます。

ページのソースを表示

ブラウザMicrosoft EdgeやGoogle chromeを使っている前提で説明します。

  1. htmlをみたいホームページにアクセスします
  2. そこで右クリック>「ページのソースを表示」コマンドをクリック

そうすると新しいウィンドウが開いて、そこにhtmlの記述が表示されます。

※ショートカットキーは ctrl+U

※プログラム言語で書かれているファイルのことを「ソースファイル」といいます。ホームページの言語htmlで書かれているファイルをhtmlソースといいます。

ページ内検索を使って詳しくみる

表示されたhtmlソースはコードとテキストだけの羅列でぱっとみ見づらかったりします。

ブラウザのページ内検索コマンドを使い、任意のhtmlタグを検索したり、気になった部分のテキストで検索することで見たかった部分を探しやすくなります。

スタイルシートと合わせて立体的にみてみる

ホームページはhtmlで見出しや段落など文書構造をマークアップするもの、スタイルシートはレイアウトやデザインをするものです。

ただ「ページのソースを表示」させるだけでなく、スタイルシートはどのように記述されているのかを同時にみることができるツールも用意されています。

  1. htmlをみたいホームページにアクセスします
  2. そこで右クリック>「検証」もしくは「開発者ツールで調査する」コマンドをクリック

そうすると同じウィンドウ内で表示が切り替わり、左にホームページ画面、中央にそのページのhtmlソース、そして右にはスタイルシートが表示されます。

このツールを使うことで、htmlソースだけでなくそこで使われているスタイルシートでの記述もみれるのでより立体的に分析することができます。

参考になれば幸いです。

常時SSL+スマホサイト最適化の効果の出るホームページが39,800円!
【0120-55-4682】月~金曜9:00~18:00

月~金曜9:00~18:00

メールでのお問い合わせ
AMS簡単ホームページ作成ツール
あなたのサイトをPRしましょう!
AMSマニュアル
よくある質問と回答
AMSお問合わせ

月別アーカイブ