作成したページのソースコード（HTML等）をダウンロードする方法
ウェブサイトを閲覧していると、ページのデザインや構成が素晴らしいと感じる時がありますよね。 そんな時、どのように作られているのか、ソースコードを見てみたいと思うこともあるでしょう。
この記事では、Chromeブラウザを使って、ウェブサイトのソースコード（HTML、CSS、JavaScriptなど）をダウンロード/エクスポートする方法を分かりやすく解説します。
1. Chromeのデベロッパーツールを使う方法
Chromeブラウザには、ウェブサイトの開発に役立つ「デベロッパーツール」が標準搭載されています。このツールを使えば、簡単にソースコードを確認したり、ダウンロードしたりすることができます。
1.1. デベロッパーツールの起動
ダウンロードしたいウェブサイトを表示し、以下のいずれかの方法でデベロッパーツールを起動します。
- 右クリックして表示されるメニューから「検証」を選択
- キーボードの
F12キーを押す Ctrl + Shift + Iキー (Windows) またはCommand + Option + Iキー (Mac) を押す
1.2. ソースコードの確認とダウンロード
デベロッパーツールが開くと、画面右側にウェブサイトのHTMLが表示されます。
- 要素の確認: 画面左上の矢印アイコンをクリックし、ウェブサイト上の要素にカーソルを合わせると、対応するHTML要素がハイライト表示されます。
- ソースコードのダウンロード:
Ctrl + Sキー (Windows) またはCommand + Sキー (Mac) を押して、表示されているHTMLファイルを保存します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>こんにちは、世界！</h1>
</body>
</html>
2. ページを別名で保存する方法
ウェブサイト全体をまとめてダウンロードしたい場合は、「ページを別名で保存」機能を利用する方法が便利です。
- ダウンロードしたいウェブサイトを表示します。
- Chromeの右上のメニュー（縦に点が3つ並んでいるアイコン）をクリックし、「その他のツール」>「ページを別名で保存」を選択します。
- 保存場所を指定します。その際、「ファイルの種類」は「ウェブページ、完全」を選択して「保存」をクリックします。
| 項目 | 説明 |
|---|---|
| 保存場所 | ダウンロードしたファイルを保存する場所を指定します。 |
| ファイルの種類 | 「ウェブページ、HTMLのみ」を選択するとHTMLファイルのみが保存され、「ウェブページ、完全」を選択するとHTMLファイルと画像などの関連ファイルがまとめて保存されます。 |
注意点:
- ダウンロードしたファイルは、ウェブサイトの著作権を侵害しない範囲で使用してください。
- JavaScriptなど、動的に生成されるコンテンツはダウンロードできない場合があります。
よくある質問
Q1: ダウンロードしたHTMLファイルを開いても、ウェブサイトと同じように表示されません。
A1: ウェブサイトのデザインは、HTMLに加えてCSSやJavaScriptなどのファイルによっても制御されています。「ページを別名で保存」で「ウェブページ、完全」を選択して、関連ファイルを一緒にダウンロードしてください。
Q2: 特定の部分のHTMLだけをダウンロードすることはできますか？
A2: はい、デベロッパーツールで該当する要素を選択し、右クリックメニューから「Copy」>「Copy OuterHTML」を選択することで、特定の部分のHTMLのみをコピーできます。
Q3: ダウンロードしたソースコードを編集することはできますか？
A3: はい、ダウンロードしたHTMLファイルは、テキストエディタなどで自由に編集できます。ただし、編集したファイルを元のウェブサイトにアップロードすることは、許可されていない限り違法となる場合があるので注意が必要です。