表示しているページを画像やCSSも含めて保存する

Google Chrome では現在表示しているページをローカル環境に保存することができます。 HTML ファイルをだけを保存したり、画像や CSS ファイルも含めて保存したりすることができます。ここでは Google Chrome を使って表示している Web ページを画像や CSS も含めて保存する方法について解説します。

(Last modified: )

ページを保存する3つの方法

Chrome で表示しているページをローカル環境に保存するには、画面右上に表示されている「?」アイコンをクリックしてください。

ページを保存する3つの方法(1)

表示されたメニューの中から「その他のツール」をクリックしてください。

ページを保存する3つの方法(2)

サブメニューの中から「名前を付けてページを保存」をクリックしてください。

ページを保存する3つの方法(3)

ページの保存先と保存方法を設定するためのダイアログが表示されます。

ページを保存する3つの方法(4)

「ファイルの種類」をクリックしてください。ページをダウンロードするときの形式として次の 3 種類が表示されます。

ページを保存する3つの方法(5)

ウェブページ、HTMLのみ (*.html, *.html)
ウェブページ、1つのファイル (*.mhtml)
ウェブページ、完全 (*.htm, *.html)

それぞれの形式を選択した場合に、どのようにページが保存されるのかをこのあとで確認します。

なお今回サンプルとして次のような Web ページを用意しました。 HTML ページには画像ファイルが 3 つ追加されており、外部に用意した CSS ファイルを読み込んでいます。

ページを保存する3つの方法(6)

ページを保存する3つの方法(7)

Chrome で名前を付けてページを保存を表示するショートカットは [Ctrl] + [s] です。

ウェブページ、HTMLのみで保存する

最初にページを保存するときのファイルの種類として「ウェブページ、HTMLのみ」を選択した場合です。対象 Web ページの HTML ファイルだけをダウンロードします。

ウェブページ、HTMLのみで保存する(1)

ダウンロードした HTML ファイルをブラウザで開いてみると、画像ファイルや CSS ファイルが存在しませんので画像なしでスタイルも適用されていない状態で表示されます。

ウェブページ、HTMLのみで保存する(2)

ダウンロードした HTML ファイルをテキストエディタで開いてみると、元の HTML ファイルとまったく同じファイルをダウンロードしています。

ウェブページ、HTMLのみで保存する(3)

元となっている HTML ファイルだけ必要な場合にこの形式を選択してください。

ウェブページ、1つのファイルで保存する

次にページを保存するときのファイルの種類として「ウェブページ、1つのファイル」を選択した場合です。対象 Web ページの HTML ファイルや CSS ファイル、画像ファイルをまとめてダウンロードします。

ウェブページ、1つのファイルで保存する(1)

この形式を選択した場合、 MHTML 形式のファイルとしてダウンロードが行われます。ファイルの拡張子は .mhtml です。 MHTML 形式とは HTML ファイルと画像や CSS ファイルなど Web ページを構成する複数のファイルをを MIME のマルチパートの仕組みを使ってまとめたものです。

Google Chrome は MHTML 形式のファイルに対応しているので、ダウンロードした MHTML ファイルをブラウザで開いてみると、元となっている Web ページと同じように表示することができます。

ウェブページ、1つのファイルで保存する(2)

ダウンロードした MHTML ファイルをテキストエディタで開いてみると、 HTML ファイル、 CSS ファイル、画像ファイル、がそれぞれパートに分かれて記述されています。

ウェブページ、1つのファイルで保存する(3)

Web ページをローカル環境でもそのまま表示したい場合に、必要なファイルを一つのファイルにまとめて管理したい場合にこの形式を選択してください。

ウェブページ、完全で保存する

最後にページを保存するときのファイルの種類として「ウェブページ、完全で保存する」を選択した場合です。対象 Web ページの HTML ファイルや CSS ファイル、画像ファイルをすべてダウンロードします。

ウェブページ、完全で保存する(1)

この形式を選択した場合、 HTML ファイルはそのままダウンロードされて、 HTML ファイルから参照している CSS ファイルや、ページに追加されている画像ファイルはすべて一つのフォルダの中に入れられていっしょにダウンロードされます。(その他、 HTML ファイルは CSS ファイルや画像ファイルの参照先が変わるので自動的に書き換えられます)。

ウェブページ、完全で保存する(2)

ウェブページ、完全で保存する(3)

ダウンロードした HTML ファイルをブラウザで開いてみると、画像ファイルや CSS ファイルもすべてダウンロードされていますので、元となっている Web ページと同じように表示することができます。

ウェブページ、完全で保存する(4)

ダウンロードした HTML ファイルをテキストエディタで開いてみると、元の HTML ファイルと基本的には同じですが、 CSS ファイルや画像ファイルの参照先が書き換えられています。

ウェブページ、完全で保存する(5)

Web ページを構成するファイルを個別に保存したい場合にこの形式を選択してください。

----

Google Chrome を使って表示している Web ページを画像や CSS も含めて保存する方法について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。

カテゴリ