作成したページのソースコード（HTMLなど）をダウンロードする方法
ウェブサイトの見た目を気に入ったり、コードを参考にしたいと思った時、HTMLファイルが欲しいと思うことはよくあります。しかし、ウェブサイトを表示しているだけでは、その裏側にあるHTMLコードを見ることはできません。
そこで今回は、Chromeブラウザを使って、ウェブサイトのソースコード（HTML、CSS、JavaScriptなど）をダウンロード/エクスポートする方法をご紹介します。
Chromeのデベロッパーツールを使う方法
Chromeブラウザには、ウェブサイトの開発者向けのツール「デベロッパーツール」が備わっています。このツールを使うと、HTMLコードを簡単にコピー＆ペーストできます。
- ダウンロードしたいウェブサイトを開きます。
- ページ上の任意の場所を右クリックし、「検証」を選択します。
または、キーボードの
Ctrl + Shift + I(Windows) またはCommand + Option + I(Mac) を押します。 - デベロッパーツールが開きます。
Elementsタブが選択されていることを確認してください。 - HTMLコードが表示されます。コードの左側にマウスオーバーすると、ページ上の対応する要素がハイライト表示されます。
- コピーしたいコードの行をクリックして選択し、
Ctrl + C(Windows) またはCommand + C(Mac) を押してコピーします。 - テキストエディタなどにペーストします。
ページを別名で保存する方法
ページ全体をまとめてダウンロードしたい場合は、「ページを別名で保存」機能を使いましょう。
- Chromeの右上の「Google Chromeの設定」（縦に並んだ3つの点）をクリックします。
- 「その他のツール」⇒「ページを別名で保存」をクリックします。
- パソコンの保存場所を指定します。
- その際にファイルの形式は「ウェブページ、完全」を選択して「保存」をクリックします。
| ファイル形式 | 説明 |
|---|---|
| ウェブページ、HTMLのみ | HTMLファイルのみが保存されます。画像は別途保存する必要があります。 |
| ウェブページ、完全 | HTMLファイル、画像、CSS、JavaScriptなど、ページに必要なファイルがすべて保存されます。 |
ダウンロードしたHTMLの使い方
ダウンロードしたHTMLファイルは、テキストエディタで開いて編集したり、ブラウザで開いて表示することができます。ウェブサイトの構造を参考にしたり、自分のウェブサイト制作に役立てたりすることができます。
サンプルページ
こんにちは、世界！
Q&A
Q. ダウンロードしたHTMLファイルを開いても、画像が表示されません。
A. ファイル形式で「ウェブページ、HTMLのみ」を選択した場合、画像は別途保存する必要があります。「ウェブページ、完全」を選択して保存してください。
Q. JavaScriptが無効になっています。
A. セキュリティ上の理由から、ダウンロードしたHTMLファイルではJavaScriptが無効になっている場合があります。ブラウザの設定を変更することで、JavaScriptを有効にできる場合があります。
Q. 商用利用は可能ですか？
A. ダウンロードしたHTMLファイルの利用規約は、ウェブサイトによって異なります。商用利用する場合は、必ずウェブサイトの利用規約を確認してください。