作成したページのソースコード（HTML等）をダウンロードする方法
Webページを作成したら、そのソースコード（HTML、CSS、JavaScriptなど）をダウンロードして、バックアップを取ったり、他のプロジェクトで使用したりすることができます。この記事では、Chromeブラウザを用いてHTMLをダウンロードする方法を紹介します。
Chromeのデベロッパーツールを使用する方法
Chromeのデベロッパーツールを使用すると、現在表示しているページのHTMLを簡単にコピー＆ペーストできます。
- ダウンロードしたいページを開きます。
- ページ上で右クリックし、「検証」を選択します。
- デベロッパーツールが開きます。Elementsタブが選択されていることを確認してください。
- Elementsタブの一番上のHTMLタグ()をクリックします。
- Ctrl + Aキー (Macの場合はCommand + Aキー) を押して、すべてのコードを選択します。
- Ctrl + Cキー (Macの場合はCommand + Cキー) を押して、コードをコピーします。
- テキストエディタを開き、Ctrl + Vキー (Macの場合はCommand + Vキー) を押して、コードを貼り付けます。
- ファイル名をつけて、拡張子を.htmlとして保存します。
ページを別名で保存する方法
Chromeの「ページを別名で保存」機能を使用すると、HTMLファイルと、それに関連する画像やCSSなどのファイルをまとめてダウンロードできます。
- ダウンロードしたいページを開きます。
- Chromeの右上のメニュー (縦に3つ点が並んでいるアイコン) をクリックします。
- 「その他のツール」>「ページを別名で保存...」をクリックします。
- 保存先とファイル名を指定します。
- 「ファイルの種類」のドロップダウンメニューから、「ウェブページ、完全」を選択します。
- 「保存」をクリックします。
| 項目 | 説明 |
|---|---|
| ファイルの種類 |
|
サンプルページ
こんにちは、世界！
よくある質問
Q1. ダウンロードしたHTMLファイルを開いても、画像が表示されません。
A1. 「ウェブページ、完全」で保存した場合、画像はダウンロード先のフォルダに保存されます。HTMLファイルと同じフォルダに画像を移動してください。
Q2. ダウンロードしたHTMLファイルの文字化けが発生します。
A2. HTMLファイルの文字コードを確認してください。通常はUTF-8を使用します。テキストエディタで文字コードを変更できます。
Q3. JavaScriptが動作しません。
A3. セキュリティ上の理由から、ローカルで保存したHTMLファイルではJavaScriptが制限される場合があります。JavaScriptを動作させるには、Webサーバーにファイルをアップロードする必要があります。