Web サイトの HTML コードを表示する方法

Web サイトの構築に使用される基礎となる HTML コードは隠されているわけではありませんが、適切なツールがあれば誰でも簡単にアクセスできます。たとえば、Firefox、Chrome、Safari、Opera、Internet Explorer などの Web ブラウザーには、Web サイトの HTML、CSS、または JavaScript コードを直接表示する方法が複数あります。さらに、一部の専用 Web 開発者ツールは、ローカル ディスクに保存されたファイルのように、インターネットから Web ページを読み込んで開くことができます。

ブラウザでソースを表示

Web サイトの HTML コードを表示するために必要な手順は、基本的に Firefox、Chrome、Safari、Opera、Internet Explorer で同じです。テキストのみを含む Web ページのセクションを右クリックし、[ソースの表示] または [ページのソースの表示] オプションを選択します。ブラウザの設定に応じて、HTML コードが新しいブラウザ タブまたは別のアプリケーション ウィンドウで開きます。

ソースコードをディスクに保存

後で Web サイトのコードを調べたり編集したりする必要がある場合は、ページをハード ドライブに保存できます。 Firefox または Safari で Web ページを右クリックすると、[名前を付けてページを保存] オプションが表示されます。 Chrome と Opera には「名前を付けて保存」オプションがあります。 Internet Explorer を使用して Web ページを保存するには、[ツール]、[ファイル]、[名前を付けて保存] の順にクリックします。ブラウザは、Web ページ自体に加えて、ページが使用するすべての画像、CSS ファイル、および JavaScript をローカルの Web サーバーに保存します。

組み込みのブラウザ開発者ツール

Firefox、Chrome、Opera、および Internet Explorer にはそれぞれ、レンダリングされた Web ページとその HTML、CSS、および JavaScript コードを同時に表示できる開発者モードが用意されています。 Web 上の要素をクリックすると、そのコードが開発者表示パネルに表示されます。開発者パネルには、オプションまたは構成ツールからアクセスできます。 Safari にはネイティブの開発者ツールがありませんが、拡張機能としてインストールできます。

Web 開発者アプリケーション

Dreamweaver、Kompozer、Microsoft Expressions などの Web サイト デザイン ツールを使用すると、URL を使用してオンライン Web ページを開くことができます。ソース コードのみのビューまたは分割、プレビュー、およびソース ビューで HTML コードを表示します。さらに、コードを編集して変更をリアルタイムで表示できます。 Web サイトのサーバーに保存されている実際のコードは変更されません。

遭遇する可能性のある問題

意図的または非意図的に、一部の Web サイトは HTML コードを簡単に放棄しません。たとえば、一部のサイトでは、右クリックをブロックする JavaScript コードが使用されています。ページをディスクにダウンロードするか、ブラウザーで JavaScript を無効にすることで、引き続きソース コードを表示できます。他のサイトでは HTML フレームまたは iframe を使用しているため、ソースに直接アクセスできません。 Firefox、Chrome、Safari、および Opera は、フレームベースの Web サイトを検出し、フレームのソース コードを表示するオプションを自動的に提供します。 Web ページが別のドメインに保存されている JavaScript または CSS ファイルを使用している場合、アクセス可能な HTML コードからその URL をコピーし、それを新しいブラウザー タブのアドレス バーに貼り付けることで、そのファイルのコードを直接表示できます。