模写コーディング  画像の入手方法

プログラミング 初心者

模写コーディングを始めようと思ったけど、画像はどこから入手するの?

本記事ではそのお悩みを解決していきます!

今回はgoogole chromeを使った方法で行っています。

手順1 Image Downloaderのダウンロード

まず、Googole Chromeで以下のリンクを開いてください。

Image Downloader
Browse and download images on a web page.

すると以下のようなサイトに出るので、『Chromeに追加』を押しましょう。

すると画面右上にimage downloaderのマークが出てきます。これでダウンロードされたことになります。

では、次は模写するサイトに飛びましょう。

今回は模写されることの多いiSaraをモデルにしていきます。

皆さんは、模写したいサイトに飛んでください。

iSara[イサラ]|バンコクのノマドエンジニア育成講座
iSaraとは「稼ぐこと」にフォーカスしたエンジニア育成講座です。なお、iSaraで「基本的なプログラミングスキル」は教えません。基礎的なプログラミングスキルは無料で学べる時代。iSaraでは、基礎知識学習は事前課題とチャットサポートのみ。今なら月15万円稼げるまで永久サポート付きです。

では、模写サイトに飛んだら

  1. 右上のimage downloaderのアイコンをクリックしましょう。
  2. すると、上記のような画面が出てくるので、select allをクリック。
  3. そして、右上部のdown loadをクリック。

3を行うと上記のような画面が出ますが、こちらはyesで大丈夫です。

すると、ファイルのダウンロードに画像が保存されています。

以上で、終わり!と言いたいのですが、

こちらでは、background-imageで使われている画像はダウンロードできていないので、残りは次のパートです。

手順2 デベロッパーツールでダウンロード

まずは、模写サイトのページを開いているときにデベロッパーツールを開きます。

デベロッパーツールはmacの場合 optionキー+commandキー+iで開けます。

windowsの場合はF12で開けます。

すると以下のような画面になります。

このデベロッパーツールから画像を取得していきます。

上記はデベロッパーツール部分を拡大したものです。

  1. まず、右上部の>>をクリック。
  2. すると、リストが出てくるのでApplicationをクリック。

すると上記のような画面に変わります。

  1. 一番に下にあるFramesのtopをクリック。
  2. そして、その中のimagesをクリック

すると、画像のファイルが出てきます。画面で言うと緑のファイルです。

こちらが画像になります。

その中から、作業1でダウンロードできなかった画像を一つずつ保存していきましょう。

作業1でダウンロードした画像も入っているので、選別して保存していってください。ここの作業は少し、面倒かもしれませんが頑張りましょう!

最後に

以上で全ての画像が入手できますので、皆さん模写コーディング 頑張ってください!

では!

コメント

  1. […] 模写コーディング  画像の入手方法模写コーディング に必要な画像の入手方法をまとめました!tsubasa11.com2020.05.13 […]

タイトルとURLをコピーしました