HTMLのダウンロード方法は？

作成したページのソースコード（HTML等）をダウンロードする方法

Webページを作成したら、そのソースコード（HTML、CSS、JavaScriptなど）をダウンロードして、バックアップを取ったり、他のプロジェクトで使用したりすることができます。この記事では、Chromeブラウザを用いてHTMLをダウンロードする方法を紹介します。

Chromeのデベロッパーツールを使用する方法

Chromeのデベロッパーツールを使用すると、現在表示しているページのHTMLを簡単にコピー＆ペーストできます。

  1. ダウンロードしたいページを開きます。
  2. ページ上で右クリックし、「検証」を選択します。
  3. デベロッパーツールが開きます。Elementsタブが選択されていることを確認してください。
  4. Elementsタブの一番上のHTMLタグ()をクリックします。
  5. Ctrl + Aキー (Macの場合はCommand + Aキー) を押して、すべてのコードを選択します。
  6. Ctrl + Cキー (Macの場合はCommand + Cキー) を押して、コードをコピーします。
  7. テキストエディタを開き、Ctrl + Vキー (Macの場合はCommand + Vキー) を押して、コードを貼り付けます。
  8. ファイル名をつけて、拡張子を.htmlとして保存します。

ページを別名で保存する方法

Chromeの「ページを別名で保存」機能を使用すると、HTMLファイルと、それに関連する画像やCSSなどのファイルをまとめてダウンロードできます。

  1. ダウンロードしたいページを開きます。
  2. Chromeの右上のメニュー (縦に3つ点が並んでいるアイコン) をクリックします。
  3. 「その他のツール」>「ページを別名で保存...」をクリックします。
  4. 保存先とファイル名を指定します。
  5. 「ファイルの種類」のドロップダウンメニューから、「ウェブページ、完全」を選択します。
  6. 「保存」をクリックします。
項目 説明
ファイルの種類
  • ウェブページ、HTMLのみ: HTMLファイルのみをダウンロードします。
  • ウェブページ、完全: HTMLファイルと、それに関連する画像やCSSなどのファイルをまとめてダウンロードします。
 




  
  サンプルページ


  
こんにちは、世界！

よくある質問

Q1. ダウンロードしたHTMLファイルを開いても、画像が表示されません。

A1. 「ウェブページ、完全」で保存した場合、画像はダウンロード先のフォルダに保存されます。HTMLファイルと同じフォルダに画像を移動してください。

Q2. ダウンロードしたHTMLファイルの文字化けが発生します。

A2. HTMLファイルの文字コードを確認してください。通常はUTF-8を使用します。テキストエディタで文字コードを変更できます。

Q3. JavaScriptが動作しません。

A3. セキュリティ上の理由から、ローカルで保存したHTMLファイルではJavaScriptが制限される場合があります。JavaScriptを動作させるには、Webサーバーにファイルをアップロードする必要があります。