WebページのHTMLをダウンロードする方法
Webサイトのデザインやコードを参考にしたい時、ローカル環境でHTMLファイルを確認したい時など、WebページのHTMLをダウンロードしたい場面は多くあります。
この記事では、Google Chromeを用いてWebページのHTMLをダウンロードする手順を分かりやすく解説します。
作成したWebページのソースコードをダウンロードする方法
ダウンロードしたいWebページを開く まず、ChromeでソースコードをダウンロードしたいWebページを開きます。 ページを別名で保存を選択 ページの何もないところで右クリックし、表示されたメニューの一番下にある「ページを別名で保存...」をクリックします。 
保存場所とファイル形式を指定 ファイルの保存場所を指定します。 「ファイルの種類」は必ず「ウェブページ、完全」を選択してください。 
保存を実行 「保存」ボタンをクリックすると、指定した場所にHTMLファイルと、画像などの素材をまとめたフォルダが保存されます。
JavaScriptなど、動的なコンテンツを含むWebページの場合、ダウンロードしたソースコードだけでは完全に再現できない場合があります。 Webページの著作権には注意しましょう。個人的な利用の範囲を超えて、無断で複製したり配布したりすることは違法となる場合があります。
Chromeの開発者ツールを使用する方法
Chromeの開発者ツールを使用すると、HTMLだけでなく、CSSやJavaScriptなどの関連ファイルもまとめてダウンロードできます。
手順は以下の通りです。
- ダウンロードしたいWebページを開きます。
- ページ上で右クリックし、「検証」を選択します。
- 開発者ツールの「Elements」タブで、HTMLのルート要素（通常はタグ）を選択します。
- ルート要素を右クリックし、「Save as HTML」を選択します。
- 保存場所を指定し、「保存」ボタンをクリックします。
メリット:
- 関連ファイルもまとめてダウンロードできる
- 操作が比較的簡単
デメリット:
- ダウンロードされるファイルサイズが大きくなる場合がある
ページを別名で保存する方法
Chromeの標準機能である「ページを別名で保存」を使う方法も便利です。
手順は以下の通りです。
- ダウンロードしたいWebページを開きます。
- Chromeの右上のメニュー（縦に点が3つ並んでいるアイコン）をクリックし、「その他のツール」>「ページを別名で保存」を選択します。
- 保存場所を指定します。
- ファイルの種類を「ウェブページ、完全」に設定します。
- 「保存」ボタンをクリックします。
メリット:
- Chromeの標準機能なので、追加の操作が不要
- 操作が非常に簡単
デメリット:
- HTMLファイル以外に画像などのフォルダも作成されるため、ファイル構成が複雑になる場合がある
ダウンロードしたHTMLの使い方
ダウンロードしたHTMLファイルは、テキストエディタで開いて内容を確認したり、Webブラウザで開いて表示を確認したりすることができます。
また、HTMLやCSSの知識があれば、ダウンロードしたファイルを編集して、自分好みのWebページを作成することも可能です。
まとめ
この記事では、Chromeを用いてWebページのHTMLをダウンロードする方法を紹介しました。
どちらの方法も簡単に実行できますので、ぜひ試してみてください。
よくある質問
Q1: ダウンロードしたHTMLファイルを開いても、Webページと同じように表示されません。
A1: ダウンロードしたHTMLファイルが参照しているCSSやJavaScriptファイルが正しく読み込まれていない可能性があります。ファイルの保存先やパスを確認してください。
Q2: 特定の部分のHTMLだけをダウンロードしたいのですが、可能でしょうか？
A2: 開発者ツールの「Elements」タブで、必要な部分のHTML要素を選択し、右クリックから「Copy」>「Copy OuterHTML」を選択することで、特定の部分のHTMLのみをコピーできます。
Q3: ダウンロードしたHTMLを編集しても良いですか？
A3: 著作権に配慮する必要があります。個人の学習目的であれば問題ありませんが、商用利用する場合は、Webサイトの利用規約を確認するなど、注意が必要です。
その他の参考記事: