模写コーディングで使う画像をサイトから一括ダウンロードする方法

サイトの模写コーディングの時に使う画像を一括で取得する方法ない？

Progateが一通り終わった後には模写をする人が多いと思います。

そして模写をする際にそのサイトで使用されている画像を取得して模写していきますが、画像を1つずつ右クリックで保存していくとかなり効率が悪いです（右クリックで保存が出来ない画像もあります）

今回はその画像を一括で取得する方法について書いていきたいと思います。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼完全無料／

毎日先着制！

模写コーディングで使う画像をサイトから一括で取得する方法

今回はChromeの拡張機能『Image Downloader』を使います。

これは『Chromeの設定 → 拡張機能』から検索しても見つからないので、以下ページにアクセスしてChromeに追加して下さい。

まずはこちらが表示されるので『Chromeに追加』をクリックします。

Image Downloader：『Chromeに追加』をクリック

そして『拡張機能を追加』をクリックします。

Image Downloader：『拡張機能に追加』をクリック

そして画面右上にこちらが表示されれば追加完了です。

Image Downloader：Chromeに追加完了

もしアイコンが表示されていなかったら右上のパズルのようなアイコンをクリックして、ピンをクリックして有効化しましょう。

Chrome拡張機能有効化

右上にアイコンが表示されれば有効化完了です。

Image Downloader：有効化

今回テストで使うのは私も参加した模写サイトとしても有名なiSaraのLPにします。

それではダウンロード手順についてですが、次のようになります。

Image Downloader：画像のダウンロード手順

ダウンロードをクリックしたら警告文が出ますが、気にせずチェックしてOKです。

警告文を翻訳すると次のようになります。

「Chromeの設定をざっと見て、ダウンロード場所を検索します。 [ダウンロードする前に各ファイルの保存場所を確認する]オプションがオンになっている場合、続行すると多くのポップアップウィンドウが開く可能性があります。これを実行してもよろしいですか？」

するとダウンロードフォルダに画像が1枚ずつダウンロードされます。

背景画像について

以前はダウンロード出来るのは『imgタグ』のみでしたが、今は背景画像である『background-image』もダウンロード出来るようになったようです。

今回は模写コーディングで使う画像をサイトから一括ダウンロードする方法を解説しました。

模写であれば適当な画像やアイコンでもいいかも知れませんが、せっかくなら同じ画像で模写したいですよね。

あとはここから少しずつデベロッパーツールに慣れていくという目的も少しあります（デベロッパーツールはWeb制作では必須です）

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！