作成したページのソースコード(HTML等)をダウンロードする方法
Webページを作成したら、そのソースコード(HTML、CSS、JavaScriptなど)をダウンロードして、バックアップとして保存したり、他のプロジェクトで使用したりすることができます。
この記事では、Google Chromeを用いてWebページのソースコードをダウンロードする方法を詳しく解説します。
Chromeのデベロッパーツールを使用する方法
Chromeのデベロッパーツールを使用すると、現在表示しているページのHTMLを簡単にコピー&ペーストできます。
- ダウンロードしたいWebページを開きます。
- ページ上の任意の場所を右クリックし、「検証」をクリックします。または、キーボードの
Ctrl + Shift + I
(Windows) もしくはCommand + Option + I
(Mac) を押します。 - デベロッパーツールが開き、HTML要素が表示されます。
<html>
タグを右クリックし、「Copy」→「Copy element」を選択します。- テキストエディタを開き、コピーしたHTMLを貼り付けます。
- ファイル名をつけて
.html
拡張子で保存します。
「ページを別名で保存」機能を使用する方法
この方法は、ページ全体をそのまま保存したい場合に便利です。
- ダウンロードしたいWebページを開きます。
- Chromeの右上にある ︙ (縦に並んだ3つの点) をクリックします。
- 「その他のツール」→「ページを別名で保存」の順にクリックします。
- 保存場所を選択し、「ファイルの種類」で「ウェブページ、完全」を選択します。
- 「保存」をクリックします。
項目 | 説明 |
---|---|
ファイルの種類 |
|
ソースコードの表示とダウンロードの例
```html
こんにちは、世界!
これはサンプルのHTMLページです。
```
よくある質問
Q1: HTMLファイルを開いても、Webページと同じように表示されません。なぜですか?
A1: HTMLファイルだけをダウンロードした場合、CSSやJavaScript、画像などの関連ファイルは含まれていません。Webページと同じように表示するには、「ウェブページ、完全」を選択してダウンロードする必要があります。
Q2: ダウンロードしたHTMLファイルを編集できますか?
A2: はい、ダウンロードしたHTMLファイルはテキストエディタで編集できます。ただし、変更をWebページに反映するには、サーバーにアップロードする必要があります。
Q3: JavaScriptが無効化されているため、Webページの一部が正しく表示されません。どのようにすればよいですか?
A3: Chromeの設定でJavaScriptを有効にする必要があります。設定画面を開き、「プライバシーとセキュリティ」→「サイトの設定」→「JavaScript」の順に選択し、「すべてのサイトでJavaScriptを実行する(推奨)」を選択します。