Web制作

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

2020年6月23日

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

じゅんぺいブログは、Web制作コーディングWordPress制作)の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください!
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

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

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

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

chrome ウェブストア

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

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

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

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

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

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

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

Image Downloader:Chromeに追加完了

Image Downloader:Chromeに追加完了

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

Chrome拡張機能有効化

Chrome拡張機能有効化

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

Image Downloader:有効化

Image Downloader:有効化

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

iSara[イサラ]|バンコクのノマドエンジニア育成講座

 

画像をダウンロードする

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

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

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

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

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

 

  1. サイトを開いた状態で右上のアイコンをクリック
  2. 全てをダウンロードする場合チェック
  3. 『Download』をクリック
  4. 警告文を再表示しないにチェック
  5. 『Yes, Download』をクリック

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

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

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

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

背景画像について

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

まとめ

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

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

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

以上になります。

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

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-Web制作
-